Développer des applications web cartographiques accessibles

L'accessibilité web a pour but de rendre accessible le contenu consommable sur internet aux personnes présentant une situation de handicap, que ce handicap soit visuel, auditif, cognitif, moteur, etc.

Le WCAG (Web Content Accessibility Guideline) nous propose des directives à suivre pour développer des applications répondant à ces critères d'accessibilité. Esri s'appuie sur ces normes pour vous mettre à disposition des ressources de développement d'applications web cartographiques accessibles, que ça soit dans au travers de son Design System (Calcite) ou au sein de son API JavaScript.

Au cours de l'Esri Developer Summit, une session présentée par Kelly Hutchins et Kitty Hurley a été consacrée à ce sujet. Je vous propose dans cet article de passer en revue les élément abordés durant cette présentation pour mettre en œuvre des bonnes pratiques permettant d'augmenter l'accessibilité à vos applications web cartographiques avec l'API JavaScript et le Calcite Design System d'ArcGIS. 

Contraste

Le contraste des couleurs est essentiel pour les personnes souffrant de basse vision, de dégénérescence maculaire due à l'âge, de déficience de la vision des couleurs (daltonisme) ou d'une variété d'autres déficiences liées à la vision. Être conscient du contraste des couleurs ou des combinaisons spécifiques de couleurs est essentiel pour créer une application web accessible. Le critère WCAG 1.4.3 : Contraste (minimum) vise un ratio de contraste de 4,5 à 1 lors de la présentation visuelle du texte et des images

Modifier le ratio de contraste des composants web de Calcite

Par défaut,les couleurs de Calcite sont conformes au critère de WCAG 1.4.3 : Contraste (minimum), ou niveau AA. Il vous est possible d'aller plus loin pour correspondre au critère avancé de contraste ( WCAG 1.4.6: Contrast (Enhanced), ou niveau AAA) en modifiant les variables CSS des composants Calcite. Par exemple, en modifiant la variable CSS du composant calcite-ui-danger comme ci-dessous, on atteint sur fond blanc un ratio de contraste supérieur à 1:7 comme recommandé par le WCAG.

  body {
    --calcite-ui-danger : #A92519;
    }

A gauche, le composant calcite-ui-danger par défaut et à droite le même composant avec modification du CSS pour un meilleur contratse

Ajouter du contraste à vos cartes

Esri met à disposition des fonds de carte à fort contraste, en thème clair ou sombre, que vous pouvez utiliser dans vos applications cartographiques.

Vous pouvez vous servir du widget BasemapToggle de l'API JavaScript d'ArcGIS pour permettre à l'utilisateur de passer d'un fond de carte clair à un fond de carte sombre selon par exemple la luminosité de son environnement.

Pour cela, commencez par ajouter les deux fonds de carte en tant qu'objets :

const highContrastLightBasemap = new Basemap({
  portalItem: {
    id: "084291b0ecad4588b8c8853898d72445"
  },
  title: "High contrast light theme",
  id: "high-contrast-light"
});

const highContrastDarkBasemap = new Basemap({
  portalItem: {
    id: "3e23478909194c54992eaaee78b5f754"
  },
  title: "High contrast dark theme",
  id: "high-contrast-dark"
});

Dans votre objet carte, passez l'un des fonds de carte en tant que propriété basemap :

const map = new Map({ 
  basemap: highContrastLightBasemap 
});

Ajoutez ensuite le widget BasemapToggle, avec la propriété nextBasemap définie sur le second fond de carte :

const baseToggleWidget = new BasemapToggle({ 
  view: view, 
  nextBasemap: highContrastDarkBasemap, 
  container: baseToggleDiv 
}); 

Voici le résultat obtenu :

Selon le fond de carte choisi par l'utilisateur, vous pouvez également mettre à jour dynamiquement les éléments graphiques présents sur votre carte pour toujours assurer un contraste suffisant. En utilisant reactiveUtils, vous pouvez observer lorsque le fond de carte change. Une fois que la vue a terminé de se mettre à jour, vous pouvez utiliser la fonction getBackGroundColorTheme() et modifier la couleur de vos graphiques en conséquence.

Navigation

Les attributs de focalisation (focus), qui consistent à souligner, mettre en évidence ou placer une forme autour d'un élément actif, sont importants pour l'accessibilité parce qu'ils indiquent aux gens où ils se trouvent sur l'écran et fournissent un contexte pour la navigation, tout en permettant une meilleure navigation au clavier. Le critère WCAG 2.4.3 indique que l'ordre de focalisation garantit que les utilisateurs peuvent naviguer de manière séquentielle dans le contenu, y compris à l'aide d'un clavier. Voyons comment ajouter un focus sur une fenêtre attributaire à son ouverture et comment faire changer le focus d'un widget à un autre pour faciliter la navigation.

Ajouter un focus sur un widget

Utilisez l'option shouldFocus pour déplacer le focus sur la fenêtre popup lors sur la méthode Popup.open.

view.popup.open({ 
  location: event.mapPoint, 
  shouldFocus: true 
});

Changer le focus d'un widget à un autre 

Avec reactiveUtils, nous pouvons déplacer le focus d'un widget vers un autre. Dans l'exemple ci-dessous, le focus va se déplacer du widget de recherche à la popup lorsque la popup s'ouvre, et inversement lorsque la popup est refermée.

Une fois la recherche effectuée par l'utilisateur, lorsque le popup devient visible, le focus passe du widget de recherche au popup en utilisant l'événement search-complete avec l'état watch de reactiveUtils.

Ensuite, un reactiveUtils séparé surveillera la fermeture de la popup, où le focus sera alors redonné au widget de recherche.

search.on("search-complete", (results) => { 
  reactiveUtils.watch(() => view.popup.visible === true, () => { 
    view.popup.focus(); 
    reactiveUtils.watch(() => view.popup.visible === false, () => { 
      search.focus(); 
    }, { once:true })
  }, { once:true }) 
});

Animations

Les personnes souffrant de troubles vestibulaires ou de lésions cérébrales traumatiques et susceptibles d'être déclenchées par des animations peuvent envisager de paramétrer leur système d'exploitation et leur navigateur de manière à réduire les animations et autres éléments interactifs susceptibles de provoquer des maux de tête, des nausées ou des crises d'épilepsie. Le critère WCAG 2.3.3 préconise que les animations puissent être désactivées, à moins que l'animation ne soit une fonction essentielle de l'information transmise.

 

Réduction des animations de Calcite  

Calcite minimise les animations lorsque les animations du système sont désactivées ou réduites. Lorsque les animations sont activées, elles sont exécutées. Au contraire, lorsque les animations sont désactivées ou réduites, elles sont automatiquement fortement réduites.

 

Réduction des animations de votre carte

Les animations de cartes peuvent être réduite ou supprimées selon les préférences de navigateur de l'utilisateur à l'aide de prefers-reduced-motion. Lorsque les animations sont activées, certaines fonctions de la carte, telles que le zoom sur un élément, incluent les animations. Lorsque les animations sont désactivées ou réduites dans le navigateur, une fonction peut être ajoutée pour réduire les animations de la carte.

A gauche, l'animation de zoom est activée. A droite, elle est désactivée.

Par exemple, nous allons voir comment désactiver les animations d'une popup. Vous allez commencer par ajouter la fonction goToOverride au sein de la méthode goTo de votre popup :

view.popup.goToOverride = goToOverride;

Ensuite, ajoutez une nouvelle fonction pour définir une requête de média avec la fonctionnalité CSS prefers-reduced-motion, qui, lorsque l'animation est désactivée sur le système d'exploitation, minimise les mouvements non essentiels dans la carte pour les utilisateurs :

function goToOverride (view, goToParams) { 
  const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); 
  if (mediaQuery.matches) { 
    goToParams.options = { 
      ...goToParams.options, 
      ...{ 
        animate: false, 
      }, 
    }; 
  } 
  return view.goTo(goToParams.target, goToParams.options); 
}

Ressources

Si vous voulez explorer une ou plusieurs de ces notions en profondeur, vous pouvez vous rendre sur le Github de Kelly Hutchins où vous retrouverez le code des différentes démonstrations. 

N'hésitez pas également à consulter cet article pour en apprendre plus la première version de production du Calcite Design System sortie en janvier 2023, ou à vous mettre à jour sur les nouveautés de la version 4.26 de l'API JavaScript d'ArcGIS avec cet article.