L’ACCESSIBILITÉ, C’EST SIMPLE
ConFoo • Montréal •
9 mars 2017
A presentation at ConFoo Montreal in March 2017 in Montreal, QC, Canada by Damien Senger
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
"img/example.png"
""
!!!" Image apportant une information par rapport au contenu global !!#
<img
"img/example.png"
"Un chat sur une table"
<
!!!" Quand on désire une vraie légende —>
<figure><img
"example.png"
"Un chat sur une table"
<img
"example2.png"
"Un chat sur une chaise"
<figcaption>
Légende ! $ figcaption> !$ figure
<
Rappelez-vous que vous pouvez rapidement lier des contenus .
“ariaTitle”
Titre de la section !$ h2>
<section“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.
“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 .
Il était l’histoire d’un petit
<i
cat”
“true”
“chat”
! $ i> <span
only”
chat !$ span>
qui aimait le lait.
!$ p> <
Il était l’histoire d’un petit
<i
cat”
“chat”
“chat”
!$ i>
qui aimait le lait.
!$ p> <
!&
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 !
Il était l’histoire d’un petit
! qui aimait le lait. !$ p> !!!" ou !!#
<p>Il était l’histoire d’un petit
<span
“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.
ce compris par tou·te·s ? !!#
Le coureur <abbr
“numéro”
n <sup> o !$ sup> !$ abbr> 10. !!!" Et on termine avec la lecture au SR !!#
Le coureur <abbr
“numéro”
“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
“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
“New York Police District”
“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
“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
