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
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"
});
const map = new Map({
basemap: highContrastLightBasemap
});
const baseToggleWidget = new BasemapToggle({
view: view,
nextBasemap: highContrastDarkBasemap,
container: baseToggleDiv
});
Navigation
Ajouter un focus sur un widget
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.
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
Réduction des animations de votre carte
A gauche, l'animation de zoom est activée. A droite, elle est
désactivée. |
view.popup.goToOverride = goToOverride;
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);
}
Aucun commentaire:
Enregistrer un commentaire