1. C'est quoi l'Accessibilité web ?
2. L'Accessibilité sur Drupal
3. Les bonnes pratiques
4. Outils D'audite pour Accessibilité

L'accessibilité web c'est un ensemble des bonnes pratiques , pour les développeurs et designers à mettre en place dans le but de crée des sites web de haute qualité , et sans exclut les personnes âgées ou ayant des capacités diminuées à utiliser , comprendre , naviguer et interagir avec le web.

Les développeurs du core Drupal ont mise des très grand effort a fin d'intégrer l'accessibilité dans leurs ecosysteme , introduisant l'internationalisation ,Forms API, jQuery UI ainsi incluant les bonnes pratiques ARIA sur le theme par defaut Batrik qui parfaitement respect les bonnes pratiques d'accessibilité .

Le defi, c'est les modules de contribution ne respectent pas les règles d'accessibilité , le markup générer et la gestion d'erreur dans les modules ne sont pas accessible casiment .

• Utiliser * hook_form_alter * pour ajouter les tages aria aux éléments des formulaires.

• Changer ou supprimer le message des liens "read more" sur les teasers des nodes á l'aide de hook_link_alter .

• Ajouter les attributs aria aux blocs grace au module Block ARIA Landmark Roles.

• Fournir aux utilisateurs un outil qui leurs permettre de changer la taille de texte , á l'aide de module Text Resize.

• Utiliser Drupal.announce() pour notifier les utilisateurs avec les "Lecteur d'Ecrans" les changements fait sur la page en AJAX ou JS .

• Éviter le Caputcha le plus possible .

• Ajouter un alt texte pour les images avec un texte qui décrit l'image .

• Améliorer l'affichage des messages d'erreurs , par exemple:

[X]Le champs Nom est incorrecte

[✓]Le champs Nom doit contenir que des lettres uniquement

pour les développeurs front-end :

• Associer un label avec tout éléments de form (input,select, textarea ..).

ex:

<label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>

• Identifier la langue de la page , spécifiquement pour les sites multilangue.

• Mettre en places les attributs aria- sur non-standard éléments, ( Slider , caroussel , list block). Ex :

   role="menuItem"
   aria-checked="true" (pour les formulaires)
   aria-disabled="false" (pour les formulaires)
   aria-expanded="true" (ex : toggle menu)
   aria-labelledby="label" (pour les formulaires)
   aria-describedby="idDedescirption" (tout les elements)
   aria-required="true " (pour les formulaires)
   aria-hidden="true" (tout les elements)
   aria-current="page" (lien de navigation)
   aria-pressed="true" (button pressed)
  

• Assurer que tout les éléments interactive sont accessible par clavier.

     [✓]	La touche ESC doit quitter le model ou popup.
    	
     [✓]	La touche Tabulation doit changer dans un Ordre cohérent le focus entre les liens et éléments interactive JS.
    	
     [✓]	Le model de Datepicket doit également permettre a l'utilisateur de saisi la date manuellement.
    	
     [✓]	Tout les interaction JS (Ajax) doit etre lu par les lecteurs d'ecran.
    	
     [✓]	éviter le max possible les évènements  suivantes: ondblclick,onmousedown,onmouseup,onfocus,onblur tant qu'ils n'ont  accessible par clavier ou lecteur d'ecran .
  

• L'augmentation de la taille de texte ne doit pas impacter les autres éléments .

• Fournir aux utilisateurs la possiblité de "Skip content" , passer d'un block vers un autre (Header ,navigation , footer , newsletter ..).

• Éviter le plus possible l'utilisation de display: none en dure, et remplacer la par aria-hidden : Ex :

<div class="text">
    <label id="tp1-label" for="first">First Name:</label>
    <input type="text" id="first" name="first" size="20"
           aria-labelledby="tp1-label"
           aria-describedby="tp1"
           aria-required="false" />
    <div id="tp1" class="tooltip"
         role="tooltip"
         aria-hidden="true">Your first name is optional</div>
</div>

 Et en css : ( n'est pas supporter sur IE9)

div[aria-hidden="true"] {display:none;}
div[aria-hidden="false"] {display:block;}

A11y.css : L’objectif de ce fichier CSS est notifier l’intégrateur sur les erreurs et risques potentiels dans le code .

A11y Checker : une bibliothéque javascript qui aide a détecter la none-conformité aux regles de WCAG.

Gulp Accessibility : une extension gulp qui permet de signaler les éléments qui respect pas les norme d'accissibilité .