L’ACCESSIBILITÉ, C’EST SIMPLE

ConFoo • Montréal •
9 mars 2017

Damien Senger designer et développeur web hiwelo.co •
@iamhiwelo Raccoon Studio w eb studio raccoon.studio

L’ACCESSIBILITÉ, C’EST SIMPLE : REVOYONS LES BASES

L’accessibilité, 
 pourquoi ?

Parce que .

Parce que c’est utile .

Parce que c’est simple .

Parce que c’est nécessaire .

Parce que vous essayez 
 d’être des personnes décentes .

L’accessibilité, pour qui ?

Les personnes avec 
 des habilités particulières .

Donc tout le monde .

Nous avons tou•te•s 
 des habilités particulières ou 
 des incapacités temporaires .

Œuvrer pour l’accessibilité, ce n’est pas une lutte contre le handicap. 
 
 C'est assurer la diversité du web.

Comme l’UX, l’accessibilité est une 
 approche centrée sur l’utilisateur .

L’idée sous-jacente : 
 le design inclusif .

Avec l’accessibilité, 
 tout est une histoire de nuance : permanent •
temporaire •
situationnel

Adapter son design 
 aux handicaps permanents, 
 c’est agir pour tou•te•s .

Le design inclusif peut 
 être articulé autour de 5 pôles .

Un pôle autour de la vision . Cécité Infection oculaire Distraction 
 visuelle

Un pôle autour du toucher . Amputation Immobilisation 
 temporaire Activité 
 parallèle

Un pôle autour de l’ouïe . Surdité Infection auriculaire Environnement 
 bruyant

Un pôle autour de la parole . Non verbaux Extinction 
 de voix Accent ou 
 non natif

Un pôle autour de la compréhension . Autisme Maîtrise partielle 
 de la langue Contexte 
 stressant

L’accessibilité, par le design .

Un design non accessible 
 ne peut pas devenir accessible 
 par son simple développement.

Côté design, c’est déjà gérer le contraste .

Côté design, c’est déjà gérer le contraste .

Côté design, c’est déjà gérer le contraste .

WebAIM Color Contrast Checker 
 http://webaim.org/resources/contrastchecker/

Soyez explicites , clairs et concis .

Prévoyez des alternatives . 
 (résumés, sous-titrage, …)

Ne surchargez pas vos utilisateurs. 
 (animations, bruit, quantité, …)

Travaillez en détail votre 
 architecture de l’information .

Rappelez-vous que l’évident 
 n’est pas toujours aussi évident 
 qu’on le pense.

L’accessibilité, par le code .

Un web accessible, c’est un web sémantique .

HTML5

Utilisez les balises sémantiques 
 et les rôles offerts par HTML5.

Apprenez à respecter la spécification HTML5.

Toujours préférer les balises 
 sémantiques sans changer leur rôle

Il y aura quasiment toujours une solution HTML à vos problèmes…

et lorsque ce n’est pas le cas, ARIA est là.

L’accessibilité, par l’exemple .

HTML5 et ARIA, 
 les exemples du W3C : 
 https://w3c.github.io/aria-practices/

La base pour débuter : les images !

!!!" Image décorative sans corrélation avec le contenu !!#

<img

src

"img/example.png"

alt

""

!!!" Image apportant une information par rapport au contenu global !!#

<img

src

"img/example.png"

alt

"Un chat sur une table"

< 

!!!" Quand on désire une vraie légende —>

<figure>

<img

src

"example.png"

alt

"Un chat sur une table"

<img

src

"example2.png"

alt

"Un chat sur une chaise"

<figcaption>

Légende ! $ figcaption> !$ figure

< 

Rappelez-vous que vous pouvez rapidement lier des contenus .

<h2

id

“ariaTitle”

Titre de la section !$ h2>

<section

aria

labelledby

“ariaTitle”

<p> Texte d’introduction de cet exemple !$ p> <p> Blabla sans importance !$ p>

!$ section

< 

Ou indiquer un information 
 portée uniquement par le design 
 invisible des lecteurs d’écran.

<section

aria

label

“Titre de la section”

<p> Texte d’introduction de cet exemple !$ p> <p> Blabla sans importance !$ p>

!$ section

< 

C’est, par exemple, 
 le cas des polices d’icônes .

<p> 
Il était l’histoire d’un petit

<i

class

“icon

cat”

aria

hidden

“true” 


title

“chat”

! $ i> <span

class

“sr

only”

chat !$ span>

qui aimait le lait.

!$ p> < 

<p> 
Il était l’histoire d’un petit

<i

class

“ico

cat”

title

“chat”

aria

label

“chat”

!$ i>

qui aimait le lait.

!$ p> < 

!&

Exemple ici de la classe SR only de Bootstrap .sr

only {

position : absolute ;

width : 1px ;

height : 1px ;

padding : 0 ;

margin : -1px ;

overflow : hidden ;

clip : rect(0,0,0,0) ;

border : 0 ; }

< 

Pensez aussi à toujours regarder 
 du côté de tous les standards… 
 comme Unicode également !

<p> 
Il était l’histoire d’un petit

! qui aimait le lait. !$ p> !!!" ou !!#

<p> 
Il était l’histoire d’un petit




<span

aria

label

“chat”

! !$ span>


 qui aimait le lait. !$ p> < 

Lorsque vous créez vos 
 polices d’icônes, faites donc attention à la signification 
 originale du caractère choisi

Une sombre histoire de numéros : Unicode et les chiffres ordinaux

!!!" En utilisant le caractère Unicode !!#

Le coureur nº10.

!!!" Seulement il n’est pas toujours disponible dans la police de caractère !!#

Le coureur n <sup> o !$ sup> 10.

!!!" Et puis nº, est

ce compris par tou·te·s ? !!#

Le coureur <abbr

title

“numéro”

n <sup> o !$ sup> !$ abbr> 10. !!!" Et on termine avec la lecture au SR !!#

Le coureur <abbr

title

“numéro”


 aria

label

“numéro”

n <sup> o !$ sup> !$ abbr> 10. < 

Des abréviations pour tou•te•s.

!!!" Parce que tout le monde ne connait pas le NYPD —>

<abbr

title

“New York Police District”

NYPD !$ abbr>

!!!" Et qu’en plus, avec l’accent c’est mieux !!#

Une enquête rondement menée par le

<abbr

title

“New York Police District”

lang

“en”

NYPD !$ abbr> . < 

Rendre accessible 
 l’ écriture non genrée

!!!" Selon les préconisations quand l’épicène n’est pas possible dans un contexte !!#

Lisible de tou·te·s. !!!" Cette graphie est lue par les lecteurs d’écrans !!#

Lisible de tout point médian thé point médian S

!!!" La lecture devant en être faite d’après le haut conseil à l’égalité français est !!#

Lisible de toutes et de tous.

!!!" Comment le faire lire correctement !!#

Lisible de 
 <span

aria

label

“toutes et tous”

tou·te·s !$ span> . < 

L’accessibilité, avec des outils .

L’onglet accessibilité des Dev Tools de Chrome

WCAG Accessibility Audit tool

Web Accessibility Evaluation Tool (WAVE)

Web Accessibility Evaluation Tools List

L’accessibilité, en bref !

L’accessibilité, c’est pour tou•te•s ! 1 .

Utiliser correctement HTML5 
 c’est la plus grande partie du travail 2.

La technologie ne rendra pas accessible un design mal conçu 3.

Posez-vous toujours la question 
 “et si (…) ?” 4.

L’évidence n’est jamais évidente. 5.

Merci de votre attentio n, à vous la parole !

@iamhiwelo