A browser extension that automatically increases contrast on sites.

👍‍

This could also be implemented in the browsers :)

As a general rule, we should give the user as much control as possible, and we should never disable or block their settings from working. For this reason, it's very important to use a relative unit like rem for typography.

Then we should use rem everywhere ?

Do I actually want everything to scale with font size?
When we use rem values for horizontal padding, though we amplify the effect "larger the text is, the fewer characters can fit on each line".

So the final question is:

“Should this value scale up as the user increases their browser's default font size?”

I've come to realize, however, that we usually do want to use rems for media queries.

We're so used to thinking of media queries in terms of mobile/tablet/desktop, but I think it's more helpful to think in terms of available space. [Why in the post]

Other example is the space between paragraphs: it has a "functional" purpose so that we can quickly tell where one paragraph ends and the next one begins. For this reason, it does make sense to scale these margins with the user's chosen root font size.

Example of use of em instead of rem

• rem

h1 {
  font-size: 3rem
  margin-top: 6rem;
  margin-bottom: 1.5rem;
}
h2 {
  font-size: 2rem
  margin-top: 4rem;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 0.75rem;
}

• em

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}
h1, h2, h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

Another example is the width of a button: we can think about it alone yet.

Finally, it is better to forge an intuition as opposed to a set of rules about using rem/px as there are always edge cases.

Why zoom is deactivated on some websites ? What is the advantage ?

You can force it though:

In Firefox find the settings, select “Accessibility” and activate “Zoom on all website”
In Chrome find the settings, select “Accessibility” and check “Force enable zoom”

Especially what I was looking for :)

Examples of accessible component and use cases

Another good font for digital displays 👍

Pick your main color and this tool generate the platette that is WCAG compliant.
It generates individual Sass variables or css variables.

Projet: rendre cette bannière accessible !

#006fc6 (used on the smash magazine website, here as book titles)

If you want the text to be on dark background: #1499FF pass all AAA criteria about contrast.
On the contrary, #005A9E pass all the contrast on white background

I argued more and more about the utility for more than one skip link on some websites. Here a real use case example. This website has 3 skip links at the date of 2022-02-19 when you press tabs:

• Skip to main content
• Jump to all topics
• Jump to list of all articles

One point I find negative however: the last link "Jump to list of all articles" is redundant with the first link of the main menu, 2 tabs further. After thinking about it, this may be due to the versions for small displays that don't allow to navigate the menu with the keyboard o_0

I remember that in the case of this site, having two escape links seems quite practical:

• Skip to main content
• Jump to all topics → concerns the categories of articles on the site

Then by pressing tabs successively, we get to the main navigation.

So here is a site that demonstrates the usefulness of skip links with a nuanced example (2 examples of justified skip links, with another example of superfluous links).

• Sufficient contrast between foreground and background (Colour Palette Checker or Colour Contrast Analyser).
• Coding of information not exclusively through colours (e.g. icons)
• Interactive elements easy to identify as such
• Clear and consistent navigation
• Input fields are provided with clear meaningful labels
• The system provides easy-to-perceive feedback?
• Meaningful grouping of content through spacing and headings
• Typography works with (browser) scaling of font size?
• Alternatives for images and multimedia content (e.g. descriptive text) are offered
• Automatic playback or execution of content and action is avoided
• Headings and links are meaningful
• There are clear work instructions and assistance

Das ist einfach relevant und gut von dem Unternehme, eine erste Überblick über den Dienst inkl. Preisen zu haben.

À tester

240 rules to improve websites

and a start to improve the situation.

1. Using vue props to congru accessibility, such as headline elements
2. Use component reusability to make an accessibility feature once: a raw aria-live, vue announcer, and read more on the WAI-ARIA Authoring Practices https://github.com/w3c/aria-practices/issues
   -View And Help Vue’s Accessibility Initiatives Grow and references are in the post
   • Learn From React Accessibility Leads
3. Vue’s $refs Are Great For Focus Management

A list of evaluation tools recommended by the W3C-WAI.

Un exemple de site qui utilise des liens d'évitement visibles, et deux au lieu d'un: « aller au contenu », OK, mais aussi « aller à la navigation »

Latest standard of the year 2022