Une mise à niveau ‘sémantique’ des livres numériques par l’accessibilité


 CSS > Désactiver les styles > Tous les styles : permet de vérifier que le
contenu reste visible et compréhensible lorsque les feuilles de styles
sont désactivées

L’accessibilité ce n’est pas sujet nouveau, elle est une obligation légale pour les administrations publiques depuis plusieurs années. Elle a d’ailleurs été à la source de beaucoup de projets de refonte de sites web de l’administration publique dans les années 2000.

J’ai donc, à la lumière des débats sur ce sujet (dans le cadre du livre numérique), relu le Livre Blanc de l’accessibilité Web (de Jouve) qui donne quelques "bonnes" pratiques obligatoires pour l’Etat (le voici en doc joint) :

LE LIVRE BLANC DE JOUVE / ACCESSIBILITE

Le sujet est exigeant sur le web – voire contraignant mais je trouve l’exigence d’accessibilité assez vertueuse car elle contraint l’éditeur à rendre ses contenus plus sémantiques et plus structurés sur le fond, pour une lisibilité sur les "devices" sans refonte majeure de la forme.

Etre "accessible" c’est rester lisible pour tous et partout même si la maquette "bouge".

Mais doit-on devenir aussi contraignant que les les pages du livre blanc ?

Extrait du livre blanc : 

►L’internaute doit pouvoir accéder à tous les contenus avec le
clavier et sans la souris, et inversement.
2.1.2 Périphériques de sorties (écran, plage braille, haut-parleurs, …)
a. L’écran
L’écran permet d’afficher le contenu. En fonction de la taille et de
la configuration de l’écran, le contenu affiché sera plus ou moins
visible. Par exemple, pour les internautes disposant d’un petit écran,
les ascenseurs de navigation seront nécessaires pour lire l’ensemble
du contenu proposé. En conséquence, il sera important de ne pas
bloquer l’usage de ces ascenseurs, car cela rendrait inaccessible le
contenu situé en dehors de l’écran.
►Les ascenseurs de navigation ne doivent pas être bloqués.
b. Les hauts parleurs
Les haut-parleurs permettent de générer le contenu audio. Les
concepteurs oublient souvent que tous les internautes ne disposent
pas de haut-parleurs. D’où l’importance de prévoir des alternatives
textuelles aux contenus audio.
►Les informations audio doivent être complétées d’une alternative
textuelle

Utiliser le navigateur textuel permettra de voir immédiatement les
éventuels contenus inaccessibles et de vérifier que l’ordre d’affichage
de l’information est pertinent.
La barre d’outils Web Developper permettra de faire de nombreux
tests, par exemple :
- CSS > Désactiver les styles > Tous les styles : permet de vérifier que le
contenu reste visible et compréhensible lorsque les feuilles de styles
sont désactivées
- Désactiver > Désactiver JavaScript > Tout le JavaScript : permet
de vérifier que tout le contenu reste accessible même lorsque
les fonctionnalités JavaScript sont désactivées. Exemples de
fonctionnalités pouvant être codées avec du JavaScript : les menus
déroulants, les fonctionnalités d’ajout au panier…)
- Images > Afficher les attributs ‘alt’ : permet de vérifier la présence et
la pertinence des alternatives textuelles des images
- Information > Plan du document : permet de vérifier le bon usage des
balises <h1>, <h2>, <h3> qui servent à structure l’information dans le
document
Pour compléter ces tests, on pourra également :
- Vérifier la présence obligatoire et la pertinence de la balise <title>
- Vérifier la présence obligatoire et la pertinence de la langue par
défaut
- Tester la navigation au clavier : tout le contenu devra être accessible
au clavier avec un ordre de tabulation logique
- Tester le zoom du navigateur graphique : un bon affichage jusqu’à
200% est une bonne pratique
- Passer au W3C validator le code source : cela permettra de vérifier
une bonne conformité avec les normes du W3C
- Pour les formulaires, il faudra vérifier dans le code source le bon usage
de la balise <label> (avec ses attributs correspondants id et for), de
la balise <fieldset> et de la balise <legend>
- Pour les tableaux de données, il faudra vérifier dans le code source le
bon usage des balises <caption>, <th> et attributs ‘summary’,

A suivre.

About these ads

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Suivre

Recevez les nouvelles publications par mail.

Joignez-vous à 112 followers

%d bloggers like this: