Screen reader Accessibility Introduction to desktop & mobile screen reader accessibility
a11yMTL Meetup Group Shopify Montreal November 22nd, 2016
Panorama of testing tools Guilty parties
Vincent François
Tetsuro takara
Denis Boudreau
Expert en accessibilité du Web. Web accessibility expert. Pour les aspects personnels ou politiques : @VinFrancois
BASS/BURGERS/BAHDS. Front-end developin' at @Shopify. Gogo @MapleLeafs
Pragmatism. Empathy. Digital Inclusion. Inclusive Design. Accessibility. User eXperience.
@a11yMTL
Desktop and mobile screen reader accessibility
14
Follow along!
http://bit.ly/a11ymtl-2016-11 @a11yMTL
Desktop and mobile screen reader accessibility
15
Vincent François @a11yMTL
Desktop and mobile screen reader accessibility
16
Évaluer l'accessibilité avec NVDA Vincent François Consultation boréale
Vincent François Expert certifié en accessibilité du Web (2005) Co-fondateur et ex-dirigeant de la Coopérative AccessibilitéWeb (2006-15) Expert invité W3C Evaluation Methodology Taskforce (2011-12) Ingénieur diplômé d’État (France, 1990) Médaille de l’Assemblée nationale du Québec (2014)
18
Introduction Le lecteur d'écran NVDA Non-Visual Desktop Access Appelé aussi revue d'écran Libre et gratuit Souvent mis à jour Transmet l'information par synthèse vocale ou en Braille Synthétiseur intégré, plus de 20 langues Évaluation ou utilisation courante?
19
Introduction Quand utiliser NDVA ? En développement, continument Aux différentes étapes de contrôle d'accessibilité Au contrôle final Avec des listes de contrôle Plutôt avec Firefox
20
Stratégie d'évaluation Appui de l'évaluation formelle Vérifier la bonne compréhension d'un élément interactif Vérifier l'ordre logique de lecture Vérifier l'ordre logique de parcours des liens ...
21
Stratégie d'évaluation Évaluation fonctionnelle : scénarios d'utilisation Trouver les coordonnées de l'entreprise Trouver le numéro de téléphone de M. Z Trouver et commander le produit X Trouver et accéder à la page Accessibilité Trouver et accéder au plan du site Compléter le remplissage d'un formulaire Envoyer un courriel à Mme W … 22
Stratégie d'évaluation Mise en garde L'écoute d'un lecteur d'écran demande un peu d'expérience et beaucoup de concentration. Pas facile
« Comment ? » 23
Utiliser NVDA Tampon virtuel NVDA collecte vers un tampon virtuel les informations contenues dans la page. Lire la page = lire le contenu du tampon virtuel
24
Utiliser NVDA Modes Web Mode navigation : texte, lecture linéaire Mode formulaire : remplir un formulaire Changer de mode : NVDA + Espace Son métallique : mode formulaire
25
Utiliser NVDA Commandes de base (1/2) Commande
Bureau
Portable
Détail
Arrêt parole
Ctrl
Ctrl
Arrêt instantané
Pause
Maj
Maj
Pause/reprise
Quitter NVDA
NVDA + Q
NVDA + Q
Dire tout
NVDA + Flèche bas
NVDA + A
Lecture depuis la position du curseur système
Lire la ligne suivante
NVDA + Flèche bas
NVDA + Flèche bas
Ligne du tampon
Lire la ligne précédente
NVDA + Flèche haut NVDA + Flèche haut
Ligne du tampon
26
Utiliser NVDA Tableau Commande
Bureau/Portable
Détail
Colonne précédente
Ctrl + Alt + Flèche gauche
Même ligne
Colonne suivante
Ctrl + Alt + Flèche droite
Même ligne
Ligne précédente
Ctrl + Alt + Flèche haut
Même colonne
Ligne suivante
Ctrl + Alt + Flèche bas
Même colonne
27
Utiliser NVDA Aide Commande
Bureau/Portable
Détail
Aide clavier
NVDA + 1
Activer ou désactiver
Changer de mode
NVDA + Espace ou Espace
Navigation/Formulaire
Quitter le mode formulaire
Échap.
Si vous passez manuellement en mode formulaire par cette commande, NVDA restera en mode formulaire jusqu'à ce que vous retourniez manuellement en mode navigation.
28
Utiliser NVDA Aide Commande
Bureau/Portable
Détail
Réactualiser
NVDA + F5
Recharger le tampon virtuel
Rechercher
NVDA + Ctrl + F
Dans le document courant
Rechercher l'occurrence suivante
NVDA + F3
Rechercher l'occurrence suivante
NVDA + Maj + F3
Ponctuation
NVDA + P
Changer le niveau de détail des symboles et ponctuation
29
Utiliser NVDA Navigation rapide Par élément de même type Touche : Aller à l'élément suivant Maj + touche : Aller à l'élément précédent
30
Utiliser NVDA
31
Utiliser NVDA Listes d'éléments Commande
Bureau/Portable
Détail
Liste d'éléments
NVDA + F7
Affiche une liste d'éléments (liens, titres et régions ARIA) de la page
32
Utiliser NVDA Listes d'éléments : Liens Alt + n : listes des liens Un moyen de sortir de la page
33
Utiliser NVDA Listes d'éléments : Titres Alt + t : liste des titres Une table des matières instantanée
34
Utiliser NVDA Listes d'éléments : Régions ARIA Alt + é : liste des régions ARIA Une vue d'ensemble
35
Utiliser NVDA Mode formulaire Lecture au focus. Les touches tapées vont vers le contrôle qui a le focus. Déplacement avec des raccourcis clavier normaux : Tab et Maj + Tab, Alt pour aller au menu, Flèches pour naviguer dans les menus.
36
Références NVDA Site NVDA francophone : http://nvda-fr.org/ Résumé des commandes : http://nvdafr.org/dl/keyCommands.html
37
Crédits Merci de votre attention Vincent François Expert senior en accessibilité
[email protected] http://consultation-boreale.com @vincent45nord
38
Tetsuro Takara @a11yMTL
Desktop and mobile screen reader accessibility
39
Intro to VoiceOver @t3tchi
How I got into a11y •
Mobile data table project
•
Used hacky solutions at first to get it to work
•
Called out about unaccessibleness
•
Thus began journey into a11y testing and VoiceOver
•
http://tiny.cc/a11y-tables
What is VoiceOver? •
macOS' built-in screen reader
•
Works best with Safari
•
Also available on iOS
Usage •
WebAIM 2015 survey - 30.9% of respondents used VO. •
http://webaim.or g/projects/scree nreadersurvey6
Getting Started •
On OSX, simply hit cmd + f5 to start VO
•
VO + left or right to move around content
•
VO + shift + down to drill into content (ex: lists)
•
VO + u to open up the...
Rotor!!
Rotor •
Headings
•
Form Controls
•
Links
•
Landmarks
•
Tables
Web Spot & Window Spot •
Lets you bookmark parts of an app or website
•
VO + cmd + shift + } - create a web spot
•
VO + cmd + shift + { - create a web spot
Demo (Good example)
www.simplyaccessible.com
Demo (Bad example)
www.meundies.com
Tips while testing •
Test constantly
•
Watch out for CSS effect on VoiceOver
•
Just stick to semantic markup
•
Make sure keyboard shortcuts still work
Resources
•
HIKE: http://accessibility.parseapp.com/
Thanks!
@t3tchi
Denis Boudreau @a11yMTL
Desktop and mobile screen reader accessibility
53
Before we get started Typical focus on
screen reader testing
Typical focus on
other types of testing
A little something to keep in mind Typical focus on
screen reader testing
246 000 000 people have low vision
39 000 000 people are blind
26,670
The average daily count of NVDA users around the world.
Reference http://community.nvda-project.org/usersByCountry.html
Recommended combinations Focusing on the right combinations Desktop • • • • •
NVDA / Firefox (Win) NVDA / Chrome (Win) Jaws / Internet Explorer (Win) VoiceOver / Safari (Mac) Narrator / Edge (Win)
@a11yMTL
Mobile • • •
VoiceOver / Safari (iOS) Talkback / Firefox (Android) Talkback / Chrome (Android)
Desktop and mobile screen reader accessibility
57
Deque quick reference guides Cheat sheets to get you started Desktop • • • • •
Mobile
• NVDA for Windows • Jaws for Windows Narrator for Windows VoiceOVer for MacOS Window-Eyes for Windows
Reference http://bit.ly/2fO7Fkq
VoiceOver for iOS Talkback for Android
quick reference VoiceOver for iOS Learning Voiceover for iOS The basics • • • •
Turning VoiceOver on/off Using the Rotor Navigation fundamentals Swiping gestures
Reference http://bit.ly/2fO7Fkq
Mastering VoiceOver basics Learning Voiceover for iOS
Questions & comments
Keep in touch!
Vincent François @consBoreale
Tetsuro Takara @ t3tchi
Denis Boudreau @dboudreau
Merci beaucoup! Because browsing with just a mouse is so over-rated.
facebook.com/groups/a11yMTL @a11yMTL
twitter.com/a11yMTL Desktop and mobile screen reader accessibility
62
@a11yMTL
Desktop and mobile screen reader accessibility
63
http://a11yMTL.org/ @a11yMTL
Desktop and mobile screen reader accessibility
64