Mobile et accessibilité, une partie à Troie

Slide 1

Slide 1 text

Goulven Champenois Une partie à Troie Mobile et accessibilité

Slide 2

Slide 2 text

Qui suis-je ?

Slide 3

Slide 3 text

“Les handicapés n’utilisent pas de smartphones” Mythe

Slide 4

Slide 4 text

Vraiment ?

Slide 5

Slide 5 text

• OS accessible • Applications accessibles • Synthèse vocale préinstallée • Connection bluetooth aux plages braille et aides audio • Applications de zoom, de reconnaissance optique • GPS voiture et piéton

Slide 6

Slide 6 text

72% des handicapés utilisent un lecteur d’écran sur leur mobile 28% 72% http://webaim.org/projects/screenreadersurvey4/#mobile

Slide 7

Slide 7 text

Pendant ce temps, sur le Web

Slide 8

Slide 8 text

On entend encore dire que l'accessibilité... • Concerne une minorité • Est un surcoût sans valeur ajoutée • On n’a pas le budget pour tout refaire

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

• Tous les visiteurs en bénéﬁcient • Il faut casser l'existant de toute façon, car... • Plus de 25 millions de mobinautes en France (chiffres Médiamétrie 2013) • Et trop peu de sites responsive ou mobiles

Slide 11

Slide 11 text

Un smartphone est utilisé plus de 2h par jour ! Étude IDC-Facebook “Always connected” https://fb-public.app.box.com/s/3iq5x6uwnqtq7ki4q8wk

Slide 12

Slide 12 text

Nous sommes des cyborgs

Slide 13

Slide 13 text

Pourtant… • Pas de souris • Pas de clavier • Pas d'écran (enﬁn, tout petit) • Pas de plugins (ﬂash, au hasard) • Pas toujours de connexion • Jamais assez d'autonomie 700€

Slide 14

Slide 14 text

Les smartphones font de nous des handicapés.

Slide 15

Slide 15 text

• Perceptible • Opérable • Compréhensible • Robuste Puisque nous sommes handicapés, le Web mobile doit être WCAG = Règles pour l'Accessibilité des Contenus Web

Slide 16

Slide 16 text

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Comment faire ? Responsive et accessible

Slide 19

Slide 19 text

Perceptible • Alternatives (images, vidéos, audio) • Contraste et taille de texte • Attention aux popups et popins • Éviter les images de fond trop chargées • Attention à l'interligne (recouvrement) • Éviter le texte justiﬁé sans césure

Slide 20

Slide 20 text

Opérable • Ni survol ni tabulation • Attention aux iframes pièges à doigt ! • Allongez le temps des sessions • Stockez la saisie en local

Slide 21

Slide 21 text

Compréhensible • Spéciﬁer la langue de la page • Expliciter les abréviations • Étiquettes pour les icônes • L'afﬁchage doit correspondre à l'ordre du code source • Valider la saisie à la volée

Slide 22

Slide 22 text

Robuste • HTML valide • Types d’input adaptés • Alléger les pages (images, polices, Javascript)

Slide 23

Slide 23 text

Responsive : forcément accessible ?

Slide 24

Slide 24 text

• Permettre de zoomer • Fournir les mêmes contenus et fonctionnalités Oui, à condition de