View
200
Download
3
Category
Preview:
DESCRIPTION
Support de l'atelier présenté avec Sylvie Duchateau à Paris Web 2014
Citation preview
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)
Recommended