Initialement publié sur le wiki du projet Université Populaire Syrienne

L'objet de cette section est de lister les normes à respecter pour assurer une accessibilité maximale aux personnes porteuses d'une déficience visuelle, auditive ou autre qui pourrait entraver leur expérience de navigation.

---

Le W3C a proposé cette norme, qui a été traduite en français par BrailleNet et reprise par le Gouvernement français : https://www.w3.org/Translations/WCAG20-fr/ (en) et http://references.modernisation.gouv.fr/introduction-au-rgaa-0 (fr)

Ces règles pour un site accessible se basent sur quatre grands principes :

• L'utilisateur doit être capable de percevoir le contenu avec un autre sens que la vue ou l'ouïe. Les malvoyants peuvent utiliser un outil de synthèse vocale, ou un mode d'affichage plus contrasté pour rendre le texte plus lisible. Les malentendants pourront lire les sous-titres des vidéos ou les transcripts des enregistrements sonores, ou encore regarder la version en langage des signes d'un enregistrement sonore.
• L'utilisateur doit pouvoir utiliser le site et ses fonctionnalités, et y naviguer sans frein même sans utiliser de souris. Les épileptiques doivent pouvoir utiliser le site sans risque.
• L'utilisateur comprend le contenu et la logique du site : son appareil lit correctement le contenu et dans la bonne langue, l'utilisateur peut accéder facilement au sens des termes plus complexes ou spécifiques à la page, et le comportement du site ne va pas à l'encontre de ses habitudes de navigation. Enfin l'utilisateur est assisté pour lui éviter de commettre des erreurs.
• Le site est compatible avec un maximum d'appareils d'accessibilité, assurant son accès au plus grand nombre.

Adaptée de http://checklists.opquast.com/rgaa3/
Pour comprendre le principe d'ARIA en quelques slides : http://fr.slideshare.net/Qelios/html5-aria-et-laccessibilit-du-web-o-en-eston
Et la page “ARIA - Accessibilité” de la documentation du MDN (en, partiellement fr) : https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA

• Ne pas utiliser d'image pour afficher des informations textes importantes
• Toutes les images doivent porter un attribut alt et un attribut title (title est dispensable si l'image est encadrée par un lien qui porte déjà un attribut title), sauf s'il s'agit d'images sans contenu, à but purement décoratif : dans ce cas, la valeur de alt doit être une chaîne de caractère vide, et l'image ne doit pas avoir d'attribut title.
• Les images zones cliquables (balise <area href=“lien”>) doivent aussi porter un attribut alt. S'il s'agit d'un zone non cliquable (pas de 'href', la valeur de alt doit être une chaîne de caractère vide, et la zone ne doit pas avoir d'attribut title.
• Les boutons de formulaire (de type <input type='image'>) ont un attribut alt qui décrit leur action
• Les images svg (balise <svg role='img'>) portent un attribut alt, ou une propriété, un état ou un rôle ARIA, ou un attribut desc
• Les balises <canvas> ne doivent pas encadrer de texte.*
• Le contenu du texte alternatif doit être concis et pertinent. Par exemple les images CAPTCHA doivent spécifier leur rôle.

• Le contenu et l'importance d'une information ne doit pas être identifiable uniquement par sa couleur.
• Lorsqu'une couleur est le sujet d'un texte, cette couleur doit être spécifiée en toutes lettres.
• Le contraste texte / fond doit passer la validation WCAG, ou un système permet de switcher à un contraste plus élevé qui passe la validation WGAC.

• Un lien vers le transcript du lecteur audio/vidéo est disponible et mis en évidence à côté du lecteur
• Un lien vers l'audio-description est disponible et mis en évidence
• Un lien vers des sous-titres synchronisés est disponible et mis en évidence
• Un lien vers une vidéo en langage des signes est disponible et mis en évidence
• Pour un contenu diffusé depuis des balises <track>, ces balises portent un attribut kind=“captions”
• Les sons se lançant automatiquement en JavaScript durent moins de trois secondes ou peuvent être désactivés
• Les médias permettent de contrôler leur consultation (bouton lecture, pause, stop, volume, timeline…) aussi bien par la souris que par le clavier

• Chaque lien a un intitulé entre ses balises <a></a>
• L'intitulé du lien ou son contexte permet de comprendre sa fonction et sa destination même hors contexte
• Le lien a un attribut title pertinent
• Un lien identique d'une page à une autre conserve la même fonction et la même destination

• Une alternative <noscript> est proposée
• Le script est accessible aux API d'accessibilité
• Un élément permet de réaliser la même action attendue comme événement JS sans souris
• Aucun élément ne voit son focus supprimé par le script
• Les interactions au clavier sont conformes au comportement défini par le motif de conception pour les touches Echap, Barre d'espace, Tabulation et Flèches de direction
• Les changements de contexte ne s'opèrent qu'après que l'utilisateur en ait été averti textuellement ou qu'il a lui même cliqué sur un lien ou un bouton explicite
• Les alertes non sollicitées peuvent être contrôlées par l'utilisateur

Les éléments suivants doivent être présents :

• Un DOCTYPE valide, suivie d'une balise <html lang=fr> (ou en ou ar selon la langue)
• Les balises, les attributs et leurs valeurs respectent les conventions d'écriture de la communauté
• L'imbrication des balises, l'ouverture et la fermeture des balises sont conformes
• Ne pas utiliser de balise, d'attribut ou de valeur obsolète
• Chaque page a un titre de page (<title>) pertinent
• Seuls les balises <div>, <span> et <table> sont utilisées uniquement à des fins de présentation, sans prise en compte de leur sémantique
• Si seule une partie de la page a un sens de lecture différent, le bloc en question doit porter un attribut dir

• Il y a au moins une balise <h1> ou une balise portant un rôle ARIA heading par page
• La zone d'en-tête de la page est structurée via une balise <header>
• Les zones de navigation principales et secondaires sont structurées via une balise <nav>
• La balise <nav> est réservée à la structuration des zones de navigations principales et secondaires
• La zone de contenu principal est structurée via une balise <main>
• La structure du document utilise une balise <main> unique
• La zone de pied de page est structurée via une balise <footer>
• L'arborescence du document est cohérente
• Les listes utilisent soit les balises <ul> et <li>, soit les rôles ARIA list et listitem.
• Les listes de définitions utilisent les balises <dt> et <dd>
• Chaque abréviation est accompagnée de sa signification sous forme d'un texte adjacent ou propose un lien référençant une page ou un emplacement dans la page qui permet d'en connaître la signification, ou est présente dans un glossaire présent sur le site, ou est implémentée via une balise <abbr> possédant un attribut title qui permet d'en connaître la signification
• Chaque citation courte utilise une balise <q>
• Chaque citation longue utilise une balise <blockquote>

• Les espaces ne sont pas utilisés pour séparer les lettres d'un mot ou pour simuler des tableaux ou des colonnes de texte
• Le style est distinct du contenu, et le contenu reste présent et lisible / compréhensible même sans le style
• Les unités non relatives (pt, pc, mm, cm, in) ne doivent pas être utilisées pour les types de média screen, tv, handheld, projection.
• Les polices utilisent des tailles relatives
• L'augmentation de la taille des caractères jusqu'à 200%, au moins, ne doit pas provoquer de perte d'information
• Si une couleur de texte est affectée à un bloc, ce bloc ou un bloc parent doit avoir une couleur de fond déclarée
• Si une couleur de bloc ou une image de fond est affectée à un bloc ou un bloc parent, le texte de ce bloc doit avoir une couleur de texte déclarée ou héritée.
• L'indication visuelle du focus doit être conservé (outline et ses dérivés)
• Une indication visuelle autre que la couleur permet d'indiquer que le lien est survolé
• La couleur de fond et la couleur de polices sont contrôlables par l'utilisateur
• Le texte n'est pas justifié, ou un mécanisme permet à l'utilisateur de supprimer la justification du texte
• Lorsque la police est à 200%, en affichage plein écran, pour lire un bloc de texte, l'utilisation de la barre de défilement horizontal n'est pas nécessaire, ou un mécanisme permet de rendre inutile l'utilisation de la barre de défilement horizontal pour lire ce bloc
• Chaque bloc de texte a une largeur inférieure ou égale à 80 caractères, ou l'utilisateur peut réduire la largeur de chaque bloc de texte à 80 caractères en redimensionnant la fenêtre de son navigateur
• Pour chaque bloc de texte, la valeur de l'interligne est égale à 1,5 fois la taille du texte, au moins, ou un mécanisme permet d'augmenter la valeur de l'interligne à 1,5 fois la taille du texte, au moins
• Pour chaque bloc de texte, la valeur de l'espacement entre deux paragraphes est égale à 1,5 fois la valeur de l'interligne, au moins, ou un mécanisme permet d'augmenter la valeur de l'espacement entre deux paragraphes à 1,5 fois la valeur de l'interligne, au moins
• Les textes cachés n'ont pas vocation à être restitués par les technologies d'assistance, ou ils sont rendus visibles sur action de l'utilisateur sur l'élément lui-même ou un élément précédant le texte caché, ou ce texte caché fait partie d'un composant d'interface piloté par l'API ARIA, prenant en charge l'état affiché ou masqué du contenu.
• L'information ne doit pas être donnée uniquement par la forme, taille ou position, que ce soit pour un texte, une image, un média…

• Le champ de formulaire possède un attribut <title>, ou une étiquette (balise <label>) est associée au champ de formulaire, ou le champ de formulaire possède une propriété aria-label, ou le champ de formulaire possède une propriété aria-labelledby référençant un passage de texte identifié
• Tout champ de formulaire portant une étiquette possède un attribut id dont la valeur est unique, et la balise label possède un attribut for, ou la valeur de l'attribut for est égale à la valeur de l'attribut id du champ de formulaire associé. Idem pour les champs de formulaires aria-labelledby.
• Les étiquettes (<label> ou aria-label) sont suffisamment explicites pour que l'utilisateur sache comment renseigner le champ correctement
• Les valeurs des attributs title ou aria-labelledby permettent de comprendre la fonction du champ
• Chaque étiquette associée à un champ de formulaire ayant la même fonction et répétée plusieurs fois dans une même page ou dans un ensemble de pages est cohérente
• Les étiquettes sont accolées à leur champ
• Les champs portant sur des informations de même nature sont rassemblés grâce à <fieldset> et suivis par une légende pertinente (<legend>)
• Les listes de choix (<select>) regroupent les items grâce à une balise <optgroup> possédant un <label> pertinent
• Le contenu de l'attribut value des boutons de formulaire de type submit, reset ou button est pertinent
• Le contenu de la balise <button> et de son attribut title est pertinent
• L'indication de champ obligatoire, ainsi que le type de donnée attendu et leur format sont donnés par un passage de texte avant le champ de formulaire, ou via un attribut required, ou via la propriété ARIA aria-required, ou dans l'étiquette ( ou propriété aria-label, ou passage de texte lié via la propriété aria-labelledby) et par une indication visuelle explicite
• Chaque indication d’erreur de saisie réalisée grâce à la propriété ARIA aria-label ou aria-invalid doit être accompagnée d'une indication visuelle explicite dans l’étiquette (balise <label>) ou dans un passage de texte lié au champ par la propriété ARIA aria-describedby ou aria-labelledby
• Pour chaque formulaire, pour chaque erreur de saisie, les types et les formats de données sont suggérés si nécessaire, et des exemples de valeurs attendues sont donnés
• L'utilisateur peut modifier ou annuler les données et les actions effectuées sur ces données après leur saisie, ou vérifier et corriger les données avant la validation du formulaire, ou un mécanisme de confirmation explicite, via un champ de formulaire ou une étape supplémentaire, est présent.
• Un mécanisme permet de récupérer les données supprimées par l'utilisateur, ou un mécanisme de confirmation explicite de la suppression, via un champ de formulaire ou une étape supplémentaire, est présent
• Pour assister l'utilisateur il existe un lien vers une page d'aide, ou des indications avant le formulaire ou avant les champs de formulaire, ou il existe des indications dans l'étiquette (balise <label>, attribut title, propriété aria-label, passage de texte lié via la propriété aria-labelledby) du champ de formulaire, ou il existe des indications dans un passage de texte lié par la propriété ARIA aria-describedby, ou un assistant est disponible.
• Selon les besoins, un correcteur orthographique est disponible, des suggestions de saisie sont disponibles avant le champ du formulaire ou dans l'étiquette (balise <label>, attribut title, propriété aria-label, passage de texte lié via la propriété aria-labelledby) du champ de formulaire, ou des suggestions de saisie sont disponibles dans un passage de texte lié par la propriété ARIA aria-describedby

• Deux de ces trois éléments au moins sont présents et systématiquement placés au même endroit sur chaque page : un menu de navigation, un plan du site et un moteur de recherche
• Le plan du site est représentatif de l'architecture du site
• Les liens du plan du site sont fonctionnels et renvoient vers les bonnes pages
• Le menu de navigation et la barre de navigation sont toujours à la même place dans la présentation
• Le menu de navigation et la barre de navigation ont une présentation cohérente
• Un fil d'Ariane est constamment présent à la même position, et est toujours représentation de la position de l'utilisateur sur le site
• Chaque groupe de liens importants est implémenté dans une balise commune portant un id
• La zone de contenu est dans un bloc qui porte un id
• Un lien d'accès rapide est fonctionnel
• La page en cours de consultation est spécifiée dans le menu de navigation
• L'ordre de tabulation reste cohérent même après la manipulation de données par un script JS
• Il est possible d'atteindre l'élément suivant ou précédent pouvant recevoir le focus avec la touche de tabulation

• Pour chaque page Web, chaque procédé de rafraîchissement ou de redirection automatique (balise <object>, balise <embed>, balise <svg>, balise <canvas>, balise <meta>) peut être stoppé ou différé par l'utilisateur, ou la limite de temps entre deux rafraîchissements est de vingt heures, au moins
• Les redirections effectuées via une balise <meta> sont immédiates
• Pour chaque procédé limitant le temps d'une session, l'utilisateur peut supprimer la limite de temps ou la différer, ou la limite de temps avant la fin de la session est de vingt heures au moins.
• Le fait que le lien va s'ouvrir dans une nouvelle fenêtre est spécifié à l'utilisateur
• Si une tâche se déroule en temps réel ou qu'elle requiert une limite de temps essentielle à son bon déroulement, elle doit être limitée dans le temps.
• Lors d'une interruption de session authentifiée, les données saisies par l'utilisateur sont récupérées après ré-authentification
• Chaque fichier en téléchargement via un lien ou un formulaire a des informations relatives à son format, son poids, sa langue (sauf cas particuliers)
• Les documents bureautique proposés au téléchargement sont compatible avec l'accessibilité, ou une version alternative accessible contenant les mêmes informations existe
• Dans chaque page Web, chaque expression inhabituelle ou limitée, chaque expression idiomatique ou le jargon est définie de façon pertinente soit dans le contexte adjacent de l'expression indiquée par la balise <dfn>, soit via une liste de définition, soit il existe une définition dans la page soit l'expression est contenue dans un lien permettant d'accéder à la définition
• Chaque contenu cryptique (art ascii, émoticon, syntaxe cryptique) porte un attribut title donnant une définition pertinente, ou une définition est donnée par le contexte adjacent
• Chaque mot dont le sens ne peut être compris sans en connaître la prononciation est placé à côté de l'indication de la prononciation phonétique, ou cette indication est accessible via un lien
• Chaque texte qui nécessite un niveau de lecture plus avancé que le premier cycle de l'enseignement secondaire (hors nom propre et titre) offre une illustration ou des symboles graphiques adaptés au niveau de lecture du premier cycle de l'enseignement secondaire, une version en Langue des Signes Française, une version vocalisée du texte et/ou un résumé adapté au niveau de lecture du premier cycle de l'enseignement secondaire
• Chaque image animée (<img>, <svg> ou <object>), script ou tout autre élément qui provoque un changement brusque de luminosité ou un effet de flash ne doit envoyer au maximum que 3 flashs par seconde, ou la surface totale cumulée des effets est inférieure ou égale à 21 824 pixels
• Chaque contenu en mouvement ou clignotant, déclenché automatiquement, bouge moins de 5 secondes, peut être mis sur pause et relancé par l'utilisateur, affiché et masqué, ou l'utilisateur peut afficher la totalité de l'information sans le mouvement/clignotement.