Charte d'accessibilité web de Service Apps


Les recommandations d'accessibilité web visent à rendre les contenus plus faciles d'utilisation aux utilisateurs en général, et plus accessibles à une plus grande population de personnes en situation de handicap (personnes aveugles ou malvoyantes, personnes sourdes ou malentendantes, personnes ayant des troubles d'apprentissage, des limitations cognitives, des limitations motrices, des limitations de la parole, de la photosensibilité et les personnes ayant une combinaison de ces limitations fonctionnelles).

   Open url.png voir Principes et niveaux d'accessibilité du web

Pour répondre au niveau d'accessibilité de niveau AA recommandé par l'Union Européenne, les modèles Service Apps respectent les critères suivants :

  • utilisation de contrastes élevés des couleurs et adaptation de la taille des polices ;
  • accès au plan du site depuis toutes les pages principales du modèle ;
  • indications alternatives au survol des objets avec la souris ou lors de l'utilisation d'un lecteur d'écran ;
  • structure et hiérarchisation pertinentes des informations.

Remarques

  • Les modèles Service Apps sont fournis avec une accessibilité de niveau AA.
    • Tous les critères qui sont présents nativement dans les modèles sont de la responsabilité du créateur de l'application Service Apps : critères de contraste, taille du texte, navigation clavier, indications alternatives.
    • Toute modification apportée à une application créée à partir d'un modèle et tout ajout d'éléments externes à Service Apps sortent du cadre de cette responsabilité. L'auteur des modifications doit alors s'assurer lui-même que les critères d'accessibilité de niveau AA sont toujours remplis.
  • Des outils permettent de vérifier que les paramétrages respectent bien les critères d'accessibilité de niveau AA : WAVE Tool, Axe Accessibility, ...

Contraste des couleurs et taille des polices

Description

Le contraste entre la couleur du fond et le texte doit être suffisamment élevé.

La taille des polices doit permettre une lecture aisée.

Implémentation

Ces critères sont appliqués sur l’ensemble des pages des modèles, l'ensemble des fenêtres superposées (titres et boutons) et des boutons (boutons génériques / contextuels).

exemple  Application au modèle Executive Dashboard
Contrast and policy - Example.png

Exemples de test de mise en conformité

Contraste

Note : Les tests sont réalisés avec l'outil Wave.

Test de l'accessibilité sur une page du modèle Executive Dashboard

  • Avant mise en place de l'accessibilité : 8 erreurs critiques (principalement par manque de textes alternatifs sur les images) et 19 erreurs de contraste
             Contrast - Test before.png
  • Après mise en place de l'accessibilité : 0 erreur critique et 0 erreur de contraste
             Contrast - Test after.png
     

Détail d'une erreur de contraste

  • Avant mise en place de l'accessibilité : le contraste est de niveau trop faible
             Contrast - Test before error detail.png
  • Correction apportée sur le widget, en assombrissant la couleur de fond
             Contrast - Correction error detail.png
  • Après mise en place de l'accessibilité
             Contrast - Test after error detail.png

Taille de la police

Détail d'une erreur de taille de la police

  • Avant mise en place de l'accessibilité : la taille de la police du texte est trop petite
             Policy - Test before error detail.png
  • Correction apportée sur le widget, en augmentant la taille de la police
             Policy - Correction error detail.png

Plan du site

Description

Une page Plan du site est disponible sur chacun des modèles Service Apps afin de faciliter la navigation.

  • Cette page est accessible via un lien positionné au même endroit sur l'ensemble des pages principales de chaque modèle.
  • Elle affiche la liste des pages principales du modèle (entrées de menu) et la liste des liens externes. Des liens hypertextes permettent un accès direct aux pages concernées.

        Map site - Example.png

Notes

  • Les pages de détail étant dynamiques (elles nécessitent la recherche préalable d'un élément), elle ne peuvent pas être affichées dans le plan du site.
  • L'identifiant du lien vers la page Plan du site est identique sur l'ensemble des pages de l'application. Il est renseigné via un widget Secured Html positionné au même endroit sur l'ensemble des pages de l'application.

Implémentation

La page Plan du site contient un widget Secured Html. Ce widget contient la liste des pages du modèle.

  • Ouvrez l'éditeur Html.
  • Référencez chaque page principale de l'application en ajoutant une ligne dans la balise <div>...</div>.
  • Chaque ligne comprend des balises <span>...</span> avec les informations suivantes :
    • l'identifiant de la page ;
    • le nom de la page.

exemple  Ajout d'une page Nouvelle page

Map site - Creation.png

Procédure : Comment référencer une nouvelle page principale dans le plan du site

1. Récupérez les informations de la nouvelle page.

  • Affichez votre nouvelle page dans l'éditeur graphique.
  • Lancez l'application via EVApps - GUI - Execute icon.png.
  • Copiez l'identifiant de la page qui se trouve à la fin de l'URL dans la barre d'adresse du navigateur internet.
             Map site - Page ID.png

2. Mettez à jour la page Plan du site.

  • Ouvrez la page Plan du site dans l'éditeur graphique.
  • Ajoutez une ligne dans la balise <div>...</div>.
    Note : Ordonnez les lignes suivant l'ordre des entrées de menu.
<br><span pagelink="Identifiant de la page">Nom de la page</span>

3. Ajoutez un widget pointant vers la page Plan du site sur votre nouvelle page.

  • Ouvrez votre nouvelle page dans l'éditeur graphique.
  • Ajoutez un widget Secured Html, positionné au même endroit que sur les autres pages de l'application.
  • Ouvrez l'éditeur Html.
  • Renseignez le lien vers la page Plan du site via l'instruction suivante.
<span style="cursor: pointer;" pagelink="Identifiant de la page Plan du site">Plan du site</span>

Indications alternatives

Description

Des indications alternatives sont mises en place sur les entrées de menu et sur les images.

Elles sont affichées au survol de l'objet avec la souris et lors de l'utilisation d'un lecteur écran (un lecteur écran lit vocalement le contenu d’une page web ou affiche le contenu sur une tablette braille).

Implémentation

L'alternative textuelle des menus est définie via l'attribut alt sur les icônes des entrées de menu.

        Alternative indication menu - Configuration.png

L'alternative textuelle des images est définie via l'attribut alt placé à l'intérieur de la balise <img>.

<img src="Nom de l'image.png" alt="texte alternatif">

        Alternative indication image - Configuration.png

Hiérarchisation des informations

Description

La hiérarchie des titres et des informations est définie de façon logique et pertinente sur chaque modèle Service Apps via les balises h1 à h6 appliquées aux titres des contenus.

  • La balise h1 est utilisée pour le titre principal de la page.
  • Les balises suivantes sont ensuite appliquées suivant l'importance des informations.

exemple  Ajout de balise h1 au niveau des titres principaux et du logo.

Hierarchy - Example.png

Règles d'implémentation

  • Une page ne doit pas contenir d’omissions de balises : il n'est pas possible de passer d’une balise h1 à une balise h3.
  • Tous les niveaux ne sont pas nécessairement appliqués à l'intérieur d'une page.
  • La balise h1 doit être présente une seule fois sur chaque page.

Procédure : Comment hiérarchiser les informations

1. Allez sur le widget contenant une information à hiérarchiser.

  • Les balises peuvent être placées au niveau de l'ensemble des widgets de chaque page, ainsi que dans les sections Header et Footer.

2. Ouvrez l'éditeur Html.

3. Ajoutez l'instruction suivante.
Note : Remplacez X dans la balise <hX> par le niveau de titre souhaité.

<hX>Libellé du titre</hX>

        Hierarchy - Implementation.png

Tags:
Modifié par Utilisateur inconnu le 2020/04/08 09:47
Créé par Administrator XWiki le 2020/01/18 13:27

Raccourcis

L'actualité mensuelle
•  Newsletter

Tous les changements
•  Service Manager
•  Service Apps
•  Self Help

Glossaire

Powered by XWiki ©, EasyVista 2020