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 formulaire est validable lorsque l'utilisateur est dans le dernier champs du formulaire.

2 champs ne peuvent avoir un même label sauf si un fielfset permet de les distinguer (exemple d'utilisation nécessaire : adresse de livraison / facturation)

Les textes masqués/affichés en css uniquement doivent être appropriés. Une alerte ou un message d'erreur doit être affiché par un script et non masqués/affichés en css uniquement.

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

<label for="document"> Ajouter un document à votre dossier </label>
<input type="file" id="document" name="document" aria-invalid="true" aria-describedby="formats erreur" />
<p id="erreur">Format de fichier incorrect.</p> <p id="formats">Formats acceptés : pdf ou doc.</p>

Si les boutons radio sont simulés, ils doivent satisfaire aux mêmes contraintes d'usage que les boutons radio natifs en HTML

Le label contient la propriété for et l'input contient un id identique <code><label for="label1"> étiquette du champs</label><input id="lable1"></input></code>

Pour chaque paragraphe, l'attribut lang doit être renseignée; par exemple si un paragraphe est en allemand : lang="de". <code><p lang="de">Ich bevorzuge die Deutsch sprechen.</p></code>

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.

Le champs et l'aide à la saisie sont liés<label for="document"> Ajouter un document à votre dossier </label>
<input type="file" id="document" name="document" aria-describedby="formats" />
<p id="formats">Formats acceptés : pdf ou doc.</p>
Pour les champs texte qui permettent de saisir l'identité d'une personne, le champ "nom" a pour valeur de l'attribut autocomplete "family-name", le champ "prénom" la valeur "given-name", etc.

L'intitulé visible peut éventuellement être complété par un title. Il ne peut être remplacé

La distinction peut être faite avec la mention (obligatoire) écrit en toute lettre. La propriété "required" doit également être présente sur le champs <label for="numero-serie">Numéro de série *</label>
<input type="text" id="numero-serie" required>

Pour les formulaires à champs unique, il peut être rendu visible en dupliquant le label au niveau du placeholder.

Sauf si la session est limitée à plus de 20 heures

vérifier avec le validateur du W3C : https://validator.w3.org/

Au début de chaque page, la propriété lang doit être renseigné au niveau de la balise html, exemple si la page est en français: <code><html lang="fr" ></code>

Le code source de la page doit commencer avec l'élément : <CODE><!DOCTYPE html></CODE>

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.