13 décembre 2006 : Convention relative aux droits des personnes handicapées de l’ONU
Signé par tous les États membres dons la France (le 18 février 2010)
Incapacité physique, mentales, intellectuelle ou sensoriel
C'est le manque d'adaptation qui crée la situation de handicap
Différents types de handicaps physique et sensoriel
Visuel (contraste, tache, vision)
Cognitif (décodage, DYS)
Physique
Polyhandicap : multiple handicap
En accessibilité on ne cible pas par type de handicap (car il y en trop), mais par besoin
L'universalité inclut l'accessibilité.
Le W3C ce veut Universalité : matériel, logiciel, infra, langue, culture, localisation et aptitudes physique ou mentale
Accessibilité c'est différent du référencement et de la performance, c'est même parfois contre-productif
Les personnes en situation de handicap n'ont pas de possibilité de résoudre leur problème À ne pas confondre avec le handicap situationnel qui peut être résolu sans aide, par exemple si on est dans un milieu trop ensoleillé ou dans un véhicule qui bouge
Pourquoi faire de l'accessibilité
Le numérique, c'est une promesse d'inclusion
Faire des choses qui n'étaient pas faisables en autonomie
Parfois la seule méthode pour communiquer
Parler des personnes en situation de handicap
Respect de leur droit
Ne pas parler de «ça sert à tout le monde», car ils vont penser que c'est de l'amélioration alors que l'accessibilité entraine des contraintes
Exemple de besoin
Navigation clavier (par forcement clavier dalleur, ça peut être des boutons au niveau de la tete)
Uniquement a la souris : dispositif qui déplace le curseur (eyes tracking pa exemple
Description élément visuel (aveugle, mal voyante)
Description audio (sourd, malentendant)
Naviguer à son rythme, maitrise son environnement (trouble psychique)
Personnalise l'affichage (couleur, taille police, police etc.
Perte acuité visuel, audition, mental
Appréhension technologique, peur de casser, faire mal
Technologie d'assistance, quel exemple : Plage braille, clavier mono manuel, headstick, eye-tracking, clavier visuel, lecteur écran, contacteur au souffle, trackball, contrôle par la pensée (à l'état de recherche) etc
Norme et référentiel
Norme
UAAG pour les agents utilisateurs (navigateur, lecteur d'écran) : affichage par le navigateur de l’info-bulle d’un lien à la souris et au clavier.
ATAG pour les outils d’édition de contenus (CMS) : alternatives aux boutons de mise en forme, production de contenus conformes.
WCAG pour les contenus web : alternatives aux éléments graphiques.
L’API ARIA pour les composants riches.
Version du WCAG :
Avant la 2.1, pour les non voyant essentiellement
version 2.1 : basse vision, troubles cognitifs, difficultés d’apprentissage et DYS
version 2.2 : prévue pour début 2023
Trois niveaux d'accessibilité WCAG
A : Accès à l’information et d’une utilisabilité de base : 80% des critères.
AA : Améliorations et la prise en charge de contextes particuliers (les couleur par exemple)
AAA : Ne peut pas s'appliquer à tous les types de contenus et de situations
En France, le niveau légal requis est le double A (AA) : pour être conforme il faut que tous les critères A et AA applicable du référentiel, soient conformes.
Il n’est pas recommandé de faire de la conformité au niveau AAA une politique générale pour des sites entiers parce qu’il n’est pas possible de satisfaire tous les critères de succès de niveau AAA pour certains contenus.
En France on a créé un révérenciel; donner une méthode opérationnelle pour vérifier que les WCAG sont bien respectées sans avoir à tout lire (rédaction indépendantes des technologies et souvent abstraites)
« On entend par “aménagement raisonnable” les modifications et ajustements nécessaires et appropriés n’imposant pas de charge disproportionnée ou indue apportés, en fonction des besoins dans une situation donnée, pour assurer aux personnes handicapées la jouissance ou l’exercice, sur la base de l’égalité avec les autres, de tous les droits de l’homme et de toutes les libertés fondamentales. »
Article 2 de la CRDPH.
En d'autre termes, en cas de dérogation sur un cas particulier, il faudrait fournir tous de même une alternative
Sauf si cette alternative représente elle aussi une charge disproportionnée
Alors il faut pouvoir permettre à l'utilisateur de faire un signalement et de lui répondre dans un délai raisonnable
Refus d'aménagement raisonnable est puni par l'article 225-2 du Code pénal
La loi prévoit entre 3 et 5 ans d'emprisonnement et entre 45 000 et 75 000 euros d'amende.
Commme aria-label et aria-labelledby ne sont exploités que par les lecteurs d’écrans.
La meilleure solution est de proposer une alternative (modal, nouvelle page ou afficher/masquer)
Mettre un alt trés général puis le bouton «lire la description détaillée de l'infographie» par exemple
<img src="img.png" alt="infographie" />
<a href="description.html">Description détaillée de l'infographie</a>
<img src="img.png" alt="infographie" />
<button aria-expanded="false">Description détaillée de l'infographie</button>
Image captcha
L’alternative de l’image doit permettre d’identifier la nature de l’image
<img src="" alt="Code de confirmation à saisir"/>
Proposer une alternative
Captcha sonore; pas idéal, le son peut être dangereux pour certaines typologies
Captcha de logique; pas conseiller car problématique pour certaines typologies
Envoi du code par email/SMS; Recommander si possible car plus lourd techniquement
Le captcha de google est conforme !
Texte en image
Interdit sauf pour les logos
ou proposer un mécanisme de remplacement :
Déclencher par l'utilisateur via une option accessibilité
via un plugin
Images légendées
Légende : texte adjacent à une image
Si un alt est renseigné, il faudrat reporter son contenu dans le aria-label et dans la figcaption
<figure role="group|figure" aria-label="alt-image Légende de l’image">
<img src="…" alt="alt-image" />
<figcaption>
alt-image Légende de l’image
</figcaption>
</figure>
<figure role="group|figure" aria-label="Légende de l’image">
<img src="…" alt="" />
<figcaption>
Légende de l’image
</figcaption>
</figure>
Si un lien est présent dans le figcaption, reporté unique son intitulé dans le aria-label
Même si leur utilisation pour faire de la mise en forme n'est pas interdite cela n'est pas conseillée
Si c'est tout de même utilisé pour faire de la mise en en forme, il ne faut pas utiliser des balises ou d’attributs de tableaux de données : <th><thead><tfoot><caption>scopeheaderscolgroupaxisrole="columnheader"role="rowheader"
role="presentation" sur la balise table
Cette propriété supprime la sémantique du tableau, penser à redonner de la structure aux textes (titres, paragraphes, listes ...) dans ces cas.
Si la propriété summary="" est présente (HTML4), videz la !
Déclaration des entêtes<th scope="[col|row]">
Permets d'indiquer la direction de la cellule d'entête
Le scope est obligatoire si plusieurs entré
<table>
<caption>Parc et fréquentation des autres hébergements collectifs touristiques en 2018</caption>
<tr>
<th scope="col">Type d’hébergement professionnel</th>
<th scope="col">Nombre d’établissements</th>
[...]
</tr>
<tr>
<td>Résidences de tourisme</td>
<td>2 426</td>
[...]
</tr>
</table>
Équivalents ARIA
Tableau : role="table"
Titre : aria-label="Nom du tableau" ou aria-labelledby="id_titre"
Entêtes de colonne : role="columnheader"
Entêtes de rangée : role="rowheader"
Cellules : role="cell"
<p id="titre">Parc et fréquentation des autres hébergements collectifs touristiques en 2018</p>
<div role="table" aria-labelledby="titre">
<div role="row">
<div role="columnheader">Type d’hébergement professionnel</div>
<div role="columnheader">Nombre d’établissements</div>
[...]
</div>
<div role="row">
<div role="cell">Résidences de tourisme</div>
<div role="cell">2 426</div>
[...]
</div>
</div>
Tableaux complexes
Un tableau est complexe quand il contient plus d'une ligne d'entête (col ou row) ou s'il y a des fusions cellule
Titre et résumé de l’organisation du tableau
Dans le caption ou via le aria-labelledby="", mettre le titre + un résumé de l’organisation du tableau (HTML5)
Pour le résumé pour les versions précédentes de HTML, le mettre dans summary=""(HTML4)
<caption>
Figure 2 - Répartition des déchets non dangereux non minéraux hors boues de l’industrie
manufacturière par type en 2016
<span class="sr-only">
Les industries agroalimentaires (IAA) et les industries manufacturières (hors IAA)
sont présentées sur 2 colonnes, avec, pour chacune d’elles la quantité en milliers
de tonnes le pourcentage. Une troisième colonne présente le total des deux industries,
en milliers de tonnes et en pourcentage.
</span>
</caption>
Le sommaire, pouvant être utile à d'autres usagers que ceux utilisant un lecteur d'écran, il est préférable de le mettre dans un bloc qui s'affiche via un bouton de type afficher / masquer
<caption>
Figure 2 - Répartition des déchets non dangereux non minéraux hors boues de l’industrie
manufacturière par type en 2016
<button type="button" aria-expanded="false">Résumé de l’organisation du tableau</button>
<span class="hide">
Les industries agroalimentaires (IAA) et les industries manufacturières (hors IAA)
sont présentées sur 2 colonnes, avec, pour chacune d’elles la quantité en milliers
de tonnes le pourcentage. Une troisième colonne présente le total des deux industries,
en milliers de tonnes et en pourcentage.
</span>
</caption>
Version alternative
Pour les tableaux complexes préférés une alternative car cela inclura tout le monde et non seulement les lecteurs d'écran (et c'est plus simple à développer !)
Passage en mode liste par exemple
On affiche un bouton pour afficher la version alternative
Plus besoin de mettre le résumé et header s'il y a une alternative
Cellules d’en-têtes
Identifier les cellules d’en-têtes via un attribut id et lier les cellules de données via l’attribut headers.
L'intitulé permet de comprendre ou le lien va nous emmener
ou
Le contexte le permet (Titre, paragraphe et phrase précédente)
«la suite», si le texte est seul, ce n'est pas explicite
«la suite», précédé d'un article (titre ou paragraphe), c'est conforme
Mais on peut améliorer l'intitulé !
Si un lien n'est pas explicite pour le voyant, ce n'est pas une faute, mais plutôt un problème d'UX
Le nom visible doit être contenu dans le nom accessible
Pour expliciter un intitulé :
via un texte caché en sr-only : non voyant uniquement
title : tous le monde
aria-label ou aria-labelledby : pas natif donc pas pour tout le monde
aria-label
Doit comporter l'intitulé du lien
<a href="#url" aria-label="Retour Accueil du site">Retour</a>
aria-label surcharge l'intitulé, c'est pour ça que l'on doit mettre l'intitulé dedans
title
Le title sera restitué par les lecteurs d'écran et à la souris
Par défaut le title est restitué en plus de l'intitulé, mais certain le configure pour etre que seul le title soit restitué
Doit comporter l'intitulé du lien
<a href="#url" title="Retour Accueil du site">Retour</a>
Liens identiques
Des liens dons l'intitulé et le contexte sont identiques et ont la même destination
Si ce n'est pas le cas :
Ajouter un titre pour préciser la différence entre les liens
Changer le contexte
Liens vides
Pas de lien vides
Attention au lien avec des images, aux polices d'icônes où les mise en forme en CSS uniquement (content:"")
Mettre un alt sur les images liens
<a href="#lien">
<img alt="intitule">
</a>
Ajouter un aria-label ou aria-labelledby sur le lien si besoin, utilisé si possible les propriétés natives
Ou une alternative accessible
Avec un datepicker non conforme, l'ajout d'un input saisissable rend le composant conforme
(attention à ne pas être piégé dans une boucle de focus)
Rôle pertinent
Lien : changement d'URL
Bouton ou implémentation du motif ARIA button : action, événement, fonction JavaScript etc...
Même pour les single page application ;
Un composant qui déclenche l'ouverture d'une page ou d'un onglet doit être un lien même si ce sont des actions Javascript
<a role="link" tabindex="0" onclick="myFunction()"></a>
<!-- ou -->
<a href="#" onclick="myFunction()"></a>
État et changements d'état
État sélectionné d'un bouton
<button aria-pressed="false">Filtrer par nom</button>
<button aria-pressed="true">Filtrer par nom</button>
Composant inactif, on utilisera l'attribut disabled
L'attribut aria-expanded="true/false" est défini sur un élément pour indiquer si un contrôle est développé
Sur un groupe d'éléments liés, indiquer à l'utilisateur qu'il s'agit de l'élément actuel aria-current
Lorsqu'un composant change d'état, que sa fonctionnalité est modifiée, on peut également passer par un changement de nom accessible ou de description (par exemple, la transformation d'un bouton lecture en pause, on vérifiera que l'intitulé a bien été modifié pour retranscrire la fonctionnalité qui sera déclenchée à la prochaine activation du bouton, pas uniquement l'apparence visuelle).
un texte explicatif précédant le changement de contexte
Ne pas faire de rechargement de page, d'une partie ou de changement de page par défaut, mettre un bouton pour faire l'action
un bouton ou un lien explicite
Message de statut
Informer les technologies d’assistance des messages d’alerte de confirmation ou de statut, sans déplacer le focus de l'utilisateur.
Ne pas en abuser, parfois contre-productif
Si le focus est déplacé sur le message ok/Ko général alors pas besoin de mettre le role="alert" ou si la page se recharge et que le bloc est dans le DOM
Dans tous les cas on fait une reprise de focus.
En cas d'erreur, ont se déplace l'utilisateur sur le premier champ en erreur/ ou message de confirmation + le mieux et de mettre aussi un message dans le titre de la page
aria-live="assertive" : le contenu est vocalisé immédiatement
aria-live="polite" : le contenu est vocalisé dès que l'utilisateur est disponible
aria-atomic="true" restitue tout, à ne pas utiliser dans un tchat par exemple
aria-atomic="false" restitue uniquement le dernier ajout
Messages d'erreurs
— Haute priorité
role="alert"
Le "alert" est restituée correctement
<p role="alert">Ceci est une alerte ajoutée dynamiquement</p>
Méthode alternative :
aria-live="assertive"
et aria-atomic="true"
Messages d'informations
— Attends que ce soit son tour pour être vocalisé
Pas très fiable coté restitution, préféré le "alert" si ça beug
<p role="status">Ceci est un status ajouté dynamiquement</p>
Méthode alternative :
aria-live="polite"
et aria-atomic="true"
<p><span id="myLiveRegion1" aria-live="polite">Mais je sais rester polie</span></p>
Messages de notifiactions
role="log"
Méthode alternative :
aria-live="polite"
et aria-atomic="false"
Messages d’attente
role="progressbar"
Seulement pour des tâches qui prennent beaucoup de temps.
Motif de conception (design pattern) : décrit structure, rôles et propriétés et comportement d’un composant JavaScript(widget).
ARIA authoring practices
Environnement de test
Il est nécessaire de réaliser des tests de restitution et d'utilisation avec les lecteurs d'écran de la base de référence.
Guide sur les lecteurs d'écran.
Environnement de bureau
Technologie d’assistance
Navigateur
NVDA (dernière version)
Firefox
JAWS (version précédente)
Firefox
VoiceOver (dernière version)
Safari
Environnement mobile
Système
Technologie d’assistance
Navigateur
iOS
VoiceOver (dernière version)
Safari
Android
Talkback (dernière version)
Chrome
Pour tester un site web sur un terminal mobile, l’environnement de test devra comporter une des deux combinaisons (iOS ou Android). À noter que dans le cas d’un site web mobile grand public, il est fortement conseillé de tester dans les deux environnements.
Contenus d’introduction, peut contenir des titres, de la navigation
Une balise <header> peux être utiliser dans une <section>
<main>
Unique ou une seule balise est visible simultanément
<section>≠<div>
une <div> n'a pas de valeur sémantique
une <section> avec titre aria-label ou aria-labelledby : région déclarée dans les plans des lecteurs d'écran, ne pas en abusé car cela alourdit la page et complexifié inutilement le plan
<nav>
Réservé aux zones de navigation principale et secondaire
Les navigations secondaires comprennent :
menu de sous-rubrique
navigation dans les collections de pages
navigation dans les résultats de recherche
le Fil d'ariane
les liens d’évitement
Ne pas utiliser <nav> pour les listes de lien !
Le bouton "burger" doit être inclus dans l'élément <nav>
La navigation principale peut inclure le bouton burger et être inclus dans la même balise <nav>
Ou en cas de plusieurs <nav>, le bouton doit être dans une balise <nav> seul
<aside>
Optionnel
Contenus indirectement reliés au contenu principal, peuvent être consultés de manière indépendante
<footer>
Obligatoire pour le pied de page du document
Contenus de pied de page, d’articles ou de contenus regroupés par <section>
Titrage du contenu
Hiérarchie cohérente, de h1 à h6
Dans la version 4 du RGAA, la règle est plus souple
il peux y avoir des saut entre les titre h2h4
ne pas avoir de h1 peut etre conforme dans certain cas
avoir plusieurs h1 c'est conforme aussi
Uniquement les titres nécessaires, un texte ne gras n'est pas un titre
role="heading" aria-level="[level]"
Permet de déclarer un titrage aux technologies d'assistance sans utiliser les balises sémantique, à utiliser en cas de conflit avec les équipe SEO par exemple
Liste de définition : dl dt/dd
C'est assez lourd pour les lecteurs d'écran, préféré de simples listes sauf pour la réalisation d'un glossaire
Pour une légende d'un schéma, une liste non ordonnée est plus adaptée
Un équivalant aux balises sémantiques :
Si pas de possibilité de faire une liste sémantique :
role="list" équivalent à un ul
role="listitem" équivalent à un li
<div role="list">
<div role="listitem">Favoriser l’information…</div>
<div role="listitem">Permettre aux personnes…</div>
</div>
Les suites de liens doivent être structurées avec des listes.
Citations
Citation en ligne<q>, mal restitué par NVDA préféré la citation de bloc
Citation en bloc<blockquote>
<blockquote>
<p>Aimer, ce n'est pas se regarder l'un l'autre, c'est regarder ensemble dans la même direction.</p>
<cite>Antoine De Saint-Exupéry</cite>
</blockquote>
Cadres iframe et frame
Contenu pertinent, ajouté un title
<iframe title="Publicité"></iframe>
Pas de titre dans le cas de cadres techniques (Google Analytics, etc.) mais cacher avec aria-hidden="true".
Depuis RGAA 4 : tailles de polices en px autorisées. (non conseillé car les tailles de police en pixels ne permettent pas d’agrandir les textes sur certains navigateurs)
Quand un site propose un dispositif d’agrandissement des caractères (A+/A-), c'est cette fonctionnalité qui sera soumise à la conformité, mieux vaut laisser les navigateurs gérés !
Texte lisible avec agrandissement jusqu'à 200% :
Zoom texte :Firefox : « Affichage > Zoom texte seul » : agrandissement à 200% (Ctrl + 6 fois)
Ou utilisation des fonctions de zoom du navigateur (zoom graphique)
Linéarisation des contenus
Les contenus doivent rester présents, lisibles et utilisables sans utilisation des deux ascenseurs :
Consultation verticale : 320px de large minimum
Consultation horizontale : 256px de hauteur minimum
Les tableaux ont le droit d'être affiché avec un scroll
Adaptation des textes
Les textes doivent rester lisibles dans les conditions suivantes :
interlignage augmenté de 1,5 fois la taille de police ;
marge suivante : 2 fois la taille de police
espacement des lettres : 0,12 fois la taille de la police
espacement des mots : 0,16 fois la taille de la police
Le message doit être visible est restitué
Les textes liés par les propriétés aria-labelledby ou aria-describedby font partie des propriétés de l’élément, ils sont donc toujours disponibles, y compris lorsqu’ils sont cachés par CSS avec display:none ou visibility:hidden
Champ obligatoire : format attendu à fournir (a faire de facon global si possible)
Message générique dans le titre de la page : « erreur sur le formulaire » est très suffisant
Dans le message d'erreur on peut donner :
un exemple réel 01/02/23 au lieu du JJ/MM/AAAA, pour une date c'est clairement mieux, mais pour une adresse email c'est moins intéressant
de l'aide à la complétion, pas obligatoire mais mieux
Les exemples de format ne doivent pas être que dans les placeholders car ce n'est pas accessible
Personnaliser les messages d’erreurs natif
L'API Constraint validation permet de personnaliser les messages d’erreurs générés par les type d’input particuliers.
var email = document.getElementById("emailform");
email.addEventListener('invalid', function() {
if (this.value.trim() !== '') {
this.setCustomValidity("Saisie invalide. Exemple valide\n: toto@foobar.com");
}
}, false);
Modification, mises à jour ou récupération des données
Si le formulaire
modifie ou supprime des données ;
ou transmet des données sensibles, réponses à un examen ;
a des conséquences financières, juridiques.
L'utilisateurs doit pouvoir
vérifier, modifier ou annuler les saisies avant envoie du formulaire ;
ou il existe un mécanisme de confirmation explicite via une case à cocher ou une étape supplémentaire.
Pour les formulaires de signature électronique, type mandat SEPA, la modification peut être désactivé comme le but de ces formulaires est de valider les données saisies précédemment
Champs avec saisi automatique
Pour les champs qui collectent des informations personnelles sur l’utilisateur, la nature du champ (finalité) est déterminable à partir du code (attributs/propriétés).
honorific-prefix - Abréviation, civilité ou titre ;
given-name - Prénom ;
additional-name - Prénoms additionnels ;
family-name - Nom de famille ;
honorific-suffix - Suffixe honorifique ;
nickname - Surnom, diminutif ;
organization-title - Fonction, intitulé de poste ;
username - Nom d’utilisateur ;
new-password - Nouveau mot de passe (par exemple, lors de la création d’un compte ou d’un changement de mot de passe) ;
current-password - Mot de passe actuel pour le compte identifié par le champ username (par exemple, lors d’une connexion) ;
organization - Nom de l’organisation correspondant à la personne, à l’adresse ou à l’information de contact dans les autres champs associés avec ce champ ;
address-line1 - Adresse postale (une ligne par champ, ligne 1) ;
address-line2 - Adresse postale (une ligne par champ, ligne 2) ;
address-line3 - Adresse postale (une ligne par champ, ligne 3) ;
address-level4 - Le niveau administratif le plus détaillé, pour les adresses pourvues de quatre niveaux administratifs ;
address-level3 - Le troisième niveau administratif, pour les adresses pourvues d’au moins trois niveaux administratifs ;
address-level2 - Le deuxième niveau administratif, pour les adresses pourvues d’au moins deux niveaux administratifs ;
address-level1 - Le plus large niveau administratif d’une adresse, c’est-à-dire la province dans laquelle se trouve la localité ;
country - Code pays ;
country-name - Nom de pays ;
postal-code - Code postal, code CEDEX (si le CEDEX est présent, ajouter “CEDEX”, et ce qui le suit doit être ajouté dans le champ address-level2) ;
cc-name - Nom complet figurant sur le moyen de paiement ;
cc-given-name - Prénom figurant sur le moyen de paiement ;
cc-additional-name - Prénoms additionnels figurant sur le moyen de paiement cc-family-name - Nom de famille figurant sur le moyen de paiement ;
cc-number - Code identifiant le moyen de paiement (e.g., un numéro de carte bancaire) ;
cc-exp - Date d’expiration du moyen de paiement ;
cc-exp-month - Le mois de la date d’expiration du moyen de paiement ;
cc-exp-year - L’année de la date d’expiration du moyen de paiement ;
cc-csc - Code de sécurité du moyen de paiement (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc.) ;
cc-type - Type de moyen de paiement (e.g. Visa) ;
transaction-currency - La devise qui a la préférence de l’utilisateur lors d’une transaction ;
transaction-amount - Le montant qui a la préférence de l’utilisateur lors d’une transaction (e.g., en réponse à une enchère ou à un prix soldé) ;
language - Langue préférée ;
bday - Date d’anniversaire ;
bday-day - Le jour de la date d’anniversaire ;
bday-month - Le mois de la date d’anniversaire ;
bday-year - L’année de la date d’anniversaire ;
sex - Identité sexuelle ;
url - Page d’accueil ou une autre page Web correspondant à l’organisation, la personne, l’adresse ou à l’information de contact dans les autres champs associés avec ce champ ;
photo - Photographie, icône ou une autre image correspondant à l’organisation, la personne, l’adresse ou à l’information de contact dans les autres champs associés avec ce champ ;
tel - Numéro de téléphone complet, y compris le code pays ;
tel-country-code - Code pays du numéro de téléphone ;
tel-national - Numéro de téléphone sans la partie code pays, avec un préfixe interne au pays, s’il y a lieu ;
tel-area-code - Indicatif régional du numéro de téléphone, avec un préfixe interne au pays, s’il y a lieu ;
tel-local - Numéro de téléphone sans la partie code pays ni l’indicatif régional ;
tel-local-prefix - La première partie du composant du numéro de téléphone qui suit l’indicatif régional, lorsque ce composant est scindé en deux parties ;
tel-local-suffix - La seconde partie du composant du numéro de téléphone qui suit l’indicatif régional, lorsque ce composant est scindé en deux parties ;
tel-extension - Numéro de téléphone d’un poste interne ;
email - Adresse électronique ;
impp - URL correspondant d’un protocole de messagerie instantanée (par exemple, "aim:goim?screenname=example" ou "xmpp:fred@example.net").
Pas d'obligation de le mettre dans le <main>, peut-être en fin de contenu ou dans le pied de page !
Tous les liens sont fonctionnels avec des intitulés pertinents
Ordre de tabulation, piège au clavier
Ordre de tabulation cohérent avec le code ; titre avant paragraphe, ordre des conteneurs ( vérifier avec le site sans styles)
Pas de piège au clavier (focus figé, focus sur un élément invisible, bug JS, boucle infinie)
Attention au datepicker, pensez à mettre un bouton calendrier pour ouvrir et surtout fermer le calendrier pour éviter toute boucle
Ne jamais utiliser des tabindex supérieurs à 0, laissez le navigateur faire
Il peut avoir plusieurs tabindex="0" et tabindex="-1" dans une page
tabindex="0"
Permets de capturer le focus et être atteint via la navigation au clavier
Inclut l'élément dans le parcours séquentiel de tabulation pour un élément qui ne prend pas le focus, une div par exemple
tabindex="-1"
L'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier
Exclu du parcours séquentiel un élément qui prend le focus (lien, button…)
Permets à l'élément ne prenant pas nativement le focus de le recevoir (méthode javascript focus)
Attention l'élément restera accessible par les techniques d'assistance (différent d'aria hidden="true")
Accès au contenu additionnel affiché
L'élément doit être atteint au clavier
La zone doit rester visible tant que le focus se trouve dans l'élément
Penser à mettre un bouton fermer pour pouvoir revenir à l'endroit initial (un bouton qui ouvre un pop-in après le footer dans le code)
Raccourcis clavier
Désactiver ou permettre de configurer les raccourcis
Ou le raccourci n'est effectif que lorsque le focus est dans le composant sur lequel il s'applique
L’utilisateur doit pouvoir supprimer ou augmenter la limite de temps ;
La limite de temps est de vingt heures au moins ;
Cas particulier lorsque la limite de temps est essentielle.
Il faut penser à ceux qui on besoin plus de temps que les autres pour faire les mêmes manipulations, pour un utilisateur de contacteur au souffle ou autre par exemple
Afficher un message dans une modale par exemple pour prolonger ou supprimer la limite de session
Rafraichissement automatique
L'utilisateur peut arrêter et relancer le rafraîchissement ;
L'utilisateur est alerté de l’imminence d’un rafraichissement et peut augmenter le délai de 10 fois au moins.
Que le rafraîchissement soit total soit partiel, proposer un bouton pour désactiver/activer le live upload par exemple
Nouvelles fenêtres
Pas de nouvelles fenêtres sans action de l’utilisateur
Une seule fenêtre s'ouvre à la fois
Documents en téléchargement
Document accessible ;
Ou alternative accessible : HTML, .doc, .odt structurés.
Pensez à fournir une alternative, notamment pour les PDF qui sont très difficile a rendre accessible
De préférence, le contrôle doit être le premier élément de la page.
Indépendance de l’orientation
Le contenu doite être consultable portrait et paysage, ne pas bloquer
Sauf si l'orientation est essentielle
Gestes complexes
Les fonctionnalités utilisables par des gestes multipoints (zoom sur une carte) ou basés sur un tracé (swipe) :
peuvent être réalisées avec un geste à point unique et/ou sans trajectoire,
sauf si le geste est essentiel(ex. le dessin d’une signature).
Sur une slider au swipe, ajouter une navigation avec des boutons !
Annulation du pointeur
Aucun événement ne doit être déclenché sur l’action descendante (down : mousedown sur desktop / touchstart sur mobile)
ou prévoir un mécanisme qui permet d’interrompre l'exécution de l'action avant la fin ;
ou un mécanisme permet d’annuler l'action.
Activation par le mouvement
Les fonctions qui sont déclenchées en déplaçant l’appareil (en secouant ou en basculant) ou lorsque l’utilisateur effectue un mouvement capté par les dispositifs de l’appareil (eg. une caméra) peuvent être :
actionnées par des composants classiques (un bouton) ;
désactivées pour éviter un déclenchement accidentel ;
sauf si le mouvement est essentiel pour la fonction.
