Accessibilité

Ce document décrit différents choix de conception pour améliorer l’accessibilité d’un site Elgg.

Formulaires

Les champs de saisie doivent toujours être associés à un label. Lorsque vous utilisez elgg_view_field($options) pour dessiner des champs sur un formulaire, vous devrez passer $options['#label'] = elgg_echo('my_field:label') pour avoir un label correcte avec votre champ.

Si vous disposez d’un formulaire qui effectuera une recherche une fois soumis, il est recommandé d’ajouter 'role' => 'search' aux attributs de votre formulaire. Vous pouvez fournir cela dans $form_vars en utilisant elgg_view_form().

Images

Lors de l’utilisation de elgg_view('output/img', $options), il est recommandé de fournir une description alt de l’image. Elgg signalera les erreurs manquantes aux développeurs dans le journal des erreurs.

Titres

Les titres doivent servir à structurer une page. Il devrait toujours y avoir un h1 sur la page, et il ne devrait y avoir aucune rupture dans l’arborescence (donc pas de h3 sans un h2).

Elgg utilise h1 pour le titre de la page (comme “Tous les blogs”, le titre d’un blog ou le nom d’un groupe sur la page de profil du groupe). Le titre h2 est utilisé par les modules d’une page, comme un module “info”, un widget, ou un module de la barre latérale.

Le contenu généré par l’utilisateur avec balisage, par exemple une description d’un blog, ne devrait pas autoriser l’utilisation de h1, mais commencer par h2 comme titre de premier niveau. La configuration du plugin CKEditor gère déjà ce paramètre.

Sections

Une page Web dans Elgg est généralement divisée en sections suivantes :

header pour le contenu de la barre supérieure comme le logo du site, la navigation sur le site et la recherche
main le contenu principal comme la page du blog ou un aperçu des membres
footer se trouve généralement au bas de la page contenant des liens ou d’autres informations relatives au site

Menus

Tous nos menus doivent être accessibles au clavier. Ceci est particulièrement important pour les menus à plusieurs niveaux ou sous-menus. Si vous utilisez la fonctionnalité de menu par défaut d’Elgg en utilisant la fonction elgg_view_menu(), Elgg s’en chargera.

Lors de l’utilisation de elgg_view_menu(), les éléments du menu sont inclus dans une balise HTML nav. Pour permettre aux lecteurs d’écran de savoir quel menu est affiché, l’attribut aria-label est ajouté à l’élément nav pour décrire le menu. Par défaut, Elgg utilise le name du menu, mais il est possible de fournir une traduction. Vous devez enregistrer cette traduction avec la clé suivante : menu:name_of_the_menu:header.