Les bonnes et mauvaises pratiques du CSS
Nous arrivons petit à petit au terme de ce cours, et vous connaissez maintenant les bases pour rendre vos sites accessibles.
Cela dit, avant d’aller découvrir des outils qui nous permettront de valider notre HTML dans le dernier chapitre, nous allons faire un arrêt par la case CSS. Ce chapitre nous permettra de découvrir les bonnes et les mauvaises pratiques CSS pour l’accessibilité.
Puis, dans la dernière section de ce chapitre, nous terminerons l’intégration de notre projet fil rouge !
Tirez parti du CSS pour l’accessibilité
Puisque le HTML, sa sémantique et les attributs ARIA permettent d’améliorer l’expérience de nos utilisateurs, on pense souvent que le CSS n’a, de prime abord, aucune incidence sur l’accessibilité. Mais ce n’est pas totalement vrai.
Par exemple, un mauvais niveau de contraste va rendre votre page moins lisible par des populations ayant des troubles de la vue.
Les unités fixes versus les unités relatives
Côté CSS, le premier point, et qui est, sans aucun doute, l’un des plus importants, concerne les unités de mesure.
Quand vous réalisez du code CSS, vous allez très régulièrement déclarer la taille que doit faire un titre ou un paragraphe. C’est tout à fait normal (ci-dessous une déclaration CSS).
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}Cela dit, il est aujourd’hui préférable d’utiliser des valeurs type relatives ("em") plutôt que des valeurs fixes ("px").
html {
font-size: 100%; /* 16px par défaut */
}
body {
font-size: 0.75em; /* 12px */
}
h1 {
font-size: 2em; /* 24px */
}En plus de pouvoir faciliter l’évolution de votre design, les "em" augmentent en taille si l’utilisateur utilise une taille de police par défaut plus grosse. Pratique pour les personnes ayant des troubles de la vision, et affichant un texte écrit en plus gros.
Les pseudo-classes
Si vous vous souvenez bien du chapitre sur les menus de navigation, nous avons vu les pseudo-classes. Ces dernières nous permettant de sélectionner un état d’un élément, tel qu’un élément du menu de navigation se faisant survoler.
Pensez donc à utiliser autant que possible les pseudo-classes :hover , :visited , :focus et :active , notamment pour vos liens.
.footer-navigation-link {
text-decoration: none;
color: #FFF;
}
.footer-navigation-link:hover,
.footer-navigation-link:focus {
text-decoration: underline;
}
.footer-social-icon {
margin-right: 10px;
opacity: .7;
}
.footer-social-icon:hover,
.footer-social-icon:focus {
opacity: 1;
}Le line-height
La propriété CSS line-height permet de définir “la hauteur de la boîte d’une ligne”. Autrement dit, plus cette valeur est élevée, plus l’espace entre vos lignes sera grand.
Bien que ce soit le plus souvent votre designer qui désigne la valeur de cette propriété, sachez que le minimum de cette valeur doit être de 1.5.
p {
line-height: 1.5;
}Sachez que les personnes souffrant de troubles de la vision peuvent avoir du mal à lire du texte qui est trop compact. ll est donc important de bien espacer vos lignes.
Les bonnes pratiques pour masquer des éléments sur la page
Nous l’avons vu un peu plus haut, si vous souhaitez faire lire des éléments uniquement aux utilisateurs de technologies d'assistance, il y certaines règles à connaître.
N’utilisez pas la balise display=none , puisque cette dernière va masquer le contenu à tous vos utilisateurs, qu’ils utilisent des technologies d'assistance ou non.
Le code ci-dessous vous permet de masquer le contenu à l’écran, tout en le laissant visible pour les personnes recourant à ces technologies.
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}Améliorez l'accessibilité de vos liens et de vos boutons
Une technique d’intégration connue vise à définir vos liens comme des blocs HTML.
Ici, notre fichier HTML :
<nav>
<ul class="main-nav">
<li class="nav-item">
<a class="nav-item-link" href="/index.html">accueil</a>
</li>
<li class="nav-item">
<a class="nav-item-link" href="/products.html">nos produits</a>
</li>
<li class="nav-item">
<a class="nav-item-link" href="/about.html">à propos</a>
</li>
</ul>
</nav>et là, notre fichier CSS :
.main-nav {
display: flex;
justify-content: space-around;
width: 500px;
}
.nav-item {
list-style-type: none;
}
.nav-item-link {
background-color: #333;
color: #FFF;
display: block;
padding: 8px 12px;
text-decoration: none;
}
.nav-item-link:hover {
background-color: #555;
}Dans l’exemple ci-dessus, nous créons une navigation et nous utilisons le CSS pour définir les éléments du menu comme des blocs.
Ces derniers prennent maintenant l’ensemble de la largeur de leur conteneur (c’est la particularité des éléments de type bloc), et nous pouvons leur appliquer un padding vertical.
Évitez les mauvaises pratiques
En revanche, il existe quelques mauvaises pratiques côté CSS. Ces dernières sont moins nombreuses que les bonnes pratiques, fort heureusement.
Afficher un élément via le CSS
En lien avec notre dernière partie sur le fait d’afficher ou de masquer des éléments, il existe des propriétés CSS qui vous permettent d’afficher des éléments sur le document, mais via le CSS.
La propriété content est la principale coupable !
p {
content: "Ceci est du texte";
}Dans l’exemple ci-dessus, sachez que ce texte va être affiché à l’écran, sera lisible mais n'apparaîtra pas côté HTML. Autrement dit, les technologies d'assistance n’ont aucun moyen de savoir que ce texte existe.
Cela dit, en pratique, essayez d’éviter cette propriété pour afficher du texte. :)
Et avec un framework CSS ?
Les frameworks CSS sont souvent un choix raisonnable lorsqu’on ne souhaite pas passer trop de temps sur le CSS d’un site. En effet, ces derniers permettent de :
faciliter le responsive du site (ils sont très souvent mobile-first) ;
gérer l'intercompatibilité entre les principaux navigateurs (même si celle-ci tend à se réduire) ;
accélérer le développement d’un projet via l’utilisation d’éléments (ou “components”) réutilisables.
Bien que les frameworks soient concurrencés par les évolutions du CSS, notamment Flexbox puis Grid, de nombreux projets utilisent encore Bootstrap, par exemple.
De plus en plus de frameworks et d’outils prennent en compte l’accessibilité dans leur structure (souvenez-vous de la librairie vidéo Plyr dont nous avons parlé dans un chapitre précédent).
Les dernières versions du framework Bootstrap (la 3.* et surtout la 4.*) ont intégré l’accessibilité dans de nombreux éléments. Si bien que de nombreux “components” ont des attributs ARIA pour vous aider.
Tonight In Gotham : Rendez le code CSS accessible
Dans le code CSS, en haut du fichier, nous trouvons les règles générales appliquées au projet, et notamment la taille de la police ainsi que son épaisseur.
h1 {
font-size: 4em;
font-weight: 600;
}
h2 {
font-size: 3em;
font-weight: 500;
}
h3 {
font-size: 1.5em;
font-weight: 700;
}
p {
font-size: 1em;
font-weight: 400;
}Notez que j’ai utilisé les "em" comme unité de mesure, pour plus de flexibilité dans la gestion de la taille de la police (si par exemple, l’utilisateur a des troubles de la vision et qu’il a besoin de la voir en plus grand).
Nous retrouvons aussi la classe .sr-only :
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}Cette dernière permettant de masquer visuellement un texte, tout en le gardant visible aux technologies d'assistance.
Nous utilisons aussi les pseudo-classes :hover et :focus pour indiquer l’état des éléments de navigation :
.header-navigation-item:hover,
.header-navigation-item:focus {
font-weight: 700;
}De plus, les balises a du menu de navigation utilisent la propriété display: block; . Cette propriété leur permet d’étendre leur surface cliquable aux dimensions du conteneur dans lequel elles se trouvent.
En résumé
Comme pour le HTML, l’utilisation de bonnes ou de mauvaises pratiques a un impact direct sur l’accessibilité.
Il est important d’apprendre à bien masquer votre contenu. Une mauvaise utilisation du CSS peut le masquer à l’ensemble de vos utilisateurs.
Privilégiez les unités relatives aux unités fixes. Elles vous permettront de garder la consistance de votre design si la taille de la police est augmentée.
Maintenant que nous avons le CSS et quelques “tricks” à connaître, nous allons découvrir, dans le dernier chapitre, les outils qui nous permettront d’aller plus loin.
