Accessibilité essentielle

Règles minimales pour clavier, vocal, ARIA et structure.

Structure

Structure

Définir la langue du document

HTML

<html lang="fr">

Définir la langue d’un élément

HTML

<span lang="en">Hello</span>

Variantes possibles : fr, en, de, es.

Hiérarchie correcte des titres

HTML

<h1>Titre</h1>
<h2>Section</h2>
<h3>Sous-section</h3>

Variantes possibles : niveaux 1 → 6.

Images

Images

Image informative avec alt

HTML

<img src="photo.jpg" alt="Portrait d'une personne">

Image décorative sans alt

HTML

<img src="shape.svg" alt="">

Variantes possibles : alt vide pour décoratif.

Roles

Roles

Définir une navigation

HTML

<nav role="navigation">…</nav>

Définir une bannière

HTML

<header role="banner">…</header>

Variantes possibles : banner, navigation, main, contentinfo.

ARIA

ARIA

Décrire un bouton

HTML

<button aria-label="Ouvrir le menu">☰</button>

Décrire une zone

HTML

<section aria-labelledby="t1">
    <h2 id="t1">Titre</h2>
</section>

Variantes possibles : aria-label, aria-labelledby.

État ARIA dynamique

HTML

<button aria-expanded="false">Menu</button>

Autre état

HTML

<button aria-pressed="true">On</button>

Variantes possibles : expanded, pressed, selected.

Navigation clavier

Focus visible

CSS

:focus-visible { outline: 2px solid #00b3ff; }

Supprimer les pièges clavier

HTML

<div tabindex="0">Zone</div>

Autre focus

CSS

.box:focus-within { border-color: #ff0066; }

Variantes possibles : focus-visible, focus-within.

Navigation vocale

Étiqueter un bouton pour VoiceOver

HTML

<button aria-label="Fermer la fenêtre">×</button>

Étiqueter un lien

HTML

<a href="#" aria-label="Aller à l'accueil">Accueil</a>

Variantes possibles : aria-label sur tout élément interactif.

Skip link

Lien pour aller directement au contenu

HTML

<a href="#main" class="skip">Aller au contenu</a>

Style minimal

CSS

.skip {
    position: absolute;
    top: -40px;
}

.skip:focus { top: 0; }

Variantes possibles : position, animation.

Contraste

Contraste

Texte lisible

CSS

.txt {
    color: #111;
    background: #fff;
}

Autre contraste

CSS

.txt-dark {
    color: #fff;
    background: #000;
}

Variantes possibles : clair, sombre.