Accessibilité et HTML5

1. ACCESSIBILITÉ WEB
Normes et bonnes pratiques
Pour des sites plus accessibles

2. QU’EST-CE QUE
L’ACCESSIBILITÉ DU
WEB ?

3. DÉFINITION OFFICIELLE DE
L’ACCESSIBILITÉ
Mettre le web est ses services à la disposition de
tous les individus, quels que soient leur matériel ou
logiciel, leur infrastructure réseau, leur langue
logiciel réseau
maternelle, leur culture, leur localisation
géographique, ou leurs aptitudes physiques ou
mentales.

4. Accéder
L’ACCESSIBILITÉ, POUR QUI ?
Percevoir
 Handicaps Visuels : Image, vidéo,
signalétique
 Handicaps Auditifs : son( paroles, Utiliser
musique )
 Handicaps Moteurs : difficultés
d’utilisation des souris et clavier traditionnels. Comprendre
 Handicaps Cognitifs : sens et
compréhension
 La Barrière de la langue
 Autres Facteurs Handicapants
Accessibilité

5. COMMENT SURFE LES HANDICAPÉS
Mes logiciels et
les outils
Sont prêts
Tablette Braille
Les sites et les
Lecteur d’écran application
Non
Clavier adapté Logiciels

6. WEB CONTENT ACCESSIBILITY
GUIDELINES ( WCAG) 2.0

7. WEB CONTENT ACCESSIBILITY WCAG
GUIDELINES (WCAG) 2.0
L’Objectif
Personne Navigateur principal est
essentiellement
de s’assurer que
+ + lorsque l’on met à
disposition des
Système Technologie contenus dans cet
d’exploitation d’assistance exemple complexe
+ « tout marche »
API(s)
d’Accessibilité

8. WEB CONTENT ACCESSIBILITY Les techniques
sont
GUIDELINES (WCAG) 2.0 généralement
liées à des
technologies
Ensemble de recommandations Général
destinées à rendre les contenus Web HTML
Css
accessibles aux personnes en situation Serveur
de handicap, notamment. Text
4 principes PDF
Flash
12 règles
Silverligth
61 critères de succès Javascripte
570 techniques …

9. MICROFORMAT
S

10. QUE SONT LES MICROFORMATS ?
Les microformats sont un moyen d'ajouter une
syntaxe simple à des items de données lisibles par
des humains, comme des événements, des détails
sur un contact ou des endroits, sur des pages web,
de manière à ce que l'information puisse être
extraite par le logiciel et indexée, cherchée,
sauvegardée, cross-référencée ou combinée.

11. LES PLUS
CONNUS
 Hcard
 Hcalendar
 XFN
 RelNoFollow
 RelLicence
 RelTag

12. COMMENT ÇA
MARCHE ?
Principalement avec deux attributs :
Class : utilisé principalement à des fins d'identification d'élément
pour la modification du style de la page via les CSS, mais permettant
également d'ancrer des microformats.
 L'attribut Rel : il permet de préciser le type de relation entre
la page source (celle dans laquelle on trouve le lien) et la page cible
(celle vers laquelle pointe le lien).

14. ESSAYONS HCARD

15. BONNES PRATIQUES POUR
SITE ACCESSIBLE

16. LES RÔLES ET
PROPRIÉTÉS DE WAI-
ARIA

17. HTML5 COMPATIBLE AVEC ARIA ?
ARIA : Accessible Rich Internet Application
 rôle, état, propriété pour les aides techniques :
<ul role="tablist">
<li role="presentation">
<a id="tab1" href="#demo" aria-controls="demo" role="tab" aria-selected="true"
tabindex="0">Dogs</a>
</li>
…
<div id="demo" role="tabpanel" aria-hidden="false" aria-expanded="true" aria-
labelledby="tab1">
<h2>Dogs</h2>…

18. POINTS DE REPÈRE (LANDMARK
ROLES)
 Les « points de repère » (ou landmark Roles)
délimitent les grands zones du documents ou de
l’application web

19. IDENTIFIER LES PRINCIPALES
ZONES DE LA PAGE AVEC
L'ATTRIBUT ROLE
Les principales zones de la page doivent être
identifiées à l’aide de l’attribut ARIA role.

20.  role="banner" pour délimiter une zone de
contenu qui identifie le site, comme une
bannière avec un logo, un slogan et/ou un
champ de recherche.
 • role="search" pour délimiter une zone
destinée à la recherche, comme un
formulaire de recherche.
 • role="navigation" pour délimiter les menus
ou les éléments de navigation principaux.
 • role="main" pour délimiter la zone de
contenu principal de la page.

21. ATTENTION
 Une page ne doit contenir qu’un seul
role="main".
 Il est tout à fait possible d’imbriquer plusieurs
rôles ARIA : role="search" dans role="banner",
par exemple.
 Il est recommandé de ne pas charger la page en
attributs role="navigation" : inutile d’identifier
chaque système de pagination ou chaque lien,
seuls les menus principaux doivent être
identifiés.

22. PERSONNALISATION DES FONCTIONS
NATIVES

23. METTRE EN PLACE UNE HIÉRARCHIE
DE TITRES LOGIQUE ET EXHAUSTIVE
AVEC LES BALISES <H1> À <H6>
 Pour mettre en place une hiérarchie de
titres logique et exhaustive, il faut imaginer
que les titres forment la « Table des
matières » de la page. Est-elle logique ?
Exhaustive ?

24.  Il n’est jamais gênant d’utiliser plusieurs <h1>
dans une page si plusieurs titres de premier
niveau sont présents.

25.  Une bonne pratique d’accessibilité consiste à ne
pas ajouter de titres cachés.

26.  L’attribut role peut être ajouté sur n’importe
quelle balise HTML comme <div>, <form>,
<nav>, etc.

27. ORDRE DU FLUX HTML
 Écrire le code HTML en suivant la logique de
l'ordre de lecture

28. ENCODAGE
 Veiller au bon codage de tous les caractères
 Penser également à vérifier le bon codage des
caractères qui ne sont pas spontanément affichés
à l’écran

29. LANGUE DE LA PAGE
 Renseigner la langue principale de la page avec
l'attribut lang sur la balise <html>
 Utiliser l’attribut lang pour signaler les
changements de langue

30.  Ne pas utiliser d'attributs ou de balises HTML
destinés exclusivement à la mise en forme.
 des attributs : align, alink, background, basefont,
bgcolor, border, color, link, text, vlink, height et
width.
 les balises : <basefont>, <blink>, <center>, <font>,
<marquee>, <s>, <strike>, <tt> et <u>.

31. IMAGES DÉCORATIVES ET
ILLUSTRATIVES
 Utiliser une alternative vide (alt="") sur les
images décoratives et illustratives

32. IMAGES INFORMATIVES
 Ne pas utiliser CSS pour afficher les images
informatives.
 Renseigner un court texte de remplacement dans
l’attribut alt qui décrit globalement la fonction de
l’image.

33. INTITULÉS DES LIENS ET DES
BOUTONS
 Les liens et les boutons ne doivent jamais être
vides et doivent donc toujours posséder un
intitulé.

34. NOUVELLES FENÊTRES
 Signaler l'ouverture des nouvelles fenêtres

35. FORMULAIRES
 Utiliser la balise <label> ainsi que les attributs
for et id pour associer les champs à leurs
intitulés
 Parfois, certains champs n’ont pas d’intitulé
visible. Dans cette situation, utiliser l’attribut
title pour associer tout de même un intitulé au
champ.

36.  Les balises <fieldset> et <legend> ne sont à
utiliser que lorsque plusieurs groupes de champs
disposent d’intitulés identiques. Par exemple :
 Une série de questions sur une même page avec
comme réponses possibles “oui” ou “non”.
 Une liste de participants à un évènement avec, à
chaque fois, “nom” et “prénom”.

37.  Une bonne pratique d’accessibilité consiste à
utiliser également les balises <fieldset> et
<legend> lors de l’intégration de listes de boutons
radio ou de cases à cocher dans la page.

38. TITRE DE LA PAGE
 Mettre à jour le <title> de la page quand un
formulaire renvoie une erreur ou un message de
confirmation

39. CAPTCHA (SYSTÈMES ANTI-SPAM)
 Indiquer dans l'alternative des CAPTCHA
graphiques où trouver la version non graphique
du CAPTCHA

40. TABLEAUX DE MISE EN FORME
Ne pas utiliser de balises ou d'attributs propres
aux tableaux de données dans les tableaux de
mise en forme
 Que les balises <caption>, <th>, <thead> et <tfoot>
ne doivent pas être utilisées dans les tableaux de
mise en forme.
 Que les attributs scope, headers, axis, colgroup et
summary ne doivent pas être utilisés dans les
tableaux de mise en forme.

41. TABLEAUX DE DONNÉES
 Donner un titre à chaque tableau de données
avec la balise <caption>
 Utiliser l'attribut scope pour associer les cellules
aux entêtes des tableaux de données simples
 Utiliser l'attribut headers et id pour associer les
cellules aux entêtes des tableaux de données
complexes

42. CONTENUS MASQUÉS
 Cas 1 : ces éléments sont masqués mais peuvent
être affichés sur action de l'utilisateur
 Cas 2 : ces éléments sont masqués mais ne seront
jamais affichés
 Cas 2.1 : les éléments inutiles pour tous les
utilisateurs
 Cas 2.2 : les éléments qui sont utiles pour les
utilisateurs de lecteurs d'écran, mais inutiles pour les
autres utilisateurs

43. L’ACCESSIBILITÉ, ÇA
DEMANDE DE L’HABITUDE !