Cette page vous permet de connaître et de publier des astuces simples pour améliorer l'accessibilité de vos pages web.
L'accessibilité concerne autant les pages statiques que les contenus dynamiques, autant le code HTML que le design et l'ergonomie. N'oubliez pas que la qualité du code et le respect des standards sont généralement un premier pas vers un site accessible.
Plus d'informations sur la page officielle française de la Web Accessibility Initiative.
«Le pouvoir du web est dans son universalité. Que chacun y ait accès quelque soit ses difficultés est un aspect essentiel.»
(Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web).
À l'origine, l'accessibilité du web doit aider les personnes en situation de handicap (déficience visuelle, difficulté avec les outils de navigation…), ou peu à l'aise avec Internet (ex: les seniors), à naviguer sur des sites.
Désormais, ce concept couvre aussi les multiples conditions matérielles de l'internaute :
L'approche sémantique du code HTML a été trop longtemps méprisée. Elle favorise pourtant l'accessibilité, optimise les pages pour les moteurs de recherche, et les rend également plus faciles à comprendre et à maintenir.
Parce qu'un site élégant peut aussi être un site accessible.
Il s'agit d'adapter vos pages aux différents périphériques que peuvent utiliser les internautes.
Le responsive design est principalement basé sur l'usage des unités relatives dans les CSS. Merci de vous reporter à la page dédiée.
L'adaptive design concerne tous les langages utilisés pour concevoir la page. Il s'agit non seulement d'adapter le design, mais aussi le contenu, les fonctionnalités, etc. pour les différents périphériques.
Les notions de «dégradation élégante» et d'«amélioration progressive» sont ici courantes.
La typographie d'un site web est un élément de design à part entière. Non seulement elle participe de l'identité graphique du site, mais en plus elle communique déjà de l'information (par la dureté ou la rondeur des polices, par leurs couleurs, etc.). Enfin, la typographie doit assurer un confort de lecture.
Voici quelques conseils généraux.
NOTA: la réalisation de certains caractères peut être difficile sur des claviers standards. La disposition BÉPO est un choix éclairé pour, entre autres, écrire correctement le français.
p, ul, ol {line-height: 1.5em;}
Aux origines du web, l'élément HTML <table>
(tableau) a souvent été détourné de sa fonction pour servir de simple mise en forme.
Aujourd'hui, les tables HTML ne doivent plus servir qu'aux données tabulaires. Néanmoins, dès CSS 2.1, on peut réaliser des tables CSS pour faciliter la mise en page.
Le résultat ? Une page dont les contenus ne débordent pas et sont toujours bien répartis et alignés, même si vous rajoutez de nouvelles “cellules” ou si vous en remplissez une plus que d'autres. Ce type de mise en forme peut aussi subir de forts zooms et dézooms sans sortir de la page.
Les possibilités :
Interface utilisateur, arborescence du site, conditions de navigation : un site ergonomique est aussi plaisant à utiliser.
Penser à :
Pour faciliter la navigation dans une grande page de texte, on peut :
Le web évolue ; les façons de naviguer aussi. Aujourd'hui, les formulaires, les designs interactifs et les applications riches améliorent l'expérience utilisateur. De tous les utilisateurs.
Que vous soyez intégrateur amateur ou professionnel, vour ne pouvez faire l'impasse sur la validation de votre code. Pour cela, les validateurs du W3C (World Wide Web Consortium) demeurent une référence :
WebAIM propose WAVE, un validateur spécialisé dans l'accessibilité.
Si votre site est déjà conçu, Juicy Studio propose un plug-in sous Firefox pour évaluer une page entière.
Un clic droit sur la page pour lancer le test, et hop! Les rapports de contrastes, d'intensité, et les différences de couleurs apparaissent à l'écran, pour chaque balise et selon les critères des WCAG.
Que l'écran soit petit ou grand, votre page doit rester lisible et utilisable. Sous Firefox, l'outil Responsive Design View de Web Developer peut servir, même si rien ne vaut un test sur supports et navigateurs réels !