====== Thématiques ======

===== Elements obligatoires =====

==== Les balises ====
 
Elles ne doivent pas être détournées de l'usage prévu :
 
=== br ===

Ne doit pas être utilisé pour faire du formatage mais pour indiquer que l'on passe à autre chose (saut de ligne va être lu par les synthèses vocales)

=== p ===

Un paragraphe ne doit pas être entre des balises div mais entre <p></p>.

===== Structuration de l'information =====

==== Titre ====

  * Au moins une balise de <h1>
  * Les titres doivent être représentatifs du contenu
  * On ne passe pas de <h2> à <h4>

On peut utiliser :
<code html><p role="heading" aria-level="1226"></code>

Cela permet aux lecteurs d'écrans de bien voir que ce sont des titres, et cela ne perturbe pas le référencement. 

Les éléments sectionnant de html5 (<header>, <article>, <footer>) ne sont pas encore lus par tous les lecteurs d'écran. Il faut avoir h1, h2... Il existe une extension firefox "headings map" qui permet de vérifier la structure d'un document.

==== Listes / menu ====

Il ne faut pas abuser du "dl", c'est très verbeux. 

Les menus de navigation doivent utiliser ul, li... 

A la fin de chaque élément de liste, la synthèse vocale marque une pause avant de passer au suivant. 

==== Citation ====

Elles doivent être dans des balises <q> quand c'est court ou <blockquote>.

C'est compliqué à mettre en place pour des sites de presse.


===== Utiliser les nouveaux éléments html5 =====

C'est utile pour les utilisateurs ayant des problèmes de mobilité, qui peuvent avoir des raccourcis clavier. 

<code html>
<header>
Le titre
</header>
<nav>
Pour tout ce qui est navigation
</nav>
<main>
Il ne peut y en avoir qu'une seule
</main>

<footer>
Pied de page
</footer>
</code>


===== Présentation =====

  - Utiliser exclusivement CSS
  - Doubler les images en propriété de fond css (background) par un texte masqué au moins (par exemple avec des directives de positionnement absolu -10000)
  - Vérifier l'ordre des contenus en désactivant css

===== Navigation =====

  - S'assurer de la visibilité des liens (pas de <i>outline none</i>) 
  - Prévoir deux systèmes de navigation (minimum) : moteur de recherche (mais avec toutes les pages, pas QUE les catalogues), menu, plan du site (souvent généré automatiquement : pages de test, 404, etc...).
  - Liens d'accès rapide au contenu principal (voir site [[http://www.meteofrance.fr/|meteoFrance]]) pour les personnes avec problème de mobilité, ou avec Headstick)
  - Vérifier qu'il n'existe pas de piège au clavier (par exemple avec du javascript)
  - Utiliser les rôles Aria (banner, navigation, main, contentinfo, search)

===== Consultation =====

Thématique un peu fourre-tout.

  - C'est l'utilisateur et non la pub qui contrôle le rafraîchissement de contenu.
  - Les liens "target=blank" doivent prévenir que cela s'ouvrira dans une nouvelle fenêtre, par exemple avec l'attribut "Title". 
  - Ne pas ouvrir de nouvelle fenêtre au chargement de la page (onload)
  - Indiquer à l'utilisateur le format (pour savoir quel logiciel va s'ouvrir), la langue et la taille du fichier (sauf quand le fichier est généré automatiquement). 
  - Conserver vos utilisateurs en vie. Les contenus en mouvement ou clignotant doivent être contrôlables. 

===== Images =====

  - Présence obligatoire de l'attribut "alt" (à la louche, pas plus de "80 caractères", sinon dans l'attribut [[http://www.w3schools.com/tags/att_img_longdesc.asp|longdesc]]).
  - Ne répétez pas le mot "image" dans le commentaire... Le lecteur d'écran le restitue.
  - 80% des images présentes sur le web sont de la décoration et ne méritent pas de "alt"
  - Pas d'alternative au CAPTCHA, mais indiquer que c'en est un "Indiquez le contenu de l'image", et proposer un captcha sonore (mais les robots peuvent le reconnaître), ou un email avec token.
  - Privilégier le texte stylé à l'image.

<code html>
<svg height="100px" wisth="100px" role="img" aria-label="carre">
<title>Carré</title>
<desc>Carré vert</desc>
 <rect fill="green" height="100px" width="100px"/>
</svg>
</code>

===== Couleurs =====

On peut utiliser un [[http://contrast-finder.tanaguru.com/?lang=fr|outil pour mesurer le contrast]], mais il arrive que des constrasts qui apparaissent prochent à l'utilisateur.

Mettre en place un "style switcher" sur le site... Il y en a dans jquery. 

===== Liens =====

  - Il faut mettre des alternatives aux liens-images. 
  - Si on met du title, il faut apporter une information supplémentaire.
  - Pour les liens identiques (intitulé + contexte) doivent mener vers une destination identique. 

Par exemple, sur le site du LIMSI 
<code html>
<a href="https://www.limsi.fr/fr/actualites/447-seminaire-de-mecanique-d-orsay" title="Séminaires de mécanique d'Orsay">
En savoir plus
</a>
</code>

===== Formulaire =====

Utiliser les attributs : 
  * aria-label
  * aria-labelledby
  * required 

[[http://accessible.sondages.pro|site de test pour Limesurvey]]

Un bouton pertinent ne s'appelle pas "OK" mais "Envoyer la réponse au questionnaire". On peut mettre un "title" ou "aria-label".

Les listes d'options doivent être regroupées dans des [[http://www.w3schools.com/tags/tag_optgroup.asp|optgroup]]. 

Lorsqu'il y a une erreur de saisie, la page doit avoir "Erreur" comme "title", comme dans la fenêtre modale issue de javascript par exemple.

===== Tableaux =====

Indiquer un role "presentation" si ce n'est pas un tableau de contenu. 

Un tableau de contenu est complexe quand il y a plusieurs entêtes dans une colonne (sous-total par exemple).

<code html>
<table summary="Budget 2016">
<caption>Budget prévisionnel</caption>
</code>

===== Vidéo =====

Si on veut intégrer une vidéo, [[http://ableplayer.github.io/ableplayer/|ableplayer]] est accessible (pour des sites).  Ne jamais imposer du son sur une page web... 

Il faut titrer les boutons "play", "pause" dans les players vidéo.