Un jeu Web accessible avec HTML 5, JavaScript et ARIA

Victor Brito et Sylvie Duchateau

Paris Web, 18 octobre 2014

Qui sommes-nous ?

Sylvie DuchateauExperte en accessibilité numériqueA coordonné la traduction en français des WCAG 2.0Participe au groupe de travail Education and Outreach au sein du W3CAssociée d’Access42 www.access42.netTwitter : @sylduch

Paris Web, 18 octobre 2014

Qui sommes-nous ?

Victor BritoIntégrateur HTML / CSS (ou développeur guichet) freelanceExpert Accessiweb en évaluationIntervient sur la relecture des référentiels AccessiwebSe cache derrière Tuyaux de l’accessibilité tuyauxa11y.infoPortfolio : victor-brito.frTwitter : @victorbritopro

Paris Web, 18 octobre 2014

Ce dont il va être question dans cet atelier

Paris Web, 18 octobre 2014

Ce dont il va être question dans cet atelier

Paris Web, 18 octobre 2014

Ce dont il va être question dans cet atelier

Les éventuels problèmes d’accessibilité dans un jeu Web

Démonstration de l’utilisation d’un jeu Web avec des morceaux d’accessibilité dedans (jeu fictif, mais applicable à des situations réelles) par un utilisateur de lecteur d’écran

Les billes pour un jeu Web accessible

Paris Web, 18 octobre 2014

Les problèmes d’accessibilité

Paris Web, 18 octobre 2014

Les problèmes d’accessibilité

Choix technologiques

Interactions basées uniquement sur la souris

Informations véhiculées uniquement par la couleur, la forme ou la position

Informations sur le rafraîchissement

Informations sur les mises à jour du contenu

Paris Web, 18 octobre 2014

DémoBingo !

Paris Web, 18 octobre 2014

JavaScript

Paris Web, 18 octobre 2014

JavaScript

Il est possible de faire de l’accessibilité sans alternative systématique au JavaScript

S’assurer que le code HTML généré par JavaScript est accessible

S’assurer que les événements JavaScript déclenchés puissent l’être au moins par la souris et le clavier

Paris Web, 18 octobre 2014

ARIA

Paris Web, 18 octobre 2014

ARIA

Quelques rôles

role="banner" (landmark)

Identifie l’en-tête principal du document Web

Doit être unique dans le document

Paris Web, 18 octobre 2014

ARIA

Quelques rôles

role="main" (landmark)

Identifie le contenu principal du document Web

Doit être unique dans le document

Paris Web, 18 octobre 2014

ARIA

Quelques rôles

role="complementary" (landmark)

Identifie la section du document Web complémentaire au contenu principal

Paris Web, 18 octobre 2014

ARIA

Quelques rôles

role="contentinfo" (landmark)

Identifie la région comportant les informations sur le document Web (généralement, le pied de page)

Doit être unique dans le document

Paris Web, 18 octobre 2014

ARIA

Quelques rôles

role="dialog" (widget)

Identifie une fenêtre de dialogue

Utilisable dans une application (role="application"), non dans un document

Accompagné de préférence par une étiquette étiquetant cette fenêtre de dialogue

Peut être accompagné par aria-label ou aria-labelledby en l’absence d’autre mécanisme

S’assurer de la présence d’un élément descendant pouvant recevoir le focus au clavier

Paris Web, 18 octobre 2014

ARIA

Quelques rôles

role="alertdialog" (widget)

Identifie une fenêtre de dialogue comportant un message d’alerte

Présentable de préférence sous forme de fenêtre modale

Accompagné de préférence par aria-describedby, dont la valeur est l’id du message d’alerte

Paris Web, 18 octobre 2014

ARIA

Quelques rôles

role="alert" (widget)

Identifie une alerte

Valeurs implicites : aria-live="assertive" et aria-atomic="true"

Paris Web, 18 octobre 2014

ARIA

Quelques propriétés et états globaux

aria-label (propriété)

Définit la valeur de l’étiquette de l’élément courant

Valeur possible : une chaîne de caractères

Paris Web, 18 octobre 2014

ARIA

Quelques propriétés et états globaux

aria-labelledby (propriété)

Identifie l’élément (ou les éléments) étiquetant l’élément courant

Valeur possible : un ou plusieurs id

Paris Web, 18 octobre 2014

ARIA

Quelques propriétés et états globaux

aria-describedby (propriété)

Identifie l’élément (ou les éléments) comportant des informations complémentaires décrivant l’élément courant

Valeur possible : un ou plusieurs id

Paris Web, 18 octobre 2014

ARIA

Quelques propriétés et états globaux

aria-hidden (état)

Pour indiquer si l’élément et ses descendants doivent être ou non masqués aux lecteurs d’écran

Valeurs possibles : true, false

Valeur par défaut : false

Paris Web, 18 octobre 2014

ARIA

Live regions

aria-live (propriété)

Zone mise à jour dynamiquement (via Ajax, par exemple)

Valeurs possibles : off, polite, assertive

Valeur par défaut : off

Paris Web, 18 octobre 2014

ARIA

Live regions

aria-relevant (propriété)

Type de mise à jour à restituer

Valeurs possibles : additions, removals, text, all

all = additions removals text

Valeur par défaut : additions text

Paris Web, 18 octobre 2014

ARIA

Live regions

aria-atomic (propriété)

Pour restituer toute la région mise à jour ou une partie seulement

Valeurs possibles : true, false

Valeur par défaut : false

Paris Web, 18 octobre 2014

Autres points

Paris Web, 18 octobre 2014

Autres points

Ne jamais véhiculer une information uniquement par la couleur, la forme ou la position

Ne pas oublier d’implémenter les design patterns ARIA

Limiter autant que possible les remontées de mises à jour

Paris Web, 18 octobre 2014

Pour aller plus loin

Spécification ARIA 1.0 du W3C http://www.w3.org/TR/wai-aria/

ARIA in HTML http://www.w3.org/TR/aria-in-html/ (bien lire la section Recommendations Table http://www.w3.org/TR/aria-in-html/#recommendations-table !)

Support des attributs ARIA par les lecteurs d’écran http://blog.atalan.fr/support-des-attributs-aria-par-les-lecteurs-decran/

Paris Web, 18 octobre 2014

Merci !

Lien vers le support de présentationhttp://www.victor-brito.fr/slides/parisweb2014

Lien vers le dépôt Github de la démohttps://github.com/victorbritopro/bingo-accessible

CréditsAccess42https://www.flickr.com/photos/68720132@N05/8364165786/ (Morgane Hervé, CC BY-NC-SA)https://www.flickr.com/photos/68720132@N05/14221296235/ (Morgane Hervé, CC BY-NC-SA)http://commons.wikimedia.org/wiki/File:Blaise_pascal.jpg (domaine public)http://commons.wikimedia.org/wiki/File:France_500_francs_1987-a.jpg (domaine public)