Accessibilité : l’impact du code [dossier 2/3]

Blog

Faire de l'obligation légale d'accessibilité numérique une opportunité n'est pas incompatible

<a href="/accueil.html#skiplink-container" accesskey="c">Contenu</a>

Cependant, même avec la meilleure conception du site, le codage sera au centre des préoccupations pour l'ensemble des acteurs du projet.

Affirmer sans réserves que la technologie est immédiatement prête pour la production serait incorrect. Pourtant, le développeur, galvanisé par son professionnalisme s'informera sur les bons usages en matière d'accessibilité.

Structure générale

La structure des titres

De <h1> à <h6>, les titres doivent être dans un ordre logique.
un titre de niveau 3 ne pourra être précédé d'un titre de niveau 1, il faudra un niveau 2 intermédiaire.

Les menus de navigation

Les liste <ul> <li>, les amis de la navigation accessible.

Flux HTML

La cohérence dans l'écriture des balises est primordiale. D'une page à l'autre du site web, le flux doit rester dans une logique similaire.

Sémantique

Conformité

La DTD ou Déclarations de Type de Document n'est pas totalement libre dans le cadre de l'accessibilité. La liste des Doctype est disponible sur : www.w3.org
Je vous déconseille le doctype switching plus adapté à des contenus dépassés.

Attributs et balises

Les balises HTML sont utlisées en accessibilité pour leur valeur sémantique et non visuelle.

Ainsi les attributs align, alink, background, basefont, bgcolor, border, color ou les balises <basefont>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> et <u> ne doivent pas être usitées.

Dans le même cadre, les balises (non exhaustif) <blockquote>, <ul>, <li> ne sont pas utilisées visuellement mais pour leur sémantique.

Images

Images décoratives

Les images illustratives ne doivent pas être, autant que possible, intégrées dans le code HTML mais chargées via le CSS.  De plus, l'attribut "alt" restera vide.

Images informatives

Intégrées en "dur" dans le code HTML généralement avec la balise <img />
Éviter le

<a href="/" id="logo">[texte de mon logo]</a>

et utiliser plutôt

<a href="/" id="logo"><img src="images/logo.png" alt="[texte de mon logo]" /></a>

L'attribut "alt" doit être renseigné obligatoirement ! l' information doit-être équivalente à celle véhiculée par l’image.

Images "cartographiques"

Dans le cas où des parties de la carte sont cliquables, dans la même optique, un attribut"alt" doit être ajouté sur l'image principale et sur toutes les parcelles d'images des coordonnées

<img src="images/carte.png" alt="Carte de France" usemap="#carte" />

<map name="carte">

    <area shape="poly" coords="[…]" href="exemple.html" alt="exemple" />

    <area shape="poly" coords="[…]" href="exemple2.html" alt="exemple 02" />

    […]

</map>

Liens et téléchargements

Intitulés des liens

Éviter les boutons "ok" ou "retour". Privilégier un intitulé clair entre les balises </a>, </button> et les attributs "alt", "value".

<input type="submit" value="S'inscrire" />

<a href="inscription.html">Retour à l'étape 1 : "inscription"</a>

Le dernier recours sera l'attribut "title"

Ouverture de nouvelles fenêtre

Pour l'ouverture d'une nouvelle fenêtre avec l'action du clic sur un bouton ou un lien, la mention "ouverture dans une nouvelle fenêtre" ou "nouvelle fenêtre est obligatoire.

<a href="www.site-externe.com" target="_blank">Un site partenaire (nouvelle fenêtre)</a>

Pour les liens internes, il est déconseillé de rajouter l'attribut _blank mais plutôt de laisser à l'utilisateur le choix d'ouvrir ou non dans une nouvelle fenêtre.

Documents à télécharger

Des informations précises doivent apparaître : Le nom du document, son format et sa taille.

<a href="mon-fichier.pdf">Télécharger mon fichier (PDF, 2 Mo)</a>

 

Listes et citations

Citations

La balise <blockquote> est indispensable pour délimiter un bloc de citation

Listes non ordonnées

Utiliser les balises <ul> <li> pour les éléments dont l'ordre n'a pas d'importance.

Listes ordonnées

Les balises <ol> <li> seront nécessaire pour lister des éléments dont l'ordre à de l'importance (classement, processus,...).

Listes de définitions

Utiliser les balises <dl>, <dt> et <dd> pour baliser les listes de définitions (dans un glossaire par exemple).

Contenus multimédia

Utiliser au maximum les métadonnées - voir l'article associés

Formulaires

Intitulé et champs

Utiliser la balise <label> pour chaque intitulé et avec les attributs for et id pour chaque champs

Les informations utiles à la saisie doivent être intégrées directement dans la balise <label>

<label for="nom">Votre nom</label>

<input type="text" id="nom" name="nom" />

[…]

<label for="annee-naissance">Votre année de naissance</label>

<select id="annee-naissance" name="annee-naissance">

    <option value="2012">2012</option>

    <option value="2011">2011</option>

    <option value="2010">2010</option>

    <option value="2009">2009</option>

    […]

</select>

Tri des informations

Lorsqu’un formulaire propose plusieurs groupes de champs, dont certains ont des intitulés identiques, utiliser les balises <fieldset> et <legend>.

Listes déroulantes

<select>

    <option>Brisbane</option>

    <option>Sydney</option>

    <option>Cairns</option>

    <option>Perth</option>

</select>

Capcha

Un Capacha doit être accompagné d'une alternative textuelle ou d'écoute

 

Métadonnées et langues

Encodage

Une déclaration de codage doit être implémentée avec la balise <meta>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    ...

</head>

Langues

Il faudra impérativement utiliser un attribut lang pour respecter les normes ISO

<html lang="fr">

Langues alternatives

Toujours avec l'attribut lang il faudra signaler la langue alternative

<ul>

    <li>Version française</li>

    <li><a href="http://website.com" lang="en">English version</a></li>

</ul>

Navigation au clavier

Tabulation

L'ordre de la tabulation suit la logique de l'affichage visuelle de la page.

Liens d'évitement

Ils permettent d'aller soit directement au moteur de recherche ou à la navigation, soit au contenu soit au pied de page.

CSS

Contenus masqués

Les éléments inutiles pour tous les utilisateurs doivent être masqués à l’aide des propriétés CSSdisplay: none; ou visibility: hidden;.

Les éléments qui sont utiles pour les utilisateurs de lecteurs d'écran, mais inutiles pour les autres utilisateurs utilisent les propriétés CSS opacity: 0; ou position: absolute;

Taille et apparence

Éviter la propriété line-height mais préférer les font ou les unités relatives comme em, %, rem.

 

Quelques liens utiles pour réussir votre accessibilité

accessiweb.org : Des informations sur les conformités de votre projet et comment le piloter

opquast.com/fr : Version gratuite limitée à l'analyse de conformité d'un projet (version payante possible)

validator.w3.org : Vérifier la "propreté" de votre code

webaccessibilite.fr : liste les outils de test et de vérification

visualcaptcha.net : Pour rendre vos Capcha accessibles

Readspeaker : Solution payante pour la lecture audio du contenu

Certes, la route est longue pour parvenir à créer un site accessible. Il faudra s'armer de patience et bien se renseigner avant de commencer un projet. Mais une fois de plus avec une bonne préparation et l'intégration des normes d'accessibilité en amont de votre site web, la route vous paraitra moins sinueuse.

Nous conclurons prochainement notre dossier avec les bonnes pratiques du design en matière d'accessibilité.