Anne Cavalier
Responsable qualité et accessibilité des sites web de la Direction de l'information légale et administrative (DILA)
Accessibilité pour les développeurs
Mise en bouche
Plan
- Règles de base
- Fondamentaux ARIA
- Atelier : un exemple de plier/déplier
Règles de base
- Respecter la DTD (aka code «propre»)
- Utiliser l’élément html idoine
- Ne pas pervertir un élément html
- Acquérir des automatismes de code et de test
Respecter la DTD
Les aides techniques peuvent être bloquées
par un code non conforme
- Connaître : http://html5please.com/
- Vérifier : Web Developer - Total Validator
Utiliser l’élément HTML idoine
Bénéficier des propriétés sémantiques des tags html
<a class="button">Annuler</a>
<span role="button">Annuler</span>
<p onclick(…)>Annuler</p>
<button>Annuler</button>Note : un lien pour se déplacer, un bouton pour agir
Ne pas pervertir un élément html
sémantique != présentation
<h1>Titre de l'article</h1>
<p>bla bla.</p>
<p>Lorem ipsum* et caetera.</p>
<!-- h4 correspond au rendu souhaité -->
<h4>Notes</h4>
<p>*Note 1</p><h1>Titre de l'article</h1>
<p>bla bla.</p>
<p>Lorem ipsum* et caetera.</p>
<div class="notes">
<!-- styles spécifiques dans la css -->
<h2>Notes</h2>
<p>*Note 1</p>
</div>WARNING: modèle incomplet (manquent lien et ancre)
Automatismes de code
limiter la perte de temps et d'énergie des correctifs
- Une fois pour toutes une balise image c'est <img src="" alt="" />
- Une fois pour toutes <html> c’est <html lang="fr">
- Une fois pour toutes on associe label for et input id
- Une fois pour toutes [to be continued…]
Automatismes de test
Avant de commiter
- Navigation et utilisation au clavier
- Pas de perte si désactivation JS
- Code valide [validateur local]
- Hiérarchie sans rupture [HeadingsMap]
- Succès checklist Opquast-AFS
Fondamentaux ARIA
- Kezako ?
- Rôles
- États
- Propriétés
- Motifs de conception
ARIA ?
- Abréviation pour Accessible Rich Internet Applications.
- Recommandation W3C/WCAG, obligatoire RGAA 3.
- Surcouche sémantique sur un langage existant (HTML, SVG, XML…).
- Composé de rôles, états et propriétés.
Rôles
Ce qu’est ou ce que fait un élément.
Beaucoup d’éléments html ont un rôle natif (button, a, ul, form…). ARIA permet d'en donner aux éléments qui n'en ont pas ou de changer un rôle existant.
Pour RGAA3 on utilisera surtout les rôles pour les zones de navigation (main, navigation…) ou pour des widgets / design patterns (tabpanel, dialog…)
RGAA - Test 12.10.4 : Dans chaque page Web, la structure du document vérifie-t-elle ces conditions ?
- La zone d'en-tête de la page possède un rôle banner
- Le menu de navigation principal possède un rôle navigation
- La zone de contenu principal possède un rôle main
- La zone de pied-de-page possède un rôle contentinfo
- Le moteur de recherche sur le site possède un rôle search
- Les rôles banner, main, contentinfo et search sont uniques dans la page.
- Le rôle navigation est réservé aux zones de navigations principales et secondaires
Propriétés
Étend un rôle natif pour ajouter des propriétés à l'élément. L'attribut est toujours préfixé aria-
<p>
<label for="user_email">Courriel*</label>
<input type="email" id="user_email" aria-required="true" />
</p>États
Pour définir l’état courant d'un élément. Les états portent tous le préfixe aria- Lors de l'implémentation, pas d'état « en dur », on les ajoute dynamiquement.
Lors de l'implémentation penser à se demander ce qu'on veut par défaut au cas où js plante ou est désactivé.
<p> <!-- feedback sur un champ non ou mal rempli -->
<label for="user_email">Courriel*</label>
<input type="email" id="user_email" aria-required="true" aria-invalid="true" />
</p>Motifs de conception
RGAA - Critère 7.1 : Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
glossaire et notes techniques RGAA
spec du référentiel WCAG
aka Design Patterns
Cibler un élement
avec ses attributs ARIA
Via javascript
Via CSS
$("body").find("[aria-haspopup='true']");
# ajouter le texte "voir".more[aria-expanded="false"]:before {
content: "+";
font-size: 1.5em;
height: 1.5em;
width: 1.5em;
display: block;
float: right;
}Atelier 1 : une liste de Q/R
Commande client
- Une liste de questions - réponses.
- Les réponses sont masquées.
- On peut cliquer sur la question pour voir la réponse.
- Conforme RGAA 3.
Commande insuffisante, demander précisions !
Après debrief
- Si js est absent, toutes les QR sont affichées.
- Les questions sont des niveaux de titre h3.
- Les réponses peuvent comporter plusieurs paragraphes.
- Un symbole signale que l'élément est dépliable.
- On peut « ouvrir » plusieurs réponses simultanément.
- Bonus si on a le temps, un trigger pour tout ouvrir/fermer.
Entrant client
### Quelles sont les pièces nécessaires ? - Une pièce d'identité en cours de validité - Un extrait d'acte de naissance ### Où s'adresser ? #### Rendez-vous à la préfecture de votre département Indiquez votre code postal pour connaître l'adresse et les horaires d'ouverture de la préfecture de votre département. Code postal <champ saisie> <validation> #### Effectuer la démarche en ligne (<- lien)
Feuille de route
- Construire le code html sans js.
- Scénariser et écrire le js avec les attributs ARIA :
- Replier les réponses.
- Transformer les questions en triggers.
- Informer de leur état replié.
- Sur clic sur question, déplier la réponse et informer la question qu'elle est dépliée.
- et vice-versa.
- Vérifier la gestion du clavier
Ajouter le marqueur "+/-" soit via CSS soit via js.
Spec ARIA
Sur le trigger
- état aria-expanded="true|false"
- propriété aria-controls="[id de l'objet contrôlé]"
Sur l'élément masqué/affiché
- [id] pour aria-controls
- aria-hidden="true|false", display:none ou hide/show
Références
Atelier 2 : une modale
Commande client
- Le lien « Faire la démarche en ligne » doit ouvrir une modale qui affichera un message avec un lien conduisant vers le site de la démarche (nouvelle fenêtre).
- Conforme RGAA 3.
Commande insuffisante, demander précisions !
Après debrief
- Penser à un bouton de fermeture
- Il faudra un intitulé de modale (non affiché mais restitué aux AT).
- Si js est absent, pas de lien, remplacement par un intertitre simple ; le contenu de la modale est affiché directement.
Motif de conception identifié
Référence WAI-ARIA Practice. Modal dialog.
- Donner un role="dialog" au conteneur de la modale.
- Le titrer avec aria label (en cas de titre hx, aria-labelledby / id)
Clavier
- À l'ouverture le focus est transmis au premier élément focusable.
- Tant que la fenêtre est ouverte, la navigation dans le reste de la page est désactivée.
- La touche escape permet de fermer la modale.
- A la fermeture le focus est redonné à l'élément d'ouverture.
[bouton de fermeture] Intitulé de la modale "Avant de commencer votre démarche" Le code postal que vous avez indiqué correspond à la ville de Trifouillis, qui permet d'effectuer cette démarche en ligne. Lors de cette démarche il vous sera demandé d'indiquer votre numéro de Sécurité sociale et votre revenu imposable brut de référence. Nous vous recommandons de vérifier que vous disposez bien de ces renseignements avant de débuter.
Commencer la démarche en ligne [<- lien, ouverture nvelle fenêtre]
Introduction à l'accessibilité pour les développeurs
By Anne Cavalier
Introduction à l'accessibilité pour les développeurs
Quelques notions de base pour aborder la mise en œuvre de l'accessibilité à destination des développeurs
- 832
