L'accessibilité, c'est simple : revoyons les bases

Slide 1

Slide 1 text

L’ACCESSIBILITÉ, C’EST SIMPLE ConFoo • Montréal • 9 mars 2017

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

L’accessibilité,  pourquoi ?

Slide 5

Slide 5 text

Parce que.

Slide 6

Slide 6 text

Parce que c’est utile.

Slide 7

Slide 7 text

Parce que c’est simple.

Slide 8

Slide 8 text

Parce que c’est nécessaire.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

L’accessibilité, pour qui ?

Slide 11

Slide 11 text

Les personnes avec   des habilités particulières.

Slide 12

Slide 12 text

Donc tout le monde.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

L’accessibilité, par le design.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Soyez explicites, clairs et concis.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

L’accessibilité, par le code.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

HTML5

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Apprenez à respecter la spécification HTML5.

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

L’accessibilité, par l’exemple.

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

La base pour débuter : les images !

Slide 47

Slide 47 text

< !!!

!!!

Slide 48

Slide 48 text

< !!!

Slide 49

Slide 49 text

Rappelez-vous que vous pouvez rapidement lier des contenus.

Slide 50

Slide 50 text

Titre de la section!

Texte d’introduction de cet exemple!

Blabla sans importance!

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Texte d’introduction de cet exemple!

Blabla sans importance!

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Il était l’histoire d’un petit chat! qui aimait le lait. !

Slide 55

Slide 55 text

Il était l’histoire d’un petit ! qui aimait le lait. !

Slide 56

Slide 56 text

< !// 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; }

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Il était l’histoire d’un petit qui aimait le lait. !

!!!

Il était l’histoire d’un petit   !   qui aimait le lait. !

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

< !!! Le coureur nº10. !!! Le coureur nô!10. !!! Le coureur nô!!10. !!! Le coureur nô!!10.

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Des abréviations pour tou•te•s.

Slide 64

Slide 64 text

< !!! Une enquête rondement menée par le NYPD!.

Slide 65

Slide 65 text

Rendre accessible   l’écriture non genrée

Slide 66

Slide 66 text

< !!! Lisible de tou·te·s. !!! Lisible de tout point médian thé point médian S !!! Lisible de toutes et de tous. !!! Lisible de   tou·te·s!.