L'accessibilité du site web pour les non-voyants

L'accessibilité de notre site web pour les non-voyants est un paramètre qui a été naturellement pris en compte lors du projet de refonte du site de Mira Europe :

• le site utilise le système de gestion de contenu (ou CMS) Contao qui respecte les standards d’accessibilité du web (W3C/WAI)
• le rendu vocal a été systématiquement testé durant toutes les phases de construction/validation du site

La structure du site

Nous avons choisi d'adopter une structure facilitant le parcours et le repérage des internautes utilisant un lecteur vocal :

• le nombre de rubriques est réduit (cinq rubriques principales)
• la profondeur du site est limitée à deux niveaux (rubriques et sous-rubriques)

Le site est constitué d'une page d’accueil, des pages de rubriques et sous rubriques et de pages de formulaire (recherche, contact) ainsi que d'une page présentant le plan du site.

Les touches d'accès rapide (Access Keys)

Nous avons respecté les recommandations standard et affecté un accès direct à certaines pages du site :

• 0 : la page accessibilité (cette page)
• 1 : la page accueil
• 3 : le plan du site
• 9 : le formulaire de contact avec captcha par calcul

L'utilisation de ces touches d'accès rapide est propre à chaque navigateur internet, voici la liste des méthodes d'accès que nous avons testées sur les navigateurs les plus courants :

• Firefox version 3.x : Alt+Shift+Chiffre (remarque : la validation du lien par la touche Entrée est nécessaire s'il y a plusieurs occurences du lien sur la page)
• Internet Explorer 7 et 8 : Alt+Chiffre puis Entrée
• Internet Explorer 6 : Alt+Shift+Chiffre puis Entrée
• Google Chrome 10 : Alt+Shift+Chiffre

Vous pouvez trouver une liste plus complète de l'utilisation des Access Keys pour les différents navigateurs sur Wikipédia.

La structure visuelle des pages

À quelques légères variantes, toutes les pages ont une maquette identique à savoir :

• Un bandeau en haut de page où figure à droite le logo de Mira Europe suivi du menu de navigation générale du site, sous le menu se trouve une galerie de photos représentative de notre action. Cette galerie est au-dessus d'un texte rappelant la mission de Mira Europe, tout à droite (à gauche des photos et du texte) se trouvent une photo de chiots et un texte avec un lien incitant à faire un don.
• La page est ensuite divisée en 3 colonnes :
  
  • La colonne de gauche contient soit un formulaire rapide d'inscription à notre Newsletter (Mira Info) soit un menu permettant d'accéder aux sous-rubriques de la rubrique à l'écran puis une liste de petits articles apportant des réponses rapides aux questions les plus fréquentes sur l'action de Mira Europe avec éventuellement un lien vers les pages détaillées correspondantes.
  • La colonne principale contient pour la page d’accueil et les pages rubriques un article de présentation de la rubrique et les introductions (avec lien) vers les articles d'actualités ou de détails de cette rubrique, pour les autres pages (contact, recherche et plan) elle contient le formulaire ou les informations demandées.
  • La colonne de droite commence par le formulaire de recherche rapide dans les articles, il est suivi une liste de petits articles présentant les diverses actualités de Mira Europe avec éventuellement un lien vers le détail de cette actualité.
• Le pied de page est constitué d'un menu proposant l'accès à des pages particulières (accessibilité, plan du site...) ou des rubriques spécifiques (délégations, presse...).

La structure vocale des pages

Afin de faciliter l’accès aux non-voyants, la maquettre des pages est organisée de manière différente pour la lecture vocale dans le but :

• d'éviter la relecture d'éléments redondants et communs aux différentes pages du site
• d'aider le repérage des éléments constitutifs de la page
• de faciliter le déplacement non visuel entre ces éléments 

Les différents éléments des pages sont rendus vocalement dans l'ordre suivant :

• le menu général du site Mira Europe (accueil, rubriques, contact)
• la colonne centrale (article et introductions)
• la colonne de droite (recherche rapide et actualités)
• la colonne de gauche (menu sous- rubrique et questions)
• le pied de page (menu et coordonnées Mira Europe)

Le déplacement dans une page par niveaux de titre

Les différents niveaux de titres sont compris par les lecteurs vocaux qui donnent la possibilité de se déplacer dans une page de titre en titre d'un niveau précis (touches 1 à 6). C'est pourquoi nous avons choisi de permettre le déplacement par niveau titre entre les éléments d'une page.

Pour ce faire, nous avons affecté des niveaux précis de titre à chaque type d'élément :

• Le niveau 1 est le niveau du titre de l'article principal de la page (un seul par page).
• Le niveau 2 est le niveau du ou des titres des introductions des articles associés à la page (aucun, un ou plusieurs) et le titre des listes d'actualités et de questions.
• Le niveau 3 est le niveau des sous-titres d'un article (principal ou associé), le niveau des titres des différents résultats de recherche et des sous-titres du formulaire de contact.
• Le niveau 4 est le niveau des titres des petits articles des colonnes gauche (questions) et droite (actualités)
• le niveau 5 est le niveau affecté à chaque menu de la page (menu principal, menu sous-rubrique si existant, menu pied de page).
• le niveau 6 est le niveau affecté aux minis formulaires de recherche rapide et à l'inscription à Mira Info (si existant).

N'hésitez pas à donner votre avis !

L'équipe Web de Mira Europe est à l'écoute de toutes les remarques, questions et suggestions que vous pouvez formuler sur l'accessibilité de ce site pour les non-voyants. N'hésitez pas à donner votre avis à l'aide du formulaire de contact (touche d'accès 9) .