Paris Web 2013

Atelier

Rendre une application accessible en 4 étapes

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

A chaque étape

HTML 0

HTML 4

HTML 5

HTML 5ARIA

Analyser le HTML et l’usage des éléments (audit WCAG)

Réaliser des tests au clavier

Réaliser des tests avec un lecteur d’écran

Exemple de procédure de tests (NVDA)

Action Instructions Attendu Oui

Non

Ins + F7   Boite de dialogues liste des éléments  FlêcheBas Parcourir la liste des liens, chercher

"écrire", "message", "nouveau message"…. 

   

  Shift + TabFlècheDroiteTabFlêcheBas

Liste des titres

Parcourir la liste des titres

   

  Esc Fin de l'action

1. Afficher la boite liste des éléments

A propos des tests lecteur d’écran

HTML 0

HTML 4

HTML 5

HTML 5ARIA

Test Utilisateur

Test Restitution

Scénario de référence

HTML 0

HTML 4

HTML 5

HTML 5ARIA

1. Ecrire un message

2. Lire la liste des messages

3. Répondre à un message

4. Supprimer un message

Liste d’élément

f

d

h

Navigation rapide

Tab

Exploration

HTML 0Le trou noir

Une application en HTML 0

HTML 0<img src="client/images/….png">

<div id="gazouillis-tablist"><div class="gazouillis selected">Tous les gazouillis</div><div class="gazouillis-mine">Mes gazouillis</div><div class="gazouillis-others">Autres gazouillis</div></div>

Simulation de liens ou de

boutons via JS

Pas de structure

Pas d’alternative aux images

Une application en HTML 0

HTML 0

Simulation de liens ou de

boutons via JS

Pas de structure

Pas d’alternative aux images

Résultat

Action Oui non

1. Écrire un message Non

2. Consulter la liste des éléments Non

3. Répondre à un message Non

5. Supprimer un message Non

HTML 4

Le Web de Grand Papa

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

<button id="gazouillis-new" type="button" class="button"><img alt="Nouveau gazouillis" src="client/images/crayon.png"></button>

<h2 class="gazouillis selected"><a href="#" title="Tous les gazouillis, liste affichée">Tous les gazouillis</a>

Tous les gazouillis

Messages

Mes gazouillis

Messages

Tab !!

Une application en HTML 4

HTML 4

Utilisation d’éléments HTML

Natifs

Structuration

Alternatives pertinentes

Résultat

Action Oui non

1. Écrire un message Oui

2. Consulter la liste des éléments Oui

3. Répondre à un message Oui

5. Supprimer un message Oui

Parcours de tabulation

(Gestion du focus)

HTML 5

Le Web mutant

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

<header>

<header>

<nav>

<section> <aside>

<article>

<footer>

<footer>

<article>

<article>

Eléments sectionnants (outline)Eléments de regroupement

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

Outline Vs plan de titrage

Outline Titrage

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

Aria landmark (role)

banner

navigation

main<main> complementary

contentinfo

Une application en HTML 5

HTML 5

Section

Résultat

Action Oui non

1. Écrire un message Oui

2. Consulter la liste des éléments Oui

3. Répondre à un message Oui

5. Supprimer un message OuiARIA - Landmark

Regroupement

ARIA

Le Web accessible

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

1 Fenêtre Modale

role = ‘dialog’ (ou alertdialog) aria-labelledby tabindex

ARIA

InteractionClavier

Esc

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

2 Tabpanel

role = ‘tablist’ role= ‘tab’ aria-controls aria-selected tabindex

Role=‘tabpanel’ aria-labelledby

ARIA

InteractionClavier

tablist

tabpanel

Tab

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

3 Liveregion

aria-live=‘polite’ relevant=

all rext remove

ARIA

1. sur chaque tabpanel pour vocaliser les insertions de nouveaux messages

polite | all

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

3 Liveregion

aria-live=‘polite’ relevant=

all rext remove

ARIA

2. Par effet d’escalier les compteurs « répondre » sont également vocalisé (relevant=‘all’)Pas forcément très interessant par rapport à un contrôle de saisie

polite | all

Une application

HTML 0

HTML 4

HTML 5

HTML 5ARIA

3 Liveregion

3. Sur le compteur de la modale en mode « contrôle de saisie » (sur le blur) associé à un texte caché

<div aria-live="polite" aria-relevant="text" class="visually-hidden">Vous avez dépassé les 140 caractères autorisés. Il y a 29 caractères de trop.</div>

« Vous avez dépassé les 140 caractères autorisés. Il y a 29 caractères de trop »

polite | text

Une application en HTML 5-ARIA

HTML 5 -ARIA

Résultat

Action Oui non

1. Écrire un message Oui

2. Consulter la liste des éléments Oui

3. Répondre à un message Oui

5. Supprimer un message OuiARIA – Composant

Tabpanel Dialog

Liveregion

FIN