CIDP : couleur, imprimerie, duplicopie, photocopie.

Chemin : Accueil / Informatique / Accessibilité

Accessibilité aux contenus Web

Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales, tel est le but de l'accessibilité. Tim Berners-Lee, Directeur du W3C et créateur du Web.

Accessible ? Quand je tape l'adresse de mon site, je le vois. Il est donc accessible ! Certes ! Mais dans ce cas, nous dirons plutôt qu'il est « visible » ou « joignable » mais pas forcément accessible.
L'accessibilité aux contenus web va plus loin que le simple fait d'afficher les pages d'un site. Le but est de rendre le contenu des pages visible et compréhénsible par tous les utilisateurs, quel que soit leur handicap. Un site web accessible doit être respecter certaines normes en fonction du niveau d'accessibilité souhaité (il existe 3 niveaux différents).

Les différents handicaps

Plusieurs handicaps peuvent être gênants, voire très gênants, pour un utilisateur et l'empêcher d'avoir accès aux contenus d'un site web. Ils sont de deux ordres : les handicaps liés à l'utilisateur (handicap physique) et les handicaps liés au matériel utilisé pour surfer sur Internet (certes, ceux-ci sont moins graves et peuvent être corrigés plus facilement). Vous trouverez ci-dessous une liste non exhaustive de handicaps pouvant nuire à l'utilisation d'un site web.

Retour

Les handicaps physiques

Les handicaps ou troubles pouvant interdire ou diminuer l'accès aux contenus des sites web sont de plusieurs ordres : visuels, auditifs, moteurs, neurologiques ou cognitifs.

Cécité totale ou partielle. Il est clair pout tout le monde qu'un non voyant ou malvoyant n'aura pas accès au contenu d'un site sans aide extérieure. Pour pouvoir profiter d'Internet comme tout le monde, les non voyants utilisent un lecteur d'écran. Les personnes ayant une acuité visuelle très réduite utilisent un logiciel d'agrandisement.

Troubles de la vision (presbytie, myopie, astigmatisme). Les personnes ayant un problème pour lire en général risquent d'avoir encore plus de mal à le faire sur un écran (résolution plus faible, fatigue plus importante…).

Daltonisme, achromatopsie, deutéranopie, protanopie, tritanopie. Tous ces termes concernent les personnes ayant des problèmes (plus ou moins sévères) quant à la perception des couleurs. Certains ne distinguant pas ou mélangeant certaines couleurs, d'autres ne les voyant pas du tout (achromatopsie).

Surdité. Sans sous-titrage, script textuel ou traduction en langue des signes, un sourd ou malentendant n'aura pas accès à la totalité des informations diffusées par les vidéos ou fichiers audios.

Troubles de la motricité (TMS, maladie de Parkinson, hémiplégie, tétraplégie…). Ces troubles concernent tous ceux qui ont des problèmes affectant les membres antérieurs (mouvements involontaires, tremblements, manque de coordination, paralysie, problèmes articulaires ou absence d'un membre). Ces troubles rendent difficile voire impossible l'utilisation d'une souris ou d'un clavier. Dans les cas les plus graves, les utilisateurs font alors appel à des technologies de remplacement répondant à d'aures parties du corps (hochement de tête, clin d'œil, reconnaissance vocale…).

Troubles cognitifs. Certains utilisateurs peuvent être perturbés ou perdus dans certaines configurations (menus déroulants, fenêtres surgissantes…).

Epilepsie. Certaines personnes peuvent être prises de spasmes causés par un effet stroboscopique, des clignotements ou des flashs sur une page web.

Retour

Les handicaps matériels

Outre les troubles physiques évoqués précédemment, les visiteurs de votre site web peuvent se retrouver limités ou empêchés d'accéder à son contenu à cause du matériel ou des logiciels qu'ils utilisent pour naviguer sur Internet. Soit parce que leurs « outils » sont trop anciens, soit (paradoxalement) parce qu'ils sont trop « high-tech ». Faisons un rapide tour d'horizon des problèmes potentiels.

Navigateurs « préhistoriques ». Dans le monde de l'informatique, les technologies évoluent très vite. Malheureusement, tout le monde ne peut pas suivre le rythme, soit qu'on ne peut pas forcément changer de matériel tous les 2 ou 3 ans, soit par ignorance (Ah bon, on peut mettre à jour son navigateur ou en utiliser un autre ?). Il y a donc un nombre non négligeable de personnes qui utilisent encore IE6-7 ou de vielles versions de Safari, Firefox ou Opéra. Autant dire que ces utilisateurs sont très handicapés pour surfer sur le web de nos jours.

Navigateurs textuels. Comme le nom l'indique, ces navigateurs n'affichent que le texte d'une page web, en ignrorant toutes les images, les vidéos, les animations, les scripts, etc. Certes, ils sont rarement utilisés par le commun des mortels, mais ils peuvent rendre service et il faut savoir qu'ils existent.

Ecrans tactiles. De plus en plus utilisés depuis l'avènement des smartphones et autres tablettes, ces écrans obéissent au doigt (pas encore à l'œil). Ici, l'utilisateur ne se sert pas d'une souris mais de son doigt pour pointer et cliquer. Et c'est bien là le problème ! En effet, les événements déclenchés par onmouseover (au survol par la souris) ne fonctionnement pas... Un exemple : un menu déroulant ne fonctionnera pas sur un écran tactile. L'utilisateur se retrouve donc (toutes porportions gardées) dans la même situation qu'une personne souffrant de lourds troubles de la motricité…

Petits écrans. Les utilisateurs de smartphones ou de tablettes rencontrent également un autre problème : la taille (résolution) de leur écran (mais ils ne sont pas les seuls). La plupart des sites actuels ont une taille fixe de 1 024 pixels de large... alors que les téléphones et tablettes (par exemple) ont des résolutions de 320 et 640 pixels maximum. Bien entendu, les navigateurs sont prévus pour cette situation et adaptent le site à la largeur de l'écran. Mais cela force l'utilisateur à tout le temps zoomer et dézoomer pour voir une partie ou l'autre de la page. Et pour une personne qui ne dispose que d'un écran affichant 800 pixels de large, le site déborde de l'écran et cela l'oblige sans cesse à utiliser l'ascenceur horizontal pour avoir accès aux deux côtés de la page.

Bas débit. Les connexions par modem ont tendance à disparaître en France, l'ADSL et (bientôt) la fibre optique étant devenus des « standards » pour se connecter à Internet. Mais le relais des connexions bas débits a été pris par… les smartphones et tablettes lorsqu'ils surfent 3G (3e génération de norme de téléphonie mobile). Les choses évoluent et s'améliorent, mais surfer depuis son mobile en 3G peut s'avérer lent et fastidieux surtout sur un site « lourd » où les pages peuvent mettre un temps rédibitoire à se charger.

Javascript. C'est un langage de programmation qui s'exécute dans le navigateur de l'utilisateur (contrairement à PHP ou ASP qui s'exécutent sur le serveur hébergeant le site). Ce langage permet de faire beaucoup de choses. Par exemple : en haut de cette page, si vous cliquez sur Table des matières, vous verrez son contenu disparaître petit à petit. Si vous recliquez dessus, le contenu réapparaîtra. Magique non ? Cet effet est réalisé grâce à Javascript.
Javascript n'est pas un problème ou un handicap en lui-même… C'est seulement le fait qu'il n'est pas ou mal géré par les vieux navigateurs ou encore parce que certains utilisateurs le désactivent volontairement (pour ne pas voir les pubs s'afficher sur certains sites par exemple). Un site qui n'est pas prévu pour gérer l'absence de Javascript peut donc être partiellement ou totalement inaccessible dans ces cas là.

Retour

Les « remèdes »

Après avoir passé en revue les problèmes pouvant nuire à la navigation sur Internet, voyons les solutions que l'on peut apporter, car il y en a.

Référentiels

Depuis la démocratisation d'Internet au milieu des années 90, de nombreux spécialistes se sont penchés sur la problématique de l'accessibilité du web.
Au niveau international, cela a donné lieu à la création, en 1996, du WAI (initiative pour l'accessibilité du Web) qui a mis au point un référentiel, sorte de guide des bonnes pratiques : les WCAG (règles pour l'accessibilité des contenus web), actuellement dans leur deuxième version, dont vous pouvez trouver la traduction française ici.
En France, ces travaux ont été repris et adaptés par l'association BrailleNet qui a créé le label AccessiWeb et qui propose de mesurer la conformité des sites Web aux standards d'accessibilité.

Les référentiels sont constitués de dizaines de critères de succès à respecter lors du développement d'un site web, classés par thèmes (images, cadres, couleurs, multimédia, tableaux, liens, scripts, éléments obligatoires, structuration et présentation de l’information, formulaires, navigation…). Chaque critère appartient à un niveau d'accessibilité (voir tableau ci-dessous).

Niveaux d'accessibilité par référentiel :
Niveaux WCAG 2.0Niveaux AccessiWeb 2.1Objectif
ABronzeAtteindre un niveau d'accessibilité minimal.
AAArgentAméliorer le niveau d'accessibilité (recommandé).
AAAOrAtteindre un niveau supérieur d'accessibilité (réservé pour certains projets en fonction de contenus spécifiques concernés).

L'objectif des règles d'accessibilité est de rendre les contenus Web perceptibles, utilisables, compréhensibles et robustes quels que soient les handicaps des utilisateurs.

Règles et techniques

Pour illustrer quelques unes des règles d'accessibilité, nous allons prendre comme exemple le présent site qui s'efforce de respecter le niveau AA d'accessibilité. Certaines règles sont appliquées directement dans le code source de la page et ne sont pas modifiables. D'autres paramètres liés à l'accessibilité peuvent en revanche être choisis par l'utilisateur depuis la page habillage.

Respecter les normes. Le langague utilisé pour écrire les pages Web est le HTML ou son successeur, le XHTML. Ce langage utilise des balises pour mettre en forme et structurer une page Web. Par exemple, pour mettre en gras un texte, on utlise la balise strong. Comme tout langage (ou langue), il a une syntaxe précise. Ce que tout développeur Web doit faire, c'est de respecter cette syntaxe afin d'éviter tout problème d'affichage ou comportement hératique. En effet, lorsque votre navigateur charge une page Web et qu'il rencontre une erreur (une balise non fermée ou non standard par exemple), il essaie de lui-même de la corriger. La plupart du temps cela fonctionne bien. Mais s'il y a trop d'erreurs ou dans des cas complexes, l'affichage de la page peut être incorrect. Le respect des normes permet d'éviter ces désagréments. Ce n'est pas une règle d'accessibilité à proprement parler mais un préalable.

Séparer le fond de la forme. C'est le second préalable qui rendra les règles d'accessibilité plus facilement applicables. Pour cela, on a recours aux CSS (feuilles de style en cascade). Ces fichiers, liés à la page, stockent toutes les informations relatives à la mise en forme (couleurs, tailles du texte et des titres, positionnement des blocs, images de fond…). Il ne reste plus dans la page que le contenu textuel et les balises HTML permettant de structurer la page. Le but est de permettre à un utilisateur qui le souhaite de désactiver les feuilles de style ou d'utiliser les siennes à la place.
Ce site vous permet par exemple de désactiver toutes les feuilles de style (page habillage, rubrique « positionnement et couleurs », menu déroulant « style / position », valeur « aucun style »).

Structurer l'information. L'utilisation des balises appropriées permet aux visiteurs utilisant un lecteur d'écran (les non voyants) de mieux s'y retrouver et de naviguer plus facilement sur un site Web : une page doit obligatoirement comporter un ou des titres en indiquant la hiérarchie (balises h1 à h6), des listes pour les menus (balises ul ou ol), les abréviations et acronymes doivent (si possible) être définis… Toute page Web doit obligatoirement indiquer :

Faciliter la navigation. En plus d'un code source correct et bien structuré, chaque page doit comporter :

Contrôler la taille du texte. Les textes doivent être définis dans une unité relative (em ou pourcentage) mais pas en taille fixe (point ou pixel). De plus, un site Web accessible doit permettre à l'utilisteur d'augmenter la taille du texte s'il le désire. Ce site vous permet d'agrandir le texte jusqu'à 300 %, de façon permanente, pour tout le contenu de la page (menus compris) ou uniquement pour le contenu éditorial (page habillage, rubrique « texte », champs « taille du texte » et « appliquer le zoom »).

Proposer des alternatives textuelles aux images. Sur un site Web, il y a 2 types d'images : les images décoratives et les images informatives (images utilisées dans un menu de navigation par exemple). Dans tous les cas, la balise image doit comporter l'attribut alt, alternative textuelle qui permet de décrire l'image. Dans le cas d'une image décorative, cet attribut doit être vide de préférence. Dans le cas d'une image informative, le texte associé à l'image doit apporter l'information nécessaire à la compréhension du contenu auquel l’image est associée. En effet, l'attribut alt est utilisé à la place de l'image par les lecteurs d'écran ou lorsque l'utilisateur a choisi de ne pas charger les images d'un site (pour charger les pages plus rapidement par exemple). Si l'image ne peut être remplacée par du texte, le site risque alors d'être inutilisable.
Dans certains cas, lorsque l'image est plus complexe, il peut être nécessaire d'utiliser l'attribut longdesc qui contient l'adresse d'une page ou d'un emplacement dans la page contenant une description détaillée de l'image.

Rendre les couleurs « perceptibles ». Sur une page, une information ne doit pas être donnée uniquement par la couleur. Par exemple, si dans un formulaire vous indiquez que les champs (cases à remplir, menus déroulants…) de couleur rouge sont obligatoires, sans autre moyen de les distinguer, un utilisateur ne distinguant pas cette couleur sera bien embêté pour savoir quel champ il doit renseigner.
Le contraste entre les couleurs du texte et de son arrière-plan doit également être assez élevé. Sinon, le site doit proposer un moyen d'augmenter ce contraste. Ce site vous permet d'afficher les pages en noir sur blanc, en blanc sur noir ou sans aucune couleur (page habillage, rubrique « positionnement et couleurs », menu déroulant « couleurs du site »).

Expliciter les liens. Toujours afin de rendre la navigation plus aisée, il convient de rendre les liens compréhensibles, c'est à dire que le contexte autour du lien soit assez explicite. Dans le cas contraire, on doit utiliser l'attribut title dans les liens afin d'expliquer à l'utilisateur où va le mener le lien. Le cas échéant, il faut également indiquer à l'utilisateur si le lien va ouvrir une nouvelle fenêtre.

Scripts. Si un site Web utilise des scripts dans ces pages (ce qui est généralement le cas), il faut s'assurer que le site est utilisable sans scripts et que ceux-ci sont utilisables au clavier. Au cas où tout ou partie du site ne peut pas fonctionner sans script (paiement en ligne par carte bancaire, par exemple), la moindre des politesses est d'avertir l'utilisateur que les scripts sont requis. Velle ce fait par un texte d'avertissement inclus dans une balise noscript.
Comme nous l'avons vu précédemment, ce site utilise des scripts Javascript pour le confort de navigation ou des effets d'affichage, mais il reste entièrement utilisable si Javascript n'est pas activé dans votre navigateur.

Tableaux. Dans une page Web, il existe 2 types de tableaux :

Retour


Cartes de visite

(format : 55 x 85 mm, impression recto ou recto-verso quadri, papier : 350 gr/m2 couché demi-mat) :
15 € HT les 100 premières,
5 € HT les 100 suivantes
.

Ce site s'affiche mieux dans un navigateur conforme aux standards. | © 2012 - 2019 CIDP | Mentions légales | Haut de page