un jeu web accessible avec html 5, javascript et aria (blend web mix)
DESCRIPTION
Support de la présentation donnée avec Sylvie Duchateau au Blend Web Mix 2014TRANSCRIPT
Un jeu Web accessible avec HTML 5, JavaScript et ARIA
Victor Brito et Sylvie Duchateau
Blend Web Mix, Lyon, 30 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
Blend Web Mix, Lyon, 30 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
Blend Web Mix, Lyon, 30 octobre 2014
Ce dont il va être question
Blend Web Mix, Lyon, 30 octobre 2014
Ce dont il va être question
Blend Web Mix, Lyon, 30 octobre 2014
Ce dont il va être question
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
Blend Web Mix, Lyon, 30 octobre 2014
Les problèmes d’accessibilité
Blend Web Mix, Lyon, 30 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
Blend Web Mix, Lyon, 30 octobre 2014
DémoBingo !
Blend Web Mix, Lyon, 30 octobre 2014
Billes pour un jeu Web accessible
Blend Web Mix, Lyon, 30 octobre 2014
Billes pour un jeu Web accessible
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
Blend Web Mix, Lyon, 30 octobre 2014
Billes pour un jeu Web accessible
ARIA
Implémenter les landmarks ARIA pour identifier les différentes parties du document Web (role="banner", role="main", role="conteninfo"…)
Identifier correctement les alertes (role="alert")
Identifier correctement les live regions pour faire remonter les informations de mise à jour (aria-live)
Masquer les informations non destinées à être restituées aux lecteurs d’écran (aria-hidden="true")
Implémenter les design patterns ARIA
Blend Web Mix, Lyon, 30 octobre 2014
Billes pour un jeu Web accessible
Autres billes
Ne jamais véhiculer une information uniquement par la couleur, la forme ou la position
Limiter autant que possible les remontées de mises à jour
Blend Web Mix, Lyon, 30 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/
Blend Web Mix, Lyon, 30 octobre 2014
Merci !
Lien vers le support de présentationhttp://www.victor-brito.fr/slides/blendwebmix2014
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)