JS est-il soluble dans l'A11y ?
(en comprimés effervescents)

//talks.madsgraphics.com/js_est_il_soluble_dans_a11y.html

MAD

@madsgraphics

code@madsgraphics.com

Dev UI

JavaScript Ninja

Code Architect

Stef

@notabene

sdeschamps@clever-age.com

Expert Front

Directeur Clever Garden

Clever Age

//fr.clever-age.com

Previously :
« C'est bon, mangez-en ! »

Légende Urbaine

JS != Accessible

Problème
de Conception

Problème
d'interface

Par exemple…

Clavier
Tablette
☛ Magie !

L'Origine du Mal

Pilotage

ça se décide
ça s'apprend

Perception

« Ma cible, ce n’est pas les handicapés »
« C’est quoi le surcoût ? »

La Solution

Un client, ça s'éduque ^* !
* mon Luc !

Un peu d'Histoire

10 ans déjà :
Buffers de lecteurs d'écran

ARIA !

Notifier

☛ Quelque chose a bougé dans la structure, les AT doivent pouvoir être informées et réagir

Décrire

☛ Enrichir la structure de données qui n’existent pas en HTML (parce qu’implicites) pour décrire précisément les interfaces riches

Aujourd'hui :
Plus de problèmes de buffers

Concrètement

Côté navigation

Utiliser les éléments focusables par défaut

éléments natifs (links, forms…)
éléments scriptés (tabindex=0 #FTW)

Côté UI

Layouts
☛ ARIA Landmarks


  Votre recherche
  
  Pages
  Images

UI dynamiques
☛ ARIA Live

Présentation
☛ ARIA State Change


  Prices
  Features 


  Prices
  List of prices


  Features
  List of product features....

Tooltips
☛ ARIA Describedby


  Votre âge
  
  ans


Votre âge, en années, pas en semaines

On vous montre ?

Tableau de bord

Haribo, c'est beau la vie :)

Carrousel Aquitaine

En vrai, ça se passe comme ça

La vérité c'est que…

Accessibilité ♡ JS

JavaScript donne les moyens pour enrichir les comportements et les rendre accessibles

Questions ?

Merci !