Règle et effort d'accessibilité de MyPixelFactory.net
Un site accessible ?
Tous les internautes n'ont pas la possibilité de naviguer adéquatement avec une souris.
Rendre un site Internet accessible c'est en permettre l'accès à toutes personnes souffrant d'handicap (déficience sensorielle, motrice, intellectuelle ou cognitive).
L'accessibilité d'un site web peut se définir comme la possibilité pour le plus grand nombre d'accéder à un site Internet indépendemment de l'équipement, de la technologie utilisée et des handicaps éventuels.
Pour en savoir un peu plus sur les Sites Internet accessible.
Les Accesskeys
Afin de neutraliser ce problème (voir chapitre au dessus), ce site a été conçu de manière à être entièrement accessible à partir des touches du clavier : Les accesskeys.
Voici les combinaisons de touches pour utiliser les raccourcis permettant d'accéder rapidement aux différentes rubriques,en fonction des navigateurs.
Remplacez le terme [accesskey] par le raccourci de votre choix :
IE Windows : Alt et [accesskey], puis Entrée
Mozilla, Netscape, K-Meleon, FireFox Windows: Alt et [accesskey]
MSIE Macintosh: Ctrl et [accesskey], puis Entrée
Safari 1.2 Macintosh: Ctrl et [accesskey]
Mozilla, Netscape Macintosh: Ctrl et [accesskey]
Galeon/Mozilla/FireFox Linux: Alt et [accesskey]
Netscape 4, Camino, Galeon, Konqueror avant la version 3.3.0, Omniweb, Safari avant la version 1.2, Opera Windows/Linux avant la version 7, ne supportent pas les accesskeys.
Liste des raccourcis appliqués sur mypixelfactory.net
Liste des raccourcis de la navigation principale :
Pour ces accesskeys, j'ai optés pour les raccourçis les plus communnément utilisés sur les sites internet :
Touche " 0 " = Accessibilité
Touche " 1 " = Accueil
Touche " 2 " = Debut du contenu texte de la page
Touche " 5 " = Plan du site
Touche " 7 " = Me contacter
Touche " s " = Moteur de recherche
Liste des raccourcis de la navigation secondaire :
Pour ces accesskeys, j'ai optés arbitrairement pour les touches de la ligne du haut sur un clavier français : c'est à dire a partie de "a" pour le premier onglet, puis "z" pour le second et ainsi de suite.
Touche " a " = présentation
Touche " z " = Portfolio
Touche " e " = Prestations
Touche " r " = Devis
Navigation par tabulation :
Vous pouvez passer d'un lien à l'autre (dans un ordre logique) en vous servant de la touche tabulation.
Une fois le lien choisi, appuyez sur la touche Entrée pour accéder à la page désirée.
Scripts :
Les quelques scripts utilisés sur le site n'influent nullement sur la navigation ou la consultation des pages. Celles-ci restent accessibles sans support javascript (priorité 1)
Langues :
Le texte existe en français .les éventuels changements de langue au sein d'un texte sont signalés à l'aide de l'attribut xml:lang;.
La langue principale de chaque page est spécifiée dans les attributs xml:lang et lang (priorité 3).
Structure et présentation :
La distinction entre présentation et contenu permet de préserver la cohérence du texte en dehors de toute feuille de style: titre, menus, rubriques, contenu etc. (priorité 1).
La mise en page du site repose sur des feuilles de style externes (priorité 2).
La présentation du site et des thèmes reste cohérent sur l'ensemble du site. Un même type de feuille de style est appliqué tout au long du site (priorité 3).
Les pages du site sont structurées à l'aide des éléments h1, h2, h3 et h4 employés dans l'ordre indiqué (priorité 2).
Couleurs :
Les informations délivrées par des couleurs sont également accessibles à l'aide d'autres traits distinctifs: bordure, soulignement, grasse, fonte, etc. ( priorité 1 ).
Le niveau de contraste des couleurs d'arrière plan et d'avant plan peut être perçu par des personnes souffrant d'une déficience de perception des couleurs ou sur un écran noir et blanc ( priorité 2 ).
Formulaires :
Chaque élément apparent des formulaires est associé à l'élément label (priorité 2).
Pour éviter un traitement incorrect des contrôles vides, des valeurs par défaut sont incluses dans les zones de texte ( priorité 3 ).