REX Dior

Comment on a amélioré l'accessibilité du projet

 

(essayé, en tous cas...)

C'est quoi a11y ?

👂

🧐

😵

👐

Pourquoi a11y ?

USA

  • ADA Act
  • Tout le monde
  • Compliant, sinon tu payes
  • Compliant = tu peux effectuer l'action principale du site

France

  • Norme européenne
  • Tout le public et entreprises >500M CA
  • Plan d'action à 3 ans
  • Compliant = 100% mais notion d'effort démesuré

En pratique

Les grandes catégories

  • Couleurs, contrastes, tailles de polices (vue)
  • Choix de la police, peu d'animations, édition du contenu (psychique)
  • Sous-titrage intégral audio/vidéo (audition)
  • Navigation au clavier (moteur)
  • Navigation au screen reader (vue)

Navigation au clavier

Navigation au clavier

  • Outline claire et visible : parlez-en avec votre designer !
  • Pas d'élément invisible focusable
  • Ne pas forcer le focus
  • ... sauf pour le changement de page
  • Skip links

Screen readers

Amazon avec NVDA (Windows)

Starbucks avec VoiceOver (iPhone)

LeMonde.fr (Android)

Projet Dior (Android)

Screen readers

1. Bonne structure de titres

3. Différence a/button (sémantique)

4. Propriété lang sur l'élément HTML

2. Alt des images

<h1>Ceci annonce clairement le contenu de la page</h1>
<h2>Pas que des labels avec max de keywords SEO</h2>
<img src="icone.svg" alt="" />
<img src="joconde.png" alt="Portrait d'une femme de trois quarts devant des montagnes" />
<a>Un lien prévient d'un changement de page</a>
<button>Un bouton provoque une action</button>
<html lang="fr">...</html>

5. Labellisation custom

<div class="step-number" aria-hidden="true">01</div>
<h2 class="step-name">
  <span class="sr-only">Étape 1 </span>
  Démaquiller et nettoyer
</h2>

3 Leçons

Impliquer

toute la chaîne de production

Il faut

tester

en continu

Rien ne remplace
les vrais
tests utilisateurs

Copy of REX Dior

By Albéric Trancart

Copy of REX Dior

  • 157
Loading comments...

More from Albéric Trancart