Ce gabarit offre une structure très simple pour commenter une série de captures d'écran illustrant un processus chronologique ou une documentation point par point. Les couleurs utilisées permettent de garantir la norme d'accessibilité AA Large. Dans la feuille de style CSS liée à cette page HTML, les couleurs utilisées sont déclarées sous forme de variables.
Utiliser des variables de couleurs
Les variables CSS permettent de déterminer une fois pout toutes, en tête de feuille de style, quelles seront les couleurs utilisées dans la page. Dans la feuille de style, il suffit ensuite d'appeler la variable (nommée de manière explicite pour faciliter la maintenance de la feuille de style) pour appliquer la couleur paramétrée à tel ou tel élément. Utilisez cette méthode de codage : vous gagnerez beaucoup de temps en phase d'intégration.
De plus, en utilisant des couleurs d'une valeur de luminosité déterminée pour garantir l'accessibilité des pages Web, il est facile de nommer chaque variable de manière explicite. Cela simplifie grandement leur mise en œuvre dans la feuille de style. Ajouter des informations en commentaire rend les choses encore plus faciles. Pensez-y !
Remarque importante
Pour trouver rapidement les couleurs correspondant à tel ou tel degré de luminosité, il suffit de choisir une couleur ayant un degré de luminosité de 49%. Utilisez exclusivement l'application en ligne hsluv.org. Cette couleur sera la couleur de valeur moyenne (medium). Pour trouver les autres couleurs, modifiez le paramètre de luminosité et trouvez les couleurs de même teinte correspondant aux degrés de luminosité suivants : 84 (light), 62 (light-medium), 38 (dark-medium) et 18 (dark).
Les couleurs moyennes (degré de luminisité de 49% en HSLuv) présentent un ratio de contraste de 4,58 sur le blanc et sur le noir. Leur usage permet donc de garantir la norme d'accessibilité AA (ratio de contraste compris entre 4,5 et 6,99). Ceci est donc possible en utilisant 3 couleurs : le blanc, le noir et une couleur moyenne.
L'usage d'une couleur claire et d'une couleur foncée élargit le potentiel d'application des couleurs accessibles mais garantit seulement la norme AA Large (ratio de contraste entre deux couleurs compris entre 3 et 4,49). Les combinaisons de couleurs applicables aux textes et aux couleurs de fond (page et cadres) sont plus nombreuses. Elles sont encore multipliées par l'usage de gris de degrés de luminosité équivalents. Les gris sont des couleurs neutres et structurantes. Toutes les couleurs s'accordent harmonieusement avec les gris. Cette page en est un exemple !
Contrôlez le ratio de contraste entre deux couleurs en utilisant l'application en ligne colourcontrast.cc (ou contrast-ratio.com).
Utiliser l'élément <figure>
Dans cette page, les images sont dotées de légendes. Dans le code source, ces légendes sont intégrées dans l'élément <figure> , sous l'élément <img>, entre les balises <figcaption> et </figcaption>. C'est ainsi qu'il convient de coder toutes les légendes d'images. Le positionnement des textes de légende est paramétré dans la feuille de style.
Titre de niveau 2
Texte en encadré. Les textes qui suivent ont été générés sur le site hipsum.co. Flexitarian seitan everyday carry beard hashtag, trust fund selfies fingerstache kale chips chicharrones. Celiac copper mug pickled, venmo pork belly truffaut tumeric roof party selfies. Voici un texte surligné avec un gris foncé positionné, dans le code source, entre balises <mark> et </mark>. Ce texte étant présenté dans un encadré gris clair, un fond blanc met en évidence le texte codé.
Humblebrag wolf whatever unicorn cardigan kickstarter health goth aesthetic cold-pressed pour-over letterpress shoreditch marfa pok pok. Enamel pin narwhal organic leggings. You probably haven't heard of them freegan unicorn actually marfa cronut lumbersexual, vegan skateboard hell of hella man bun vexillologist green juice.