Le \u00ab\u00a0skip content\u00a0\u00bb en HTML est une technique d’accessibilit\u00e9 web qui vise \u00e0 am\u00e9liorer l’exp\u00e9rience des utilisateurs ayant des besoins particuliers, tels que les utilisateurs de lecteurs d’\u00e9cran. Le \u00ab\u00a0skip content\u00a0\u00bb permet \u00e0 ces utilisateurs de sauter rapidement le contenu r\u00e9p\u00e9titif ou de navigation d’une page web pour acc\u00e9der directement au contenu principal, sans avoir \u00e0 \u00e9couter ou \u00e0 parcourir tout le reste \u00e0 chaque visite de page.<\/p>\n
Voici comment fonctionne g\u00e9n\u00e9ralement le \u00ab\u00a0skip content\u00a0\u00bb en HTML :<\/p>\n
<a<\/span> href<\/span>=\"#content\"<\/span> class<\/span>=\"skip-link\"<\/span>><\/span>Passer au contenu principal<\/a<\/span>><\/span>
\n<\/code><\/div>\n<\/div>\nL’attribut href<\/code> doit pointer vers l’ID de l’\u00e9l\u00e9ment que vous souhaitez que les utilisateurs atteignent (dans cet exemple, l’ID est \u00ab\u00a0content\u00a0\u00bb – assurez-vous d’avoir un \u00e9l\u00e9ment avec cet ID dans votre contenu principal).<\/li>\n- Styles CSS (optionnels)<\/strong> : Vous pouvez ajouter des styles CSS pour rendre ce lien visible lorsque le focus est dessus, mais normalement il est cach\u00e9 visuellement.\n\n
.skip-link<\/span> {
\nposition<\/span>: absolute;
\nleft<\/span>: -999px<\/span>;
\n}
\n<\/code><\/div>\n<\/div>\nCela d\u00e9place le lien hors de la vue de la plupart des utilisateurs, mais il reste accessible pour les lecteurs d’\u00e9cran.<\/li>\n
- JavaScript (optionnel)<\/strong> : Pour une meilleure exp\u00e9rience utilisateur, vous pouvez ajouter un peu de JavaScript pour permettre au lien de devenir visible lorsqu’il est activ\u00e9, par exemple, en ajoutant une classe CSS pour le rendre visible.\n\n
document<\/span>.querySelector<\/span>('.skip-link'<\/span>).addEventListener<\/span>('click'<\/span>, function<\/span> () {
\nvar<\/span> content = document<\/span>.querySelector<\/span>('#content'<\/span>);
\ncontent.tabIndex<\/span> = -1<\/span>;
\ncontent.focus<\/span>();
\n});
\n<\/code><\/div>\n<\/div>\nCela signifie que lorsque l’utilisateur clique sur le lien \u00ab\u00a0Passer au contenu principal\u00a0\u00bb, le focus est d\u00e9plac\u00e9 vers l’\u00e9l\u00e9ment avec l’ID \u00ab\u00a0content\u00a0\u00bb, ce qui permet \u00e0 l’utilisateur de commencer \u00e0 lire le contenu principal de la page.<\/li>\n<\/ol>\n
En utilisant cette technique, vous am\u00e9liorez consid\u00e9rablement l’accessibilit\u00e9 de votre site web, car vous aidez les utilisateurs de lecteurs d’\u00e9cran \u00e0 naviguer plus facilement dans votre contenu, en \u00e9vitant les \u00e9l\u00e9ments de navigation r\u00e9p\u00e9titifs et en acc\u00e9dant rapidement \u00e0 l’essentiel de la page. Cela contribue \u00e0 rendre votre site plus inclusif et convivial pour un public plus large.<\/p>\n
\nPhoto de Justin Morgan<\/a> sur Unsplash<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Le \u00ab\u00a0skip content\u00a0\u00bb en HTML est une technique d’accessibilit\u00e9 web qui vise \u00e0 am\u00e9liorer l’exp\u00e9rience des utilisateurs ayant des besoins particuliers, tels que les utilisateurs de lecteurs d’\u00e9cran. Le \u00ab\u00a0skip content\u00a0\u00bb permet \u00e0 ces utilisateurs de sauter rapidement le contenu r\u00e9p\u00e9titif ou de navigation d’une page web pour acc\u00e9der directement au contenu principal, sans avoir […]<\/p>\n","protected":false},"author":1,"featured_media":99,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,11,10],"tags":[14,13],"class_list":["post-96","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-optimisations","category-seo","category-ui-ux","tag-html","tag-pagespeed-insights"],"_links":{"self":[{"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":0,"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/media\/99"}],"wp:attachment":[{"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.abc-conception.com\/blog\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}