Screen reader Accessibility - Denis Boudreau

22 nov. 2016 - Digital Inclusion. Inclusive. Design. Accessibility. User. eXperience ... Évaluation fonctionnelle : scénarios d'utilisation. Trouver les coordonnées ...
NAN taille 12 téléchargements 475 vues
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