L'accessibilité, mon ingrédient secret

Jennifer Noesser

L'accessibilité
mon ingrédient secret

par Jennifer Noesser - Kiwiparty 2013

Jennifer Noesser

#CSS #HTML #Accessibilité (#bière #photos #chat #concerts)

@bruitsilencieux

L'accessibilité c'est plein de
<legend>
urbaines

Les légendes urbaines :

  1. L’accessibilité ce n'est que pour les personnes aveugles

#1 Je sais <baliser>

Utiliser les balises HTML pour leur forme

Manger avec une pelle et boire dans une casserole

Photo : Flickr

Un code HTML sémantique

J'utilise les balises HTML pour leur sens, leur fonctionnalité,
et non pour leur forme !

#2 Une page structurée

Une page web non structurée

Un livre sans titre et sans chapitre

Photo : Jennifer Noesser

Une page web (mal) structurée

			<body>
			    <h2>Titre de mon site ?</h2>
			    <h2>Titre de niveau 2</h2>
			        <h3>Titre de niveau 3</h3>
			            <h4>Titre de niveau 4</h4>
			                <h5>Titre de niveau 5</h5>
			                    <h6>Titre de niveau 6</h6>
			        <h2>Un autre titre de niveau 2</h2>
			            <h4>Titre de niveau 4 parce que j'adore le stÿle</h4>
			        <h2>Un autre titre de niveau 2</h2>
			            <h6>Mon texte doit faire 12px, alors je met un H6</h6>
			</body>
		

Une page web (bien) structurée

			<body>
			    <h1>Titre de niveau 1</h1>
			        <h2>Titre de niveau 2</h2>
			            <h3>Titre de niveau 3</h3>
			                <h4>Titre de niveau 4</h4>
			                    <h5>Titre de niveau 5</h5>
			                        <h6>Titre de niveau 6</h6>
			        <h2>Un autre titre de niveau 2</h2>
			                <h3>Titre de niveau 3</h3>
			                <h3>Titre de niveau 3</h3>
			        <h2>Un autre titre de niveau 2</h2>
			     <h1>Un autre H1</h1>
			</body>
		

#3 ALT là !

Une image sans texte alternatif

Une bouteille de vin sans étiquette

Photo : Flickr

Attribut ALT sur mes images

L'attribut "alt" est obligatoire !

#4 Prochaine
destination ?

Un lien sans intitulé

Les touches d'un clavier sans inscription

Photo :

Les liens ont des intitulés et destinations

Chaque lien doit avoir un intitulé explicite et une destination.
Les liens vides sont à proscrire !

#5 Noir & Blank

Un lien qui s'ouvre dans une nouvelle fenêtre

Une nouvelle route inconnue et sans retour

Photo : Flickr

"Ouvrir dans une nouvelle fenêtre"

Toujours laisser le choix à l'utilisateur !

Dans certains cas, l'ouverture dans une nouvelle fenêtre/onglet peut être gênante.

#6 Out(of)line

L'absence d'outline sur les éléments cliquables

Essayer de viser sans jamais voir la cible

Photo : Flickr

Des liens mis en évidence

Toujours mettre en évidence les liens ou les éléments de formulaire ciblés.

Ne jamais mettre la propriété CSS "outline" à 0.

Se méfier des reset CSS !

Personnaliser la propriété "outline" aux couleurs du site.

#7 Ma souris s'est échappée

La navigation clavier

La navigation au clavier doit être simple et cohérente.

Se fait à l'aide de la touche "tabulation" du clavier et parfois avec les touches de direction.

Au cours de l'intégration :

#8 Le grand contournement

Une page sans lien d'évitement

Un ascenceur sans bouton qui s'arrête à chaque étage

Photo : Flickr

Les liens d'évitements

Les liens d'évitements, ou liens d'accès rapide, permettent de contourner des groupements de liens.

Ils sont souvent, et volontairement, oubliés lors de la conception du design du site.

Mais on peut quand même les intégrer à nos pages !

#9 Une page en
pleine <form>

Une formulaire sans <fieldset> et sans <label>

Une feuille de déclaration d'impôts sans les intitulés devant chaque case

Un formulaire parfait

Chaque champ (input, select, textarea) est lié à une étiquette (label).

Les informations similaires sont regroupées à l'aide d'un <fieldset> + <legend>

#10 De beaux tableaux

Un tableau mal codé

Une masse d'informations et de mots sans lien

Ils sont beaux mes tableaux

Utiliser les tableaux pour afficher des données uniquement.

Pas de tableau de mise en page !

Ils sont beaux mes tableaux

Quelques exemples et très bonnes ressources :

Creating Accessible Data Tables (par Frank M. Palinkas, Dev Opera)

Au Tableau ! (par Roger Johansson, Pompage)

Des tableaux accessibles ? (par Accessibilité Web)

#11 Zo(oooooo)om

Zoomer et consulter sans problème

Un contenu visible et lisible même lorsque le texte est agrandi (jusqu'à 200%).

La propriété CSS "height" est à bannir !

Test, test et re-test tout au long de l'intégration !

#12 La <lang>
dans sa poche

Une page sans changement de langue

Un français à l'étranger

Photo : Flickr

Indiquer la langue du contenu

La langue principale d'une page web doit toujours être indiquée,
à l'aide de l'attribut "lang".

Ressources : Spécifier la langue d’un document (X)HTML (Open Web)

#13 Pas d'image

Une page sans couleur de fond

Vivre dans un labyrinthe de verre

Photo : Flickr

Tout fonctionne sans image

Un contenu lisible même lorsque les images de fonds sont désactivées.

Il faut toujours prévoir une couleur de fond, y compris sur <body>.

#14 Une vie sans JS

Une page qui ne fonctionne pas sans JS

Un portail électrique inutilisable sans courant

Photo : Flickr

Tout fonctionne sans javascript

Un contenu accessible même lorsque javascript est désactivé.

Proposer une alternative à toutes les fonctionnalités développées en JS.

Et avec HTML5 ?

Les choses changent un peu : on a (parfois) besoin de JS.

Tout fonctionne sans javascript

Quelques alternatives :

#15 Ça bouge !

Une page qui bouge dans tous les sens

Vivre constamment dans une boîte de nuit

Photo : Flickr

Contrôle des animations

Éviter les animations qui s'activent automatiquement.

Intégrer un moyen afin de mettre en pause et de relancer l'animation.

Il faut un bouton "Lire" - "Arrêter" partout où ça bouge !
(Même si le design n'en prévoit pas)

#16 Sous-titres

Des vidéos sans sous-titres

Un karaoké sans les paroles

Photo : Flickr

Des sous-titres et bien plus

Chaque vidéo doit proposer des sous-titres.

Mais aussi un résumé et une transcription textuelle.

Et les contenus audio ?

Même combat : un résumé et une transcription textuelle.

Le plus dur pour la fin !

#17 Vive les couleurs

La couleur vs. les informations

Ne pas donner d'information par la couleur !

J'allerte le client/graphiste/chef de projet

Je me bat avec le client/graphiste/chef de projet

Je suis fou, je corrige tout ça au cours de l'intégration !

#18 Ça manque de contraste

Ça manque de contraste

Le contrast entre le texte et l'arrière plan doit être suffisant.

J'allerte le client/graphiste/chef de projet

Je me bat avec le client/graphiste/chef de projet

Je suis fou, je corrige tout ça au cours de l'intégration !

Je ne suis pas fou, je laisse malheureusement tomber...

Ça manque de contraste

Quelques très bons outils et ressources :

Colour Contrast Check

Colour Scheme Designer

Contrast ratio

Contrastes de texte (Open Web)

À vous de jouer !

Merci :)KiwiParty 2013

kiwi.gg/kiwiparty-a11y

Des questions ?

kiwi.gg/kiwiparty-a11y Cupcake : ArtDesigner