L’accessibilité est souvent le grand absent des projets web, nous allons voir dans ce billet qu’il est possible de conjuguer rapidité, fonctionnalité et conformité dans vos modules web.

Les référentiels

En France nous avons le RGAA (Référentiel Général d’Accessibilité pour les Administrations) qui est actuellement en bêta 3 :

https://references.modernisation.gouv.fr/rgaa-3-0-beta

A l’étranger nous retrouvons W3C (World Wide Web Consortium) et notamment le WCAG (Web Content Accessibility Guidelines) et le WAI ARIA Practices :

http://www.w3.org/Translations/WCAG20-fr/

http://www.w3.org/TR/wai-aria-practices/

Un lecteur vidéo html5 accessible

Nous avons utilisé récemment le lecteur développé par Access42 dans le cadre d’une plateforme pour France Télévisions :

https://github.com/access42/MFPvideoPlayer

Ce player cumule tous les critères qui font de lui un outil accessible :

  • Une navigation au clavier bien pensée
  • La possibilité de placer des sous-titres avec choix de la langue, du fond des sous-titres, de la couleur, la taille, l’opacité.
  • Les transcriptions vidéo.
  • L’audio-description

Pour l’installer vous aurez besoin de Mootools. Le player utilise également videojs ( https://github.com/videojs/video.js/ ).

Le menu accordéon

Il existe déjà pléthores de scripts qui permettent de naviguer à la tabulation dans un menu accordéon.

Cependant ils ne respectent pas forcément ce point de règle (décrit sur http://www.w3.org/TR/wai-aria-practices/#accordion ) :

Tab – When focus is on an accordion header, pressing the Tab key moves focus in the following manner:

  1. If interactive glyphs or menus are present in the accordion header, focus moves to each in order.
  2. When the corresponding panel is expanded (its aria-expanded state is ‘true’), then focus moves to the first focusable element in the panel.
  3. If the panel is collapsed (its aria-expanded state is ‘false’ or missing), OR, when the last interactive element of a panel is reached, the next Tab key press moves focus as follows:
    • If a subsequent accordion panel is already expanded, focus moves to the first focusable element in this subsequent panel.
    • If no subsequent accordion panel is expanded, focus moves to the first focusable element outside the accordion component.

Le point à noter est que si l’internaute est en focus sur l’accordéon, que le dernier élément focusable a été parcouru (les menus non dépliés ne comptent pas !) nous passons à la suite de la page. Or beaucoup de scripts proposent de tabuler sur les X éléments de l’accordéon sans tenir compte qu’ils soient ouverts ou non.

C’est important ! Imaginez-vous une personne qui navigue au clavier se retrouvant à devoir faire x tabulations sur x éléments pour aller à la suite de la page, pas pratique !

Un accordéon totalement accessible est disponible ici :

http://oaa-accessibility.org/example/35/

Je vous présenterai dans un prochain billet une modale et un champ d’autocomplétion accessibles. A bientôt !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec un *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>