Les règles d’accessibilité, expliquées

Les 70 contrôles automatiques que Rampsight exécute sur chaque page, chacun rattaché au critère de succès WCAG 2.2 dont il relève. Chacun correspond à une défaillance qu’un navigateur peut prouver, avec une correction applicable dès aujourd’hui.

ARIA

Les attributs ARIA doivent être autorisés par le rôle — aria-allowed-attr
Les intitulés braille exigent un équivalent en texte — aria-braille-equivalent
Les boutons, liens et éléments de menu ARIA ont besoin d’un nom — aria-command-name
Certains attributs ARIA contredisent l’élément natif — aria-conditional-attr
Les rôles ARIA obsolètes ne fonctionnent plus — aria-deprecated-role
Le corps de la page ne doit pas être masqué aux technologies d’assistance — aria-hidden-body
Les champs de saisie ARIA ont besoin d’un nom — aria-input-field-name
Les jauges ont besoin d’un nom — aria-meter-name
Les barres de progression ont besoin d’un nom — aria-progressbar-name
Certains éléments ne peuvent pas porter de nom ARIA — aria-prohibited-attr
Certains rôles exigent leurs propres attributs — aria-required-attr
Certains rôles exigent des enfants précis — aria-required-children
Certains rôles exigent un parent précis — aria-required-parent
aria-roledescription a besoin d’un rôle à décrire — aria-roledescription
Les rôles ARIA doivent exister et être bien orthographiés — aria-roles
Les onglets ont besoin d’un nom — aria-tab-name
Interrupteurs, boutons radio et cases à cocher ont besoin d’un nom — aria-toggle-field-name
Les infobulles ont besoin de contenu — aria-tooltip-name
Les noms des attributs ARIA doivent être valides — aria-valid-attr
Les valeurs des attributs ARIA doivent être valides — aria-valid-attr-value

Couleur et contraste

Le texte a besoin d’un contraste suffisant avec son fond — color-contrast
Les liens dans le texte demandent plus que la couleur — link-in-text-block

Formulaires

autocomplete doit utiliser les valeurs normalisées — autocomplete-valid
Un champ, une étiquette — form-field-multiple-labels
Les champs de formulaire ont besoin d’une étiquette — label
Les listes déroulantes ont besoin d’un nom — select-name

Clavier

Offrir un moyen de passer la navigation — bypass
Ne pas retirer de l’ordre de tabulation un iframe qui a du contenu — frame-focusable-content
Ne pas imbriquer les composants interactifs — nested-interactive
Les zones défilantes doivent être atteignables au clavier — scrollable-region-focusable

Langue de la page

La page a besoin d’une langue — html-has-lang
Le code de langue doit être valide — html-lang-valid
lang et xml:lang doivent concorder — html-xml-lang-mismatch
Les codes de langue en ligne doivent être valides — valid-lang

Noms et rôles

Un élément masqué ne doit pas rester accessible au clavier — aria-hidden-focus
Les boutons ont besoin d’un nom — button-name
Les boutons input ont besoin d’une valeur — input-button-name
Les liens ont besoin d’un nom — link-name
Les résumés de bloc dépliant ont besoin de texte — summary-name

Balisage

Les id utilisés par ARIA doivent être uniques — duplicate-id-aria
Supprimer <marquee> — marquee

Sémantique

Le nom accessible doit contenir le texte visible — label-content-name-mismatch
Un paragraphe mis en forme n’est pas un titre — p-as-heading

Indices visuels

Ne pas bloquer le zoom — meta-viewport
Les cibles tactiles doivent être assez grandes — target-size

Structure

L’espacement du texte ne doit pas être verrouillé par !important — avoid-inline-spacing
Ne pas verrouiller la page dans une seule orientation — css-orientation-lock
Les listes de définitions exigent les bons enfants — definition-list
<dt> et <dd> doivent se trouver dans une liste de définitions — dlitem
Les listes exigent des éléments de liste comme enfants — list
Les éléments de liste doivent être dans une liste — listitem

Tableaux

Utiliser une vraie légende de tableau — table-fake-caption
Les cellules de données ont besoin d’en-têtes — td-has-header
headers doit pointer vers des cellules du même tableau — td-headers-attr
Les en-têtes ont besoin de cellules à décrire — th-has-data-cells

Alternatives textuelles

Les zones d’une image réactive ont besoin d’une alternative textuelle — area-alt
Chaque page a besoin d’un titre — document-title
Les iframes ont besoin d’un titre — frame-title
Les titres de cadres doivent être distincts — frame-title-unique
Les images ont besoin d’une alternative textuelle — image-alt
Les boutons image ont besoin d’une alternative textuelle — input-image-alt
<object> a besoin d’une alternative textuelle — object-alt
Les éléments avec role="img" ont besoin d’un nom — role-img-alt
Remplacer les images réactives côté serveur — server-side-image-map
Les images SVG ont besoin d’un nom — svg-img-alt
Les vidéos ont besoin de sous-titres — video-caption

Audio et vidéo

L’audio a besoin de sous-titres ou d’une transcription — audio-caption
Supprimer <blink> — blink
Ne pas rafraîchir ni rediriger la page par minuterie — meta-refresh
Ne pas démarrer le son automatiquement — no-autoplay-audio

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.