Checklist Renow 4.3

L'utilisateur ne peut rester coincer dans une partie de la page: carte, iframe,… Des zones de navigation telles que des bordures doivent être aménagées autour de ces contenus.

Le contrôle doit être possible à la souris, au clavier ou au toucher.

Documents publiés après le 22/09/2018 ou nécessaire à une démarche.

L'arborescence ne contient pas d'acronyme ou d'abréviation.

L'allemand étant la langue apprise jusqu'au 2nd cycle (formation classique). Et le français la langue statistiquement la plus parlée au Luxembourg.

Il peut être complété par un title mais non remplacé. Un pictogramme doit faire appel à un intitulé suffisamment évident.
(un bouton loupe signifie de manière évidente "rechercher")

Lorsqu'on clique sur un lien: l'action d'appuyer se distingue de l'action de relachement, l'utilisateur peut changer d'avis après l'appui et avant le relâchement.

Moins de 5 caractères révèle un manque de signification du lien et une zone de clic difficile à atteindre. Plus de 80 caractères révèle un lien trop long en particulier pour les plages brailles et lecteurs d'écran

Pour l'accessibilité, une action utilisateur se présente avec une balise ou un role button.

L'ordre de parcours est cohérent: de gauche à droite et du haut vers le bas.

Les actualisations, les sliders et les alertes importantes font exceptions.

Apparence: une modale est une boite affichée en superposition de la page consultée en conservant le contexte. (par opposition aux pop up qui s'ouvrent dans une nouvelle fenetre ou onglet)
Si le processus utilisateur doit être interrompu, le background est inaccessible.
interet: La modale est nécessaire à la réalisation d'une tâche demandée par l'utilisateur dans son contexte (affichage d'une définition ou d'une aide, saisie de données spécifiques).
Le titre est visible et lié à un aria-label ou un aria-labelledby.
navigation clavier: Elle recoit le focus lors de son apparition et est manipulable au clavier.
Le role dialog est utilisé.
<code><div role="dialog" aria-labelledby="modal-title">
<h1 id="modal-title">[Titre de la fenetre modale]</h1>
[Contenu texte de la modale]
<button>Fermer</button>
</div> </code> https://www.w3.org/TR/wai-aria-practices/#dialog_modal, https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

La page contient: l'échantillon testé,
les critères non respectées avec la raison de l'inaccessibilité et leur alternative
la date de l'audit
un mail de contact pour relever un soucis d'accessibilité

Chemin de localisation est aussi appelé fils d'ariane ou breadcrumb

Les textes et titres dont le lien fait parti, doivent le rendre explicite.

Selon le cas:
- Les vidéos et/ ou sons pré-enregistrées ont des sous-titres et /ou audiodescription synchronisés.
- Si un média est une alternative au texte, il est légendé et clairement lié au texte.
- Pour un live, une légende doit préciser le contexte et l'interet de la vidéo: "(En direct) Conférence de ....".
La liaison peut se faire avec l'un des moyens suivants: <code>- <video src="..."> Détails et explications de la vidéo affichée.</video>
- <div src="vidéo" describedby=iddesc >... </div>
<p id="iddesc"> Détails et explications de la vidéo affichée.
</p>
- ou avec une balise figure:
<figure role="group" >
<video src="…" describedby=iddesc > </video>
<figcaption id=iddesc> Détails et explications de la vidéo affichée.
</figcaption>
</figure></code>

Page 404 et autres erreurs

Il est préférable de fournir un intitulé explicite à lui seul. Si ce n'est pas possible, les textes et titres dont il fait parti, doivent le rendre explicite.

Pour une balise img (canvas ou role=img ...) l'utilisation d'un aria-describedby="id", id faisant référence au paragraphe de la description.
<img src="…" alt="voir légende ci-après" aria-describedby=iddesc />
<p id="iddesc"> Détails et explications de l'image affichée.
</p>
ou avec une balise figure: <figure role="group">
<img src="…" alt="description courte" />
<figcaption>
Détails et explications de l'image affichée. (ou lien vers la description)
</figcaption>
</figure>
idem pour un svg avec un aria-label ou une balise <title> ou un paragraphe masqué (sauf au lecteur d'écran)

Le scroll est utilisé uniquement si une vue linéaire ne peut être utilisée. Les tableaux de données complexes et les graphiques sont des exceptions. Par contre, une image illustrative ne peut provoquer un scroll.