Fermer

novembre 23, 2021

Ajouter un mode adapté à la dyslexie à un site Web —


Résumé rapide ↬

Avec un peu de CSS, nous pouvons adapter nos conceptions Web pour qu'elles soient plus accommodantes pour les personnes dyslexiques. Dans cet article, nous allons explorer ces techniques en ajoutant un mode adapté à la dyslexie à une conception existante.

La dyslexie est peut-être le trouble d'apprentissage le plus courant dans le monde, affectant entre 10 et 20 % de la population mondiale. Cela peut entraîner des difficultés de lecture, d'écriture et d'orthographe, bien que le degré de déficience varie considérablement – certaines personnes sont à peine affectées tandis que d'autres ont besoin d'un soutien supplémentaire.

Meilleures pratiques et conseils existants, tels que l'accessibilité du contenu Web. Les directives (WCAG) nous donnent une base solide pour une conception inclusive et intègrent déjà de nombreux détails qui affectent les lecteurs dyslexiques. Par exemple, les directives WCAG concernant la longueur et l'espacement des lignes correspondent aux recommandations que j'ai trouvées lors de mes recherches. En fait, certaines de ces ressources sont liées dans le document Understanding WCAG 2.1 qui fournit des commentaires détaillés sur les directives.

Nous pouvons nous appuyer sur ces fondements pour offrir un soutien plus ciblé aux différentes communautés, ce qui facilite les choses. interagir avec nos sites Web selon leurs propres conditions. Dans cet article, nous examinerons les moyens de rendre une conception existante adaptée à la dyslexie.

Cet article s'appuie sur des recherches en anglais et peut être généralisé pour couvrir la plupart des langues européennes qui utilisent des écritures latines et cyrilliques. Pour les autres langues et scripts, vous devrez adapter ou même ignorer ces directives.

Sélection de la police

« La police du corps du texte doit être choisie pour sa lisibilité à l'écran, avant tout souci de style. ”

—“Comment appliquer la macrotypographie pour une page Web plus lisible,” Nathan Ford

Lorsque j'ai commencé à rechercher ce sujet, j'ai cru à tort que je devrais limiter ma sélection de polices. Heureusement, les recherches montrent que les polices standard comme Helvetica et Times New Roman sont tout aussi lisibles que les polices spécialement conçues comme Dyslexie ou Open Dyslexic.

Ce que cela signifie pour votre sélection de polices est que vous n'avez qu'à sélectionner des polices en gardant à l'esprit la lisibilité.

Très bien, problème résolu, rentrons à la maison !

Eh bien, pas vraiment. Il s'avère qu'il y a quelque chose de spécial à propos de ces polices spécialement conçues.

— Dr Jenny Thomson

Bien que étude après étude montre peu d'avantages du choix de la police, ils montrent également systématiquement l'espacement entre les lettres et les mots comme le facteur le plus important pour soutenir un lecteur dyslexique. Jon Severs a écrit un très bon aperçu de ces études avec des citations de nombreux chercheurs de premier plan.

La popularité de Comic Sans dans la communauté dyslexique semble être due à l'espacement plus large trouvé dans cette police. , espacement qui a été intégré dans des polices supplémentaires destinées à leur communauté.

En tant que concepteurs, nous avons le pouvoir d'étendre cet espacement à n'importe quelle police, ce qui nous permet de soutenir nos lecteurs sans refonte majeure. Pendant que nous y sommes, nous pouvons encore améliorer les choses en réduisant les distractions et les choix de conception qui peuvent produire l'encombrement visuel qui affecte les lecteurs dyslexiques.

Plus après le saut ! Continuez à lire ci-dessous ↓

Une conception existante

L'exemple CodePen suivant montre une petite conception amusante avec un balisage sémantique et accessible qui a reçu 100 % d'un audit Lighthouse. Il suit les meilleures pratiques, essaie de présenter une identité visuelle forte, a de bons niveaux de contraste et utilise Overpass pour les titres et le corps, ce qui fournit une famille de polices sans empattement unifiée et lisible :

Voir le stylo [Dyslexia-unfriendly design](https://codepen.io/smashingmag/pen/jOLXpgg) par John C Barstow.

Voir le stylo Dyslexia-unfriendly design par John C Barstow.

Ce sera notre point de départ, que nous allons étendre pour construire notre version adaptée à la dyslexie.

Initial Changes

Nous voulons que l'ensemble du document fonctionne ensemble pour soutenir nos lecteurs dyslexiques, nous allons donc commencer par ajouter une classe à l'élément body.

Cela nous permettra d'activer et de désactiver facilement nos nouvelles modifications via JavaScript et facilitera la localisation des règles CSS pertinentes.[19659003]La British Dyslexia Association a publié un style guide en 2018 que nous peut utiliser comme point de départ :

« Un espacement plus important entre les lettres et les caractères (parfois appelé suivi) améliore la lisibilité, idéalement autour de 35 % de la largeur moyenne des lettres. »

« L'espacement entre les mots doit être d'au moins 3,5 fois l'espacement entre les lettres. »

L'unité ch dans CSS est basée sur l'avance du glyphe 0mais en pratique pour les polices proportionnelles peut souvent être utilisée comme un approximation de la largeur moyenne des caractères. Si vous utilisez une police avec un zéro particulièrement étroit ou large, vous devrez peut-être ajuster les nombres ci-dessous.

Nous utilisons Overpass dans notre exemple, qui a un zéro assez standard, nous pouvons donc exprimer le numéros recommandés directement :

.dyslexia-mode {
    interlettrage : 0.35ch ;
    espacement des mots : 1,225 canaux ; /* espacement des lettres 3,5x */
}

Les navigateurs modernes activent par défaut les ligatures communes d'une police, et les navigateurs plus anciens le feront si vous utilisez la propriété non officielle text-rendering:optimiseLegibility. Pour la plupart d'entre nous, cela améliore la lisibilité car il fusionne des caractères rapprochés en un seul glyphe. Par exemple, « f » et « i » sont souvent fusionnés pour créer « fi ». augmenté l'espacement, faisant ressortir les ligatures encore plus que d'habitude. Alors que certains navigateurs peuvent désactiver automatiquement les ligatures en raison de l'espacement accru des lettres, pour un comportement cohérent, nous devons explicitement les désactiver nous-mêmes via CSS :

.dyslexia-mode {
    interlettrage : 0.35ch ;
    espacement des mots : 1,225 canaux ; /* espacement des lettres 3,5x */
    font-variant-ligatures : aucune ; /* désactiver explicitement les ligatures */
}

Espacement des lignes

Les directives WCAG suggèrent une hauteur de ligne minimale de 1,5, avec un paramètre de paragraphe au moins 1,5 fois plus grand que l'interligne.

Suivre ces instructions est déjà très utile pour vos lecteurs dyslexiques, mais cette valeur minimale est basée sur l'espacement standard des mots. Puisque nous augmentons l'espacement des mots, nous devrions augmenter la hauteur de ligne proportionnellement.

Je trouve qu'une line-height de 2.0 fonctionne assez bien. C'est un peu plus que les conseils BDA de 1,5 fois l'espacement des mots, sans unité comme suggéré par la documentation MDNet facile à synchroniser au rythme vertical d'un dessin.

Pour atteindre la quantité recommandée d'espacement des paragraphes. , dans cet exemple, nous appliquons une marge supérieure sur nos éléments p. Dans un projet plus important, vous pouvez utiliser le célèbre sélecteur de chouettes de Heydon Pickering, surtout si vous avez du contenu imbriqué.

Suite à la suggestion des WCAG, cette marge supérieure doit être au moins 3em pour obtenir l'espacement de paragraphe souhaité. Après les commentaires de mon lecteur dyslexique, j'ai augmenté cette valeur à 3,5 emce qui était plus confortable pour eux.

Comme pour toute conception inclusive, les commentaires des utilisateurs réels sont essentiels pour garantir les meilleurs résultats.

Bien que nous puissions appliquer ces paramètres à l'ensemble de notre page, je préfère les cibler sur la zone de contenu principale, en particulier lors de la modification d'un design existant. Les en-têtes, les pieds de page et la navigation du site ont tendance à ne pas avoir de contenu de paragraphe et peuvent être particulièrement sensibles aux changements d'espaces verticaux.

.dyslexia-mode main {
   hauteur de ligne : 2,0 ;
}

.dyslexie-mode principal p {
   marge supérieure : 3,5 em ;
}

Autres modifications typographiques

À ce stade, nous avons apporté les modifications à grande échelle qui auront le plus grand impact sur un lecteur dyslexique. Nous pouvons maintenant nous concentrer sur les petites touches qui aident à affiner un design.

L'espace blanc supplémentaire que nous avons introduit rendra de nombreuses polices plus claires, plus fines ou moins contrastées, afin que nous puissions augmenter le poids de la police ou ajuster la couleur pour compenser.

.dyslexia-mode {
  font-weight : 600 ; /* demi-gras */
}

Cela peut à son tour rendre le gras (à un poids de police de 700) plus difficile à distinguer. Vous pouvez le rendre plus gras en augmentant le poids de la police ou en le distinguant d'une autre manière, par exemple en modifiant la taille ou la couleur. Pour ma conception, j'ai choisi de le laisser au même poids, mais de le rendre plus sombre que le texte normal.

.dyslexia-mode strong {
  couleur : #000 ;
}

Le moment est venu d'utiliser vos outils de développement pour vérifier votre contraste. Pour les lecteurs dyslexiques, vous devez viser un rapport de contraste de au moins 4,5:1ce qui correspond aux WCAG 2.1 lignes directrices de contraste minimum.

Pourquoi les lignes directrices minimales ? Eh bien, il y a deux questions à considérer. La première est qu'à des taux de contraste très élevés, certains lecteurs dyslexiques verront leur texte se brouiller ou tourbillonner. C'est ce qu'on appelle « l'effet de flou ». C'est l'une des raisons pour lesquelles le guide de style BDA auquel nous avons fait référence précédemment recommande d'éviter le texte noir pur ou les arrière-plans blancs purs. La recherche suggère une taille de base de 18 pt, qui répond à la définition WCAG du texte à grande échelle et donc un rapport de contraste de 4,5:1 respectera toujours les directives de contraste amélioré.

Ce qui nous rappelle, nous devrions augmentez cette taille de police de base  !

.dyslexia-mode {
  taille de la police : 150 % ; /* en supposant une taille de base de 16px, convertir en 18pt */
}

Les conceptions réactives ont tendance à bien s'adapter aux paramètres de zoom du navigateur. Une stratégie différente pourrait donc consister à ne pas modifier la taille de votre police et à suggérer à vos lecteurs d'augmenter le zoom de la page dans leur navigateur.

Suivre les directives WCAG signifie que cela signifie que notre conception n'utilise pas de texte justifié, nous n'avons donc pas à faire d'ajustement. Étant donné que la justification peut modifier l'espacement entre les lettres et les mots, si vous l'avez utilisé, vous devez vous assurer de le désactiver dans un mode adapté à la dyslexie.

Réduire l'encombrement

L'espace blanc supplémentaire que nous avons été ajouté permet de se concentrer plus facilement sur les lettres et les mots. Cela implique que nous pouvons être encore plus utiles en réduisant la quantité de choses confuses, encombrées ou potentiellement gênantes dans notre conception. réduire le poids des pages et rendre les pages Web résilientes . Ces pratiques conduisent naturellement à un état par défaut minimal avec moins de décorations et de distractions (car celles-ci submergeraient un petit écran). Nous pouvons préserver cet état minimal dans notre mode adapté à la dyslexie.

Pour l'arrière-plan, cela signifie utiliser par défaut une couleur unie et utiliser la pseudo-classe :not dans nos améliorations pour éviter de les appliquer à notre nouveau mode.

Nous pouvons utiliser des constructions similaires pour éviter la création de bordures décoratives et d'ombres, ne laissant que celles qui sont fonctionnellement nécessaires.

@media(min-width:700px) { /* ne s'applique que sur des écrans plus larges. .. */
  body:not(.dyslexia-mode) main { /* ...si ce n'est dans notre mode convivial ! */
    image d'arrière-plan : URL (https://res.cloudinary.com/jbowtie/image/upload/v1631662164/exclusive_paper_dyitgt.webp);
  }
}

Dans la conception existante, nous avons délibérément fait ressembler l'en-tête à une étiquette imprimée imparfaitement appliquée en le faisant légèrement pivoter. Cela est censé évoquer une touche ludique ou humaniste, et nous voyons souvent des conceptions adopter de petites touches comme celles-ci pour des raisons similaires.

Cependant, cette apparence semblable à une étiquette est un excellent exemple d'élément décoratif qui produit un encombrement visuel. . Ainsi, même si cela fonctionne bien dans un contexte mobile, nous allons devoir supprimer cette touche pour offrir une meilleure expérience à nos lecteurs dyslexiques.

.dyslexia-mode h2 {
  bordure : aucune ; bordure inférieure : solide gris mince ; /* en gardant juste la bordure inférieure pour cet élément, pour conserver une certaine séparation */
  largeur maximale : 100 % ; /* largeur standard */
  transformation : aucune ; /* ne pas tourner */
  couleur d'arrière-plan : hériter ; /* Nous ne ressemblons plus à une étiquette, nous n'avons donc pas besoin de notre propre arrière-plan */
  marge en bas : 1em ; remplissage-gauche : 0 ; /* quelques ajustements d'espacement */
}

Les rayures zébrées sont utilisées depuis longtemps pour afficher des données tabulaires, mais les recherches de Jessica Enders montrent que les avantages ne sont pas nécessairement aussi clairs que je le pensais, et je n'ai trouvé aucune recherche spécifique à la dyslexie sur le sujet.

Ce que j'ai trouvé, c'est une demande de mon lecteur dyslexique d'implémenter des rayures zébrées pour les tableaux et les listes ! Encore une fois, les vrais retours des utilisateurs sont inestimables.

J'ai choisi de restreindre cela au contenu principal, pour éviter d'avoir à revoir le design de la navigation du site. Nous n'avons en fait aucune table dans notre exemple, mais les modifications CSS seraient assez similaires.

.dyslexia-mode main li:nth-of-type(odd) {
    couleur de fond : palegoldenrod ;
}

Activation de notre nouveau mode

Maintenant que nous avons une conception adaptée à la dyslexie, nous devons décider s'il faut en faire la valeur par défaut ou quelque chose qui est choisi par l'utilisateur.

Lors de la modernisation d'un site existant, comme dans cet exemple, nous opterons probablement pour un mode permettant de réduire l'impact des modifications sur les utilisateurs existants.

Lors de la création d'un nouveau site ou de l'actualisation d'une conception, nous devons considérer les modifications que nous pouvons apporter par défaut, pour le profit de tous les utilisateurs. Comme pour tout autre travail de conception, vous équilibrez les besoins de plusieurs publicsles contraintes de marque et les tensions avec d'autres objectifs de conception tels que l'évocation d'humeurs spécifiques ou le maintien de certaines informations « au-dessus de la ligne de flottaison ».

Le basculement entre les modes s'effectue en basculant la classe sur l'élément body. Ici, nous le faisons avec un bouton bascule et du JavaScript, en utilisant localStorage pour conserver le changement entre les visites et les pages. Cela peut être défini et stocké dans le cadre d'un profil utilisateur.

     // basculer la prise en charge de la dyslexie
    const isPressed = window.localStorage.getItem('dyslexic') === 'true';
    si(estAppuyé) {
        document.body.classList.add('dyslexie-mode');
    }
    // définit le bouton à pressé si approprié
    const toggle = document.getElementById('dyslexia-toggle');
    si(estAppuyé) {
        toggle.setAttribute('aria-pressed', 'true');
    }
    // bascule la prise en charge de la dyslexie
    toggle.addEventListener('click', (e) => {
        let pressed = e.target.getAttribute('aria-pressed') === 'true';
        e.target.setAttribute('aria-pressed', String(!pressed));
        document.body.classList.toggle('dyslexie-mode');
        window.localStorage.setItem('dyslexique', String(!pressé));
    });

Voir le stylo [Dyslexia-friendly mode added](https://codepen.io/smashingmag/pen/dyzwqXm) par John C Barstow.

Voir le stylo Adapté à la dyslexie mode ajouté par John C Barstow.

Conclusion

La séparation du contenu et de la présentation que CSS nous offre est toujours utile lorsque nous devons adapter les conceptions pour mieux servir différentes communautés.[19659003]En nous appuyant sur les bases solides d'une conception qui embrasse les directives d'accessibilité, nous avons appris à étendre notre conception pour améliorer l'expérience des lecteurs dyslexiques. Il existe d'autres publics qui pourraient bénéficier de ce type de travail de conception ciblé, et j'espère que cela vous incitera à les rechercher et à partager votre expérience.

Cette conception a été testée avec un échantillon de petite taille et peut-être non représentatif. Si vous ou quelqu'un que vous connaissez souffrez de dyslexie, vos commentaires dans les commentaires ci-dessous sur ce qui fonctionne ou ne fonctionnent pas seraient les bienvenus et utiles !

Références supplémentaires

Smashing Editorial(vf, yk, il)



Le meilleur outil 2023 pour ta croissance Instagram !



Source link