More keyboard shortcuts for Voiceover

Getting started with VoiceOver in 5 commands

L'accessibilité universelle est un principe montrant que rendre un service accessible aux personnes porteuses de handicap est bénéfique pour tous les utilisateurs. Par exemple, utiliser une taille de police de 16 pixels minimum est nécessaire pour les personnes qui ont de la difficulté à voir, mais rendra aussi le contenu plus facilement lisible pour tout le monde.

Comme la situation de handicap peut aussi être temporaire, cela profite aux personnes qui sont temporairement handicapées, comme après un accident par exemple.

Simplifier le langage permettra à plus de personnes de profiter du contenu.

Se baser sur les statistiques d'utilisation de l'application peut être trompeur. En effet, seules les personnes qui auront pu surmonter les différentes épreuves pour arriver jusqu'au contenu apparaîtront dans ces statistiques.

Ce n'est pas à la personne qui utilise votre service qu'appartient la responsabilité de formater des données que vous souhaitez enregistrer en base de données. Par exemple, les messages du type "Entrez votre numéro de téléphone sans tirets" devraient être remplacés par un retrait automatique de ces caractères dans le champ.

Utiliser du HTML sémantique.

Il s'ensuit ensuite d'une liste de recommandations que je connais déjà bien personnellement.

"Understanding and making sense of data is stressful anyway, but in a pandemic, it’s worse." from accessiblenumbers.com/explain-

It's the best online resource I've found so far about accessibility of numbers. I also find practical that nearly every sentence has a link to check the resource in-depth. It can lack good examples though. What should be written instead of the currently hard to read raw number?

A checklist about accessibility. It ensures that the website follows some standards. The demo (https://www.magentaa11y.com/demos/) definitely help in order to follow these.

Most of the time, your job with JavaScript to enhance components’ keyboard accessibility will be done with just a handful of tools, including the use of event listeners and certain JavaScript methods of a couple of Web APIs that can help us in this task.

• keydown event: Instead, the utility of the keydown event comes when you need to add functionality to other keys [than enter or space].
• blur event: most of the time, you’ll use it to reverse the possible changes you have made with the keydown event listener.
• focus event (rare), but instead the focus method!
• button.inert works and avoid a setAttribute.

#idea #project #vue: create a directive to handle keydown and blur event into one action that is reversible.

So now we can have a look at component patterns:

• toggletips
• tabs
• modals

A guide to primary navigation on the related HTML tags. About HTML, inert and tabindex are explained.

For CSS, an optimal focus indicator is explained. There are also :focus-within and :focus-visible.

Finally some patterns such as Accordion, Tooltips and skip links are explained.

A perfect extension to audit web pages about RGAA/WCAG 2.0

Why permanent accessibility plugins are problematic?

Here are some reasons.

OpenDyslexic, Arial et Times New Roman. Les résultats ne montrent aucune amélioration sur la vitesse ni sur la précision de lecture des élèves dyslexiques avec la police OpenDyslexic. Aucun d’entre eux n’a annoncé avoir pour préférence la police OpenDyslexic.

How to make this better with little css.
Inherit font-size, line-height, word-spacing, border and padding.

There are also

• Under-Engineered Select Menus
• Under-Engineered Custom Radio Buttons and Checkboxen

Depending on the vessel (ship):
Stern (back), port (left), bow (forward), starboard (right). These directions are based on the vessel "cap".

Depending on the skiers:
"skier's Left" is based on a skier facing down the mountain.

Depending on the reader:

• inline is how a sentence is read
• block is the perpendicular of inline
• start is where the flow... starts
• end is where the flow ... ends

I find it still hard to explain and I got it with examples. Read more on mdn

block/inline and start/end can be mixed up to target a specific location. From our Latin reader perspective, it applies as follows: https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/03/block-dir.png?w=720&ssl=1

It's user-centric because its language direction is respective. [...] We can embrace diversity, complexity, and unpredictability and rely on the browser engines to properly lay it out.

Why all of these? Because right, left, top, and bottom can be interpreted differently between the explainer's and the public points of view.

For accessible emojis:

1. Use them sparingly as the screen reader will read them all.
2. Use them at the end in order to keep the sentence consistent.
3. Keep words instead of emojis: the words convey a better meaning.
4. Avoid them in bullet lists
5. Avoid emojis to convey an information
6. Context can be misleading in the use of the emoji! It emphasizes points 3. and 5.

1. Users tend to use a list of all the links or headings on the page instead of the tab key! The user could then jump directly to the heading or link that sounded like what they were looking for.
2. Navigating to the homepage from an internal page: all of our interviewees searched for a link being announced as "Home"
3. To navigate to a certain page, users opened a list of all the links on a page. it was common to type the letter on the keyboard to search for the available links starting with the first letter of what they would expect the page name to start with. A "Get in touch!" link is likely to not be found
   • idea here: we need a standard about common pages! (Contact, Pricing, etc...)
4. None of the interviewees enlarged the window to take the full screen. This means some users will experience the mobile layout and behavior of the menu navigation, rather than the desktop version we intended. So a computer does not mean a desktop layout
5. None used skip links because they are less efficient than their other methods. Moreover, the skip link is sometime broken as the keyboard focus does not shift!

Generate a palette color based on one color, and shows the colors with a proper accessibility ratio (3:1 or 4.5:1).

Can work perfectly with https://www.opensourcecolorsystem.design/ where a meaning to a color is provided!

How to build common ui patterns that are accessible 👍

Create an accessible color palette based on criteria AA

A quick accessibility checklist for programmers