Suivre Planète Accessibilité sur Twitter S'abonner à Planète Accessibilité (Flux de Syndication R.S.S)

Planète Accessibilité

La fraîche actualité de l'accessibilité Web

Consultation des 10 derniers articles

passer en mode liste

Entrée en vigueur du SGQRI 008-03

Aujourd’hui, le 10 mai 2013, le Standard du gouvernement du Québec sur les ressources informationnelles 008-03 entre en vigueur pour tout contenu audio ou vidéo ou animation Web des sites Web des ministères et des organismes visés par l’article 64 de la Loi sur l’administration publique.

Les articles du standard à retenir sont 22, 23 et 24 qui décrivent les mesures transitoires du standard. En gros, tout contenu audio ou vidéo ou animation déjà sur un site Web et qui n’est pas conforme doit être accompagné par un avertissement du genre « Ce contenu peut ne pas respecter les exigences du SGQRI 008-01. » Tout nouveau contenu audio ou vidéo ou animation à partir d’aujourd’hui doit se conformer au SGQRI 008-03. Et pour finir, la page Accessibilité doit mentionné toute modification envisagée pour améliorer l’accessibilité de tout contenu audio, vidéo et animation.

Vous pouvez maintenant consulter une version HTML du standard au http://sgqri008.accessibiliteweb.com/SGQRI008-03.html (csaw.ca/sgqri3).

SGQRI 008-01 : Contraste de couleur

Le contraste de couleur est lié au texte et son arrière-plan et doit être suffisamment élevé pour assurer que toutes personnes avec des limitations visuelles légères puissent voir le texte.

Tableau de contrôle pour le contraste de couleur
Article Point de contrôle
Article 17e Le contraste de luminosité d’un texte de taille normale et de son arrière-plan doit être d’au moins 4,5 pour 1.

Le contraste de luminosité d’un texte de grande taille et de son arrière-plan doit être d’au moins 3 pour 1.

Vérifications :

Utiliser un outil comme Colour Contrast Analyser pour vérifier le contraste de luminosité entre le texte et son arrière-plan.

Article 17f Chaque image en arrière-plan en CSS doit être accompagnée par une couleur dominante qui assurerait le bon contraste si l’image n’était plus disponible.

Vérification :

Chaque propriété CSS « background-image » doit être accompagnée par une propriété CSS « background-color » qui conserve un contraste de luminosité approprié.

Article 11 alinéa En désactivant le code CSS, le contraste minimal doit être respecté.

Vérification :

Désactiver le code CSS, le rapport de contraste de luminosité doit être maintenu.

L’accessibilité, peut-on s’en foutre parce que ça coûte ?

Tout a commencé par un commentaire désabusé d’un certain QuentinC, lors d’une discussion sur le forum d’Alsacréations, au départ très badine. QuentinC, internaute  « directement concerné » par l’accessibilité, fait l’amer constat que selon lui, l’accessibilité des sites Web n’a pas franchement … La suite

SGQRI 008-01 : En-têtes de section

Les en-têtes de section représentent la structure de base de toutes pages Web. Les lecteurs d’écran ont des fonctionnalités qui peuvent extraire une liste complète des en-têtes de section d’une page Web afin de faciliter la navigation du site.

Tableau de contrôle pour les En-têtes de section
Article Point de contrôle
Article 15d Un mécanisme permettant d’aller directement au contenu principal doit être prévu:

un lien de contournement

ou

un en-tête <h1> placé au début du contenu principal.

Vérification :

Repérer soit un lien de contournement ou un en-tête de section <h1>.

Article 16d Les en-têtes de section doivent être codés à l’aide des balises <h1> à <h6>. Ces balises doivent être utilisées dans un ordre hiérarchique : pas de <h2> sans <h1>, pas de <h3> sans <h2>, etc. »

Vérification :

Repérer les en-têtes de section et s’assurer qu’ils suivent un ordre hiérarchique logique selon le contenu de la page.

Article 16f Il doit y avoir un en-tête de section de premier niveau (<h1>) qui reflète la nature ou la fonction de la page.

Vérification :

S’assurer qu’au moins un en-tête de section <h1> reflète la nature de la page.

Article 10b Les en-têtes de section utilisés balisent-ils réellement des entêtes de section.

Vérification :

S’assurer que les en-têtes de section <h1> à <h6> sont effectivement des en-têtes de section.

SGQRI 008-01 : Images

Informative : Une image informative est une image qui apporte une information supplémentaire et nécessaire à la compréhension du contenu global de la page.

Décorative : Une image décorative est une image qui ne transmet aucune information pertinente pour la compréhension de contenu global de la page.

Un lecteur d’écran doit pouvoir transmettre une information compréhensible pour que l’utilisateur puisse avoir les mêmes informations pertinentes que celles qui sont communiquées visuellement.

Tableau de contrôle images
Article Point de contrôle
Article 20a
Article 20b
Article 20c
Une image qui véhicule une information doit être codée avec une balise <img> et ne par l’entremise de la feuille de style.Une image informative doit avoir un attribut « alt » non vide et contenir du texte de remplacement pertinent qui se termine par un point.

Le contenu de l’attribut « alt » doit reprendre au moins le texte non décoratif apparaissant dans l’image.

Vérification :

Les balises <img> doivent contenir un attribut « alt » avec un contenu pertinent.

Article 20d Les images décoratives et les images ayant une légende suffisante doivent être pourvues d’un attribut « alt » vide ou, à défaut, codées en CSS.

Vérification :

Les balises <img> doivent contenir un attribut « alt » vide ou les images doivent être codées à l’aide de la propriété « background » ou « background-image ».

Article 20h Un schéma, un graphe, un organigramme ou un diagramme doit
comporter une description complète de l’illustration sur la même page Web que cette description soit visible ou non,

Vérification :

Cette image doit avoir une légende adjacente visible ou hors écran.

ou

offrir un hyperlien vers cette description sur une autre page Web.

Vérification :

L’image doit avoir un attribut « longdesc » dans la balise de l’image ou être un hyperlien qui pointe vers cette description.

Article 20i Un dessin réalisé avec des caractères doit être présenté sous forme d’image.

Vérification :

Voir que tous les caractères comme « < », « > », « | » ou des émoticônes sont codés avec la balise <img> ou en CSS.

SGQRI 008-01 : Langue

Les lecteurs d’écran doivent pouvoir détecter la langue de la page Web pour ensuite lire le texte avec une interprétation vocale appropriée. Les lecteurs d’écran normalement prennent par défaut la langue du système d’exploitation. Donc si la langue n’est pas correctement identifiée dans une page Web et si le système d’exploitation est par défaut en anglais, une page Web avec du texte en français sera lue avec une interprétation anglaise, et vice-versa.

Tableau de contrôle langue
Article Point de contrôle
Article 18g La langue principale de la page Web doit être codée sur deux caractères dans l’en-tête de la page, dans la balise <html> avec l’attribut « lang » ou « xml:lang ».

Vérification :

L’attribut « lang » doit être dans la balise . Exemple: <html lang="fr" >

Article 18h Tout changement de langue d’un contenu autre qu’un nom propre ou qu’un terme technique doit être codé avec l’attribut « lang » ou « xml:lang ».

Vérification :

L’attribut « lang » doit être dans l’élément parent du changement de langue.

SGQRI 008-01 : Titre de la page

Le titre d’une page Web est la première information que transmet un lecteur d’écran. Ce titre doit être concis, précis et doit refléter la nature de la page.

Les cadres tel que les balises <frame>, <frameset> et <iframe>1 note de bas de page doivent être accompagné par un attribut « title » qui contient un contenu approprié qui explique la nature du cadre.

Tableau de contrôle Titre de la page
Article Point de contrôle
Article 16a La page doit comporter un titre distinctif qui reflète son sujet ou son but dans la balise <title>. Ex :titre de la page suivi du nom du site.

Vérification :

La balise <title> doit contenir un titre approprié.

Article 16b Une description de tout cadre doit être faite par un titre permettant d’en comprendre la fonction, codée avec l’attribut « title ».

Vérification :

L’attribut « title » d’un cadre doit contenir un titre approprié.

Note 1 Les balises <iframe> ne sont pas spécifiquement mentionnées dans le standard, mais il est recommandé de l’inclure.

Trois citations en accessibilité du Web

On trouve souvent la sagesse et de la vérité dans les citations philosophiques d’auteurs célèbres. C’est également valable dans le domaine de l’accessibilité du Web. Je vais essayer d’interpréter trois citations faites par trois experts de l’accessibilité.

Trop de structure tue la structure. Denis Boudreau, fondateur de la Coopérative AccessibilitéWeb. @dboudreau

Une page Web a besoin de structure. Une structure appropriée est construite principalement en utilisant de manière cohérente des balises d’en-têtes de section et des listes (soit numérotées, ordonnées ou de définition). Il est cependant possible d’avoir trop de structure, c’est-à-dire qu’il y a trop d’en-têtes ou de listes. Ceci pourrait entraver à la capacité à l’utilisateur d’un lecteur d’écran de comprendre clairement la structure de la page. Les lecteurs d’écran ont des fonctionnalités qui peuvent extraire une liste complète des en-têtes de section d’une page Web afin de faciliter sa navigation, donc s’il y trop d’en-têtes dans cette page Web, même s’ils sont hiérarchisés  il y aura une énorme liste à consulter. Dans la même veine, les listes doivent avoir au plus trois niveaux en profondeur afin d’éviter une structure inutilement complexe. Ce qui me fait penser au mantra KISS (Keep it simple stupid).

Une autre façon de simplifier vos pages Web est en ordonnant les sections de la page d’une manière logique et en faisant en sorte que la mise en page de votre code HTML représente l’ordre dans lequel votre utilisateur naviguera à travers la page.

Tester souvent, corriger peu, dépensez moins. Léonie Watson, directrice d’accessibilité chez Nomensa. @LeonieWatson

J’aime cette citation, car elle résume bien la façon dont je vois le développement Web en particulier lorsque l’accessibilité est impliquée. La raison est que peu importe votre expertise en matière d’accessibilité Web, la réalisation d’une page Web doit tenir compte d’un peloton d’exigences en accessibilité et ces exigences doivent être testées par des utilisateurs qui ont différents types de limitations. Donc, si des tests appropriés ont été mis en œuvre à travers les différentes étapes du processus de développement Web, de très petites modifications devraient être fait et bien évidemment à un moindre coût.

Chaque fois que vous démarrez sur un nouveau projet Web, anticiper les étapes en mettant une priorité à l’accessibilité du Web depuis le début sera toujours moins coûteux que d’intégrer l’accessibilité une fois que le site est complété.

Nous construisons pour notre propre avenir. Jared Smith, directeur associé chez WebAIM. @jared_w_smith

Cette dernière citation est très pertinente, surtout ici au Canada, où la population vieillit rapidement. Le vieillissement entraîne des handicaps qui peuvent affecter notre capacité à naviguer sur le web de la même manière que nous avons été habitués. Ces limitations peuvent comprendre la perte de la vue, d’audition ou de mobilité. Même si une génération plus avertie développe ces handicaps, ils ne perdront pas leur appétit pour l’information constante et atteignable. Imaginez que votre site web préféré est soudainement devenu plus difficile à lire, que vous ne pouvez plus entendre des vidéos ou que la souris est devenue pénible à utiliser et vous avez besoin d’utiliser les touches du clavier pour naviguer dans une page Web. Ne voudriez-vous pas être libre d’obstacles? Moi, oui.

Avoir une bonne structure, tester à fond et anticiper les besoins de l’avenir sont trois excellentes leçons à prendre de ces citations. J’espère que ces citations vous ont inspiré autant qu’ils m’ont inspirée.

Indication du format des fichiers à télécharger et accessibilité

Ce billet est le premier d’une série de trois portant sur l’accessibilité des liens vers des fichiers à télécharger. Une recommandation d’accessibilité demande à ce que chaque lien pointant vers un fichier en téléchargement informe du format, du poids et … Lire la suite

L’accessibilité, c’est comme les bébés

L’arrivée de Gabriel, le mois dernier, dans notre foyer, a ravivé quantité de souvenirs liés à sa « grande » sœur, Océane, de 4 ans son aînée. Rien de surprenant à cela. Plus étonnant en revanche : j’y ai trouvé de nombreux parallèles … La suite