A presentation at ConFoo Montreal in 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
Bon d'accord, l'accessibilité ce n'est pas toujours simple. Il existe beaucoup de cas particuliers et de détails à régler. Mais en pratique il existe beaucoup de choses simples à mettre en œuvre qui ne demande pas beaucoup de temps. Petite séance de rattrapage sur les basiques de l'accessibilité Web à destination des développeurs qui, parfois, doivent mettre le nez dans le HTML et le JavaScript pour rendre le Web meilleur.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.