Conférence Accessibilité web

Meetup Accessibilité Web : l'objectif du « web pour tous »
par François Yon et Vanessa Sant'André
Accessibilité Web : l'objectif
du « web pour tous »

Accessibilité Web
10 et 20 % de la population est concernée *.
Les principales défciences sont de trois types :
● Sensorielles ;
● Mentales ;
● Motrices.
● Et les séniors
*L'enquête vie quotidienne et santé de l'INSEE de 2007 relève qu'une personne sur
10 déclare avoir un handicap, mais qu'une personne sur 5 est limitée dans ses
activités.

LE RGAA
Le RGAA a pour objectif d'encadrer l'accessibilité des contenus diffusés sous
forme numérique.
Dans sa version actuelle il constitue un référentiel de vérifcation du respect des
standards internationaux WCAG 2 0. Il a pour objectif de proposer des critères et
des tests vérifant que les règles d'accessibilité sont respectées.
Il ne constitue pas une nouvelle norme ou un nouveau standard mais offre une
méthodologie et un cadre opérationnel pour permettre la vérifcation de la mise
en œuvre des standards internationaux d'accessibilité.

LE WCAG 2
Des travaux ont été engagés sur le plan
international pour améliorer
l'accessibilité des contenus web, avec
l'initiative du groupe Web Accessibility
Initiative - WAI lancée en 1996 par le
World Wide Web Consortium (W3C).
La WAI a édité les WCAG 1(05/1999) et
ensuite 2 (12/2008) un guide des
recommandations pour améliorer
l'accessibilité des contenus web et
utilisées comme référence technique
pour le RGAA.
Les WCAG 2.0 adoptent une
approche thématique proposant
12 règles structurantes selon 4
principes fondamentaux :
Principe 1 : Perceptif
Principe 2 : Utilisable
Principe 3 : Compréhensible
Principe 4 : Robuste
En savoir +

1.IMAGES
Donner à chaque
image porteuse d'information une
alternative textuelle pertinente et une
description détaillée si nécessaire.
Lier les légendes à leurs images.
Remplacer les images textes par du
texte stylé lorsque c'est possible.
Principe WCAG : Perceptible
Mauvais exemple :
Gouvernement
Des images (nommée Graphique)
avec des noms qui ne veulent rien
dire. Exemple
23595934_127744127918676_17
383….(bloc Instagram)
www.gouvernement.fr
Auxiliaires des aveugles à Paris
Image porteuse d'information
sans texte alternatif, donc,
invisible pour les non-voyants !
lesauxiliairesdesaveugles.asso.fr
Bon exemple :
Le Monde
Des images bien commentées !
En plus, elles renvoient au détail
de l’article dont le titre est en
niveau 1 ! www.lemonde.fr
<img class="edgtf-light-logo"
src="http://www.polepixel.fr/wp-
content/uploads/2016/11/logo-polepixel.png"
alt="light logo"> ← !!!!!

GOUVERNEMENT
www.gouvernement.fr
<div class="rowInstaFeed"><div class="instaCell"><a class="gallery1 cboxElement" rel="gal1"
data="#InstaGouv
Drapeaux en berne pour les victimes du terrorisme.
#HommageNational #� #France #Matignon #Paris"
href="//scontent.cdninstagram.com/vp/dad2636e1f45bd0f1e8d6561f645f8eb/5B58579A/t51.2885-
15/s640x640/sh0.08/e35/29415486_849188095282532_4439199156862451712_n.jpg"><img
height="130" width="130"
src="//scontent.cdninstagram.com/vp/dad2636e1f45bd0f1e8d6561f645f8eb/5B58579A/t51.2885-
15/s640x640/sh0.08/e35/29415486_849188095282532_4439199156862451712_n.jpg"></a></div><div
class="instaCell"><a class="gallery1 cboxElement" rel="gal1" data="#InstaGouv
Édouard Philippe et Elisabeth Borne visitent le chantier de la ligne 15 Sud à Champigny-sur-Marne.

</div></div>

Auxiliaires des aveugles à Paris
http://www.lesauxiliairesdesaveugles.asso.fr
<img id="comp-j7ak4p4timgimage" alt="" data-type="image"
src="https://static.wixstatic.com/media/fc65ba_a6dda7fcd7504be0a494
2d9a9e735f50~mv2.jpg/v1/fll/w_1175,h_173,al_c,q_80,usm_0.66_1.00_
0.01/fc65ba_a6dda7fcd7504be0a4942d9a9e735f50~mv2.jpg"
style="width: 1175px; height: 173px; object-ft: cover;">

Le Monde
www.lemonde.fr
<a href="#">
<h1 class="tt3 ">
L’armée syrienne a repris
le contrôle de la Ghouta
<img width="644"
height="322"
src="img.jpg" alt="Des
soldats syriens à l’est de
Douma, dans la province
de la Ghouta orientale, le
8 avril 2018." > </div>
</a>

2. CADRES
Donner à chaque cadre en ligne un titre pertinent.
Principe WCAG : Robuste
Outil pour augmenter le
contraste des couleurs
GloogleMaps
SNAZZY Maps
https://snazzymaps.com

3. COULEURS Bon exemple :
HandiTourisme Paca
Permet l'utilisateur de modifer le
contraste de la page
www.handitourismepaca.fr
Ne pas donner l'information
uniquement par la couleur et utiliser
des contrastes de couleurs
sufsamment élevés.

Les couleurs informatives
Voir le code
Dans chaque page web, l'information ne doit pas être donnée uniquement par
la couleur. Exemple de description d'un élément graphique :
Les chatons en France
ont les couleurs
suivantes :
50% des chatons sont tigrés
20% des chatons sont gris
30% des chatons sont marrons

4. MULTIMÉDIA Bon exemple :
Ted
http://www.ted.comDonner si nécessaire à chaque
média temporel une
transcription textuelle, des
sous-titres synchronisés et une
audiodescription synchronisée
pertinents. Donner à chaque
média non temporel une alternative
textuelle pertinente. Rendre possible le
contrôle de la consultation de chaque
média temporel et non-temporel au
clavier et s'assurer de leur compatibilité
avec les technologies d'assistance.

Mauvais exemple :
FranceInfo
www.francetvinfo.fr
Avec la barre d’espace,
on peut arrêter la vidéo
mais je n’arrive pas à la
relancer (Où trouver
l’info) !
var buttonExample =
document.getElementById('example-
button');
// Exemple d'alternative au
clic dans un menu déroulant:
« keydown »
buttonExample.addEventListener('key
down', function(e) {
if(e.keyCode && e.keyCode == 13)
{ toggleMenu(document.getElement
ById('example-button-menu'));
}
});
buttonExample.addEventListener('cli
ck', function(e) {
toggleMenu(document.getElementById(
'example-button-menu'));
});

5. TABLEAUX Mauvais exemple :
TCL
On navigue dans le tableau avec les
touches Contrôle plus Alt plus fèches
de direction mais, on n’a que les
minutes et il faut se déplacer
horizontalement pour réussir à
entendre l’heure complète !
www.tcl.fr
Bon exemple :
NVDA
Tableau très lisible car on a même les
titres des colonnes
quand on circule dans ce tableau.
www.nvda-fr.org
Donner à chaque
tableau de données complexe, un
résumé et un titre pertinent,
identifer clairement les cellules d'en-
tête, utiliser un mécanisme pertinent
pour lier les cellules de données aux
cellules d'en-tête. Pour chaque
tableau de mise en forme, veiller à sa
bonne linéarisation.

TCL
www.tcl.fr
Critère 5.3 [A]
Pour chaque
tableau de mise
en forme, le
contenu linéarisé
reste-t-il
compréhensible ?
En savoir +

6. LIENS Mauvais exemple :
FAAF (Fédération des Aveugles et
Amblyopes de France) HAS (Haute
Autorité de Santé)
Sur la page d’accueil, il n’y a pas de
ponctuation entre les liens et la lecture
est moins claire. Idem également sur la
page Nos action !
www.aveuglesdefrance.org
Bon exemple :
BrailleNet
Titre des liens explicites
www.braillenet.org/
Donner des intitulés de lien
explicites, grâce à des informations
de contexte notamment, et utiliser
le titre de lien le moins possible.

FAAF (Fédération des Aveugles et Amblyopes de France)
www.aveuglesdefrance.org
La solution
<a href="#block-menu" tabindex="1">Aller au menu</a>
<a href="#main" tabindex="2">Aller au contenu</a>
<a href="/contact" tabindex="3">Nous contacter</a>

7. SCRIPTS Mauvais exemple :
HAS
Il y a des liens « Lire la suite » !
www.has-sante.fr
Bon exemple :
Bootstrap
On peut facilement faire défler les
diapositives dans un sens ou dans
l’autre.
Voir un exemple
Donner si nécessaire à chaque
script une alternative pertinente.
Rendre possible le contrôle de
chaque code script au
moins par le clavier et la souris et
s'assurer de leur compatibilité avec
les technologies d'assistance.

Haute Autorité de Santé :
www.has-sante.fr
ERRATA :
<li>
<img
src="hospitalisation_a_domicile.jpg
" alt="">
<div class="description">
<p>HAD : La HAS a
développé un outil pour les
professionnels de santé</p>
<a href="#">Lire la suite</a>
</div>
</li>
SOLUTION :
<li>
<img src="hospitalisation_a_domicile.jpg" alt="">
<div class="description">
<a href="#">HAD : La HAS a développé un outil pour les
professionnels de santé
<span class= "btn">Lire la suite</span></a>
</div>
</li>
Le lecteur d'écran peut naviguer de
lien en lien. Un lien que contient
uniquement l'information « Lire la
suite » n'est pas explicite

8. ÉLÉMENTS
OBLIGATOIRES
Mauvais exemple :
Sciences-u :
<html
xmlns="http://www.w3.org/1999/xhtml
" xml:lang="fr">
En savoir +
www.sciences-u-lyon.fr
Bon exemple :
Fonds pour l’insertion des personnes
handicapées
Site labellisé AAA avec des landmarks
(rôle) et balises sémantiques
www.fphfp.fr
Vérifer que chaque page web a un
code source valide selon le
type de document, un titre pertinent et
une indication de langue par défaut.
Vérifer que les balises ne sont pas
utilisées
uniquement à des fns de présentation,
que les changements de langues et de
direction de sens de lecture sont
indiqués.

9. STRUCTURATION
DE L'INFORMATION
Utiliser des titres, des listes, des
abréviations et des citations pour
structurer l'information. S'assurer
que la structure du document est
cohérente.
Mauvais exemple :
Olympique Lyonnais :
Sur la page de garde, il n’y
a que des titres de niveaux
1. Cela ne refète pas une
structuration de
l’information !
www.olweb.fr
Bon exemple :
BLABLACAR
L'accueil est bien structuré
avec une bonne
arborescence des titres,
Les boutons sont bien
placés.
Pas de plan du site (mais
quand c’est bien structuré,
il n’y en a pas trop
besoin !).
www.blablacar.fr/

10. PRÉSENTATION
DE L'INFORMATION
Bon exemple
AVH Angoulême
L'accueil du site est
bien structurée !
angouleme.avh.asso.fr
Mauvais exemple
Crédit Agricole
Le bandeau cookie est
au milieu de la page au
niveau de la structure
html...
ca-centrest.fr
Utiliser des feuilles de styles pour contrôler la
présentation de l'information. Vérifer l'effet de
l'agrandissement des taille des caractères sur la
lisibilité. S'assurer que les liens sont
correctement identifables, que la prise de focus
est signalée, que l'interlignage est sufsant et
donner la possibilité à l'utilisateur de contrôler la
justifcation des textes. S'assurer que les textes
cachés sont correctement restitués et que
l'information n'est pas donnée uniquement par la
forme ou la position d'un élément.

11. FORMULAIRES
Associer pour chaque formulaire chacun de
ses champs à son étiquette, grouper les
champs dans des
blocs d'informations de même nature,
structurer les listes de choix de manière
pertinente, donner à chaque bouton un
intitulé explicite. Vérifer la présence d'aide
à la saisie, s'assurer que le
contrôle de saisie est accessible et que
l'utilisateur peut contrôler les données à
caractère fnancier, juridique ou personnel.
Mauvais exemples
Mon Devis Fenêtre
Il s'agit d'un formulaire
sans label ou aucune
corrélation entre les
champs
www.mon-devis-fenetres.fr:
Bon exemple
Les formulaires faits avec
Bootstrap
Voir un exemple

Devis Fenêtres :
https://www.mon-devis-fenetres.fr
ERRATA :
<form>
<input type="hidden"
id="INPUT_typedefenetre"
name="typedefenetre">
<div id="typedefenetre">
<img class="img-
responsive center-block"
src="images/pvc.jpg">
</div>
</form>

12. NAVIGATION
Faciliter la navigation dans un
ensemble de pages par au moins deux
systèmes de navigation différents (
menu de navigation, plan du site ou
moteur de recherche), un fl d'Ariane et
l'indication de la page active dans le menu
de navigation. Identifer les groupes de liens
importants et la zone de contenu et
donner la possibilité de les
éviter par des liens de navigation interne.
S'assurer que l'ordre de tabulation est
cohérent et que la page ne comporte pas de
piège au clavier.
Principe WCAG : Utilisable
Bons exemples
Gouvernement
Liens rapides en header pour y
accéder directement au contenu et
menu
http://www.gouvernement.fr
Gouvernement – Solidarité
Leur plan du site est bien fait
www.solidarites-sante.gouv.fr

GOUVERNEMENT :
www.gouvernement.fr
<div id="liens-acces-rapide">
<a href="/accueil-gouvernementfr#content" tabindex="1">Aller au contenu</a>
<a href="/accueil-gouvernementfr#search-block-form" tabindex="2">Aller à la recherche</a>
<a href="/accueil-gouvernementfr#nav" tabindex="3">Aller au menu</a>
</div>

13. CONSULTATION
Vérifer que l'utilisateur a le contrôle des
procédés de rafraîchissement, des
changements brusques de luminosité, des
ouvertures de nouvelles fenêtres et des
contenus en mouvement ou clignotants. Indiquer
lorsqu'un contenu s'ouvre dans une nouvelle
fenêtre et donner des informations relatives à la
consultation des fchiers en téléchargement. Ne
pas faire dépendre l'accomplissement d'une
tâche d'une limite de temps sauf si elle est
essentielle et s'assurer que les données saisies
sont récupérées après une interruption de
session authentifée. S'assurer que les
expressions inhabituelles et le jargon sont
explicités. Proposer des versions accessibles ou
rendre accessibles les documents en
téléchargement.
Les autorités américaines ont interpellé un homme
soupçonné d'avoir provoqué la crise d'épilepsie d'un
journaliste en lui envoyant un message sur Twitter
avec une lumière stroboscopique pour le punir de ses
critiques visant Donald Trump.
Publié le 18/03/2017 à 22:44
Par Le Figaro.fr avec AFP

LES ARIAS
ACCESSIBLE RICH
INTERNET APPLICATIONS
(ARIA)
ARIA est une surcouche sémantique à
par-
dessus un langage existant tel que
HTML, SVG, XML, etc. Il se compose
de rôles, d’états et de propriétés.
EX : une case à cocher pourra avoir un état non
coché (aria-checked="false") qui sera modifé
ultérieurement via javascript pour être passé à
coché (aria-checked="true").
<span id="check" role="checkbox" aria-
checked="false">Choix 1</span>
Le rôle : affecte une valeur
sémantique à un élément afn de
décrire son contenu.
Les propriétés et les états : Les
propriétés et les états
correspondent à des attributs comme
l’attribut id ou class sur
un élément HTML. Ce sont des valeurs
que l’on vient appliquer à un élément
pour lui permettre de renvoyer des
informations spécifques.
Liste des ARIAS

Role
En savoir plus
<form action="#" method="post">
<div role="search">
<label
for="search">Rechercher</label>
<input type="search" id="search" aria-
describedby="search-help">
<div id="search-help">Recjercher votre
produit dans notre magnifque
catalogue</div>
<button type="submit">Go</button>
</div>
</form>
INCORRECT :
<div role="radioGroup">...</div>
<div role="RADIOGROUP">...</div>
<a href="home/" aria-current="Page">home</a>
<form action="#" method="post">
<div role="search">
<label
for="search">Rechercher</label>
<input type="search" id="search" aria-
describedby="search-help">
<div id="search-help">Recjercher votre
produit dans notre magnifque
catalogue</div>
<button type="submit">Go</button>
</div>
</form>
<div role="radiogroup">...</div>
<a href="home/" aria-
current="page">home</a>

Les propriétés et les états
<img alt="chien" aria-describedby="mydog" src="monchien.jpg" />
<div id="mydog">ici la description complète de mon chien</div>

<label for="codepostale">Code postal*</label><input type="text" value="" id="codepostale" aria-required="true"
aria-invalid="false"/>

<label for="codepostale">Code postal*</label><input type="text" value="" id="codepostale" aria-required="true"
aria-invalid="true"/>
--------
<div id="xxx">description du fonctionnement du menu</div>
<ul aria-describedby="xxx" role="menubar" aria-controls="yyy">
<li role="menuitem">ouvrir</li>
<li role="menuitem">édition</li>
</ul>
<div id="yyy">partie du contenu sur lequel s’applique les actions du menu</div>

Les propriétés et les états
<img aria-grabbed="false" alt="Glissez l’image" src="xxx"/>
<div aria-dropeffect="copy"></div>
<img aria-grabbed="true" alt="Déposez l’image" src="xxx"/>
<div aria-dropeffect="copy"></div>
<img aria-grabbed="false" alt="Glissez une nouvelle image" src="xxx"/>
<div aria-dropeffect="copy"><img aria-grabbed="false" alt="Retirer
l’image" src="xxx"/></div>

Références
RGAA : Référentiel Général D'accessibilité Pour Les Administrations
https://references.modernisation.gouv.fr/rgaa-accessibilite/introduction-RGAA.html
https://references.modernisation.gouv.fr/rgaa-accessibilite/
https://references.modernisation.gouv.fr/rgaa-accessibilite/guide-accompagnement-RGAA.html
WCAG 2
http://www.w3.org/Translations/WCAG20-fr
https://www.w3.org/WAI/WCAG20/quickref/
http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/intro.html
Braille Net : http://www.braillenet.org/
Niveaux d'accessibilité - méthodologie de vérifcation
https://references.modernisation.gouv.fr/421-niveaux-de-conformite-aux-normes-daccessibilite-0
http://wiki.accede-web.com/notices/graphique-ergonomique/grille-de-correspondances-wcag-accessiweb-rgaa
Synthèse des 13 critères du RGAA version 2017
une méthodologie pas à pas pour faire un audit RGAA ;
un guide intégrateur
un guide développeur
un guide concepteur
un guide décideur
un guide contributeur
un guide lecteur d’écran : évaluer l’accessibilité à l’aide d’un lecteur d’écran
un guide impacts utilisateurs : piqûre de rappel sur l’impact utilisateur de chaque critère
une étude de l’accessibilité des principales bibliothèques JavaScript. Il ne s’agit pas juste d’un état des lieux, il y a également les corrections qui
sont disponibles
Logiciels de lecture d'écran :
NVDA (pour PC : http://www.certam-avh.com/content/nvda-0) ou VoiceOver (Pour Mac - aller sur Préférences / Accessibilité / activer
VoiceOver)
Validateurs :
https://validator.w3.org/
http://wave.webaim.org/
magazineduwebdesign.com

Bonus
Balise CSS3 Speechs :
https://www.w3.org/TR/css3-speech/#css-values
Remplace l'ancienne balise CSS2 https://www.w3schools.com/cssref/css_ref_aural.asp
Rétablissons l'outline
https://openweb.eu.org/articles/retablissons-l-outline
Signaler le focus améliore la navigation
http://romy.tetue.net/signaler-le-focus-ameliore-la-navigation
Funkify | Disability simulator
http://www.funkify.org/
Liste de sites labellisés
http://accessiweb.org/index.php/galerie.html
Exemple de page Aide
http://www.handitourismepaca.com/paca/aide.asp

Auxiliaires des aveugles à Lyon
http://www.lesauxiliairesdelyon.fr
La balise alt parfaite : <img src="logo_auxiliaires.jpg" alt="Logo de
l'association sur un fond bleu portant le nom de l'association et, en
stylisé les silouettes d'un non-voyant accompagné de son auxiliaires.">

Le Monde
www.lemonde.fr Exemple d'un contenu
éditorial dans une balise
sémantique <figure> :
<figure role="group">
<img src="…"
alt="Occupation de
l'université de Tolbiac. Ici le 5
avril. [photo 1]" />
<figcaption>
Photo 1 : Une
mobilisation nationale est
organisée mardi. Une
quinzaine d’universités, sur
un total de 70, font l’objet de
blocages.
</figcaption>
</figure>
Le texte de remplacement de l’image
(l’alt pour la balise <img>) doit contenir
une référence à la légende
correspondante (balise <figcaption>).
Ex : [photo 1]

Libération – les images svg
www.liberation.fr
<a href="http://www.liberation.fr/direct/" class="button v-centered js-nav-
live-button" (on ajoute un title dans le lien) title= "Lire l'information en
direct">
<span class="button-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="26"
height="22" viewBox="0 0 26 22">
(ou un <title> à intérieur du svg : )
<title>Lire l'information en direct</title>
<path class="stroke-anim" stroke="#000" stroke-width="2" stroke-
miterlimit="10" d="M15.5 8c.7-1 2-2 4-2 3 0 5 2.1 5 5s-2.1 5-5 5c-3.3 0-5-
2.1-6.5-5s-3.2-5-6.5-5c-2.9 0-5 2.1-5 5s2 5 5 5c2 0 3.2-.9 4-2"
fll="none"></path>
</svg>
</span>
</a>

GOUVERNEMENT
www.gouvernement.fr
<div class="contenu-social ">
L’agenda prévisionnel du Premier ministre @EPhilippePM, mercredi 6 au samedi 9
décembre 2017 est en ligne
<a href="https://t.co/RD4fHUGseY">https://t.co/RD4fHUGseY</a>
<a href="https://t.co/me0kd267a9">https://t.co/me0kd267a9</a>
</div>
<div class="tweetImg">
<div class="image-cropper">
<a class="tweet-link" data-
href="https://pbs.twimg.com/media/DQTcwt9X4AAlKeV.jpg" href="">
<img class="imgSocial centered"
src="https://pbs.twimg.com/media/DQTcwt9X4AAlKeV.jpg" />
</a>
</div>
</div>
NOT
OK

TCL :
http://www.tcl.fr
ERRATA :
<div class="desclong-toggle"
rel="#descriptionlongue">
<div class="label">> Version texte de
l'infographie</div>
.desclong-toggle:hover {
cursor: pointer; }
.desclong-toggle .label:hover {
text-decoration: underline; }
ERRATA (image redondante) :
<img
src="/var/tcl/storage/images/media/lib
rairie/type-de-ligne/met/9401-11-fre-
FR/MET.png" width="30" height="23"
alt="Métro">
<img src="/var/tcl/storage/images/me-
deplacer/toutes-les-lignes/a/8692-7-fre-
FR/A.png" width="23" height="23"
alt="Métro ligne A: Perrache.Vaulx-en-
Velin La Soie">
SOLUTION :
Cacher quelques images avec aria-
hidden="true".
<img
src="/var/tcl/storage/images/media/lib
rairie/type-de-ligne/met/9401-11-fre-
FR/MET.png" width="30" height="23"
alt="Métro" aria-hidden="true">

TCL :
http://www.tcl.fr
ERRATA :
<div class="label">> Version texte de
l'infographie</div>
cursor: pointer; }
ERRATA (navigation confuse)
SOLUTION :
1) Utilisation de la balise tabindex
L'attribut universel tabindex est un entier indiquant si
l'élément peut capturer le focus et si c'est le cas, dans
quel ordre il le capture lors de la navigation au clavier
(généralement à l'aide de la touche Tab).
En savoir plus : MDN web docs
2) On vide le alt
Exemple :
<tr>
<td colspan="2" class="COL-5" tabindex= "-1">
<img src="picto-marche.png" alt="" width="24"
height="24">
<img src="picto-attendre.png" alt="Attente"
width="24" height="24">
<td colspan="2" class="COL-6" tabindex= "1">Marcher 2
min (120m) + Attendre 3 min</td>
</tr>
Et bonus :
Les balises thead, tfoot et tbody peuvent aussi améliorer
l'accessibilité de la page, en permettant aux navigateurs
non graphiques de restituer les tableaux d'une manière
plus facile à lire ou à entendre. Exemple :
https://www.nvda-fr.org/doc/keyCommands.html
TABINDEX
● Une valeur négative : l'élément
peut capturer le focus mais ne
peut pas être atteint via la
navigation au clavier ;
● 0 : l'élément peut capturer le
focus et être atteint via la
navigation au clavier, cependant
son ordre relatif est défni par la
plateforme, généralement selon
l'ordre des éléments du DOM ;
● Une valeur positive : l'élément
peut capturer le focus et peut être
atteint via la navigation au clavier,
l'ordre relatif dans la navigation
est défni par la valeur de l'attribut.
Les navigations seront
parcourues dans l'ordre croissant.
Source : MDN web docs

GOUVERNEMENT :
La politique du handicap,
une priorité du quinquennat
ERRATA (la version texte n'est pas visible dans une navigation par liens ou
titres. Ce type de navigation est très courant pour les utilisateurs de lecteur
d'écran – malvoyants, non-voyants) :
<div class="desclong-toggle" rel="#descriptionlongue">
<div class="label">> Version texte de l'infographie</div>
cursor: pointer; }
NOT
OK

GOUVERNEMENT :
La politique du handicap,
une priorité du quinquennat
SOLUTION :
<div class="label"><a href= "#" > > Version
texte de l'infographie</a></div>
OU
<div class="label"><h3> > Version texte de
l'infographie</h3></div>

Pôle Pixel :
www.polepixel.fr/services/
<div class="edgtf-info-card-holder">
<div class="edgtf-info-shader">
<div class="edgtf-image-1" style="background-image:
url(http://www.polepixel.fr/wp-
content/uploads/2016/11/servicesv3.png)"></div>
<div class="edgtf-image-2" style="background-color: #f9668d
"></div>
</div>
<a href="http://www.polepixel.fr/services/services-aux-residents/"
target="_blank"></a>
<div class="edgtf-info-card-holder-inner">
<div class="edgtf-info-card-icon-holder">
<span class="edgtf-icon-shortcode normal ">
<i class="edgtf-icon-font-awesome fa edgtf-icon-element"
style=""></i>
</span>
</div>
<div class="edgtf-info-card-title-holder">
<h3 style="color: #000000">Service aux résidents</h3>
</div>
<div class="edgtf-info-card-text-holder">
<p style="color: #000000">Le Pôle PIXEL propose une
large gamme de services pour les entreprises résidentes.</p>
</div>
</div>
</div>
NOT
OK

Pôle Pixel :
www.polepixel.fr/services/
SOLUTION :
La navigation avec un lecteur d'écran peut se faire à travers des
titres et liens. Un lien doit donc impérativement contenir une
information explicite.
Un lien vide va être lu en format permalien (ex : services-aux-
residents)
<h3 style="color: #000000">Service aux résidents</h3>
<a href="http://www.polepixel.fr/services/services-aux-residents/"
target="_blank"><p style="color: #000000">Le Pôle PIXEL propose
une large gamme de services pour les entreprises
résidentes.</p></a>

La Redoute, les liens vides sont lus par les lecteurs d'écran !
www.laredoute.fr
<li style="position:relative" id="zsa2">
<a style="position:absolute;display:block;left: 885px;top: 590px;width: 295px;height: 30px;z-index:10;"
href="/boutique-noel-ah2017.aspx#opeco=hp:zsa2:avant_noel_pap:ah17s49" title="boutique de noel"></a><div
class="fnFloat"></div>
</li>

Merci !

Conférence Accessibilité web

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Conférence Accessibilité web

Similaire à Conférence Accessibilité web (20)

Conférence Accessibilité web