{"id":5447,"date":"2026-07-16T09:35:32","date_gmt":"2026-07-16T07:35:32","guid":{"rendered":"https:\/\/ideance.net\/blog\/?p=5447"},"modified":"2026-07-22T10:25:17","modified_gmt":"2026-07-22T08:25:17","slug":"comment-gerer-la-visibilite-le-focus-clavier-et-le-rendu-dans-les-technologies-dassistance-des-elements-de-facon-accessible","status":"publish","type":"post","link":"https:\/\/ideance.net\/blog\/en\/5447\/comment-gerer-la-visibilite-le-focus-clavier-et-le-rendu-dans-les-technologies-dassistance-des-elements-de-facon-accessible\/","title":{"rendered":"Comment g\u00e9rer la visibilit\u00e9, le focus clavier et le rendu dans les technologies d’assistance des \u00e9l\u00e9ments de fa\u00e7on accessible"},"content":{"rendered":"\n
\n

Avec un grand pouvoir vient une grande responsabilit\u00e9<\/p>\n<\/blockquote>\n\n\n

Cette c\u00e9l\u00e8bre r\u00e9plique de l’oncle Ben Parker s’applique parfaitement au d\u00e9veloppement web.<\/p>\n

Les outils permettant de g\u00e9rer la visibilit\u00e9 d’un \u00e9l\u00e9ment, son accessibilit\u00e9 par les technologies d’assistance ou la prise de focus au clavier sont puissants et vari\u00e9s. Ils doivent cependant \u00eatre manipul\u00e9s avec pr\u00e9caution pour garantir une exp\u00e9rience utilisateur accessible \u00e0 toutes et tous.<\/p>\n

Voici un tour d’horizon des attributs HTML et des propri\u00e9t\u00e9s CSS \u00e0 utiliser selon la situation.<\/p>\n\n

L’attribut aria-hidden=\"true\"<\/code><\/h2>\n

Statut :<\/strong> visible, inaccessible aux lecteurs d’\u00e9cran, mais atteignable au focus clavier.<\/p>\n

Fonctionnement :<\/strong> cet attribut rend un \u00e9l\u00e9ment visible indisponible aux technologies d’assistance, tout en lui permettant de conserver la possibilit\u00e9 de recevoir le focus clavier. Lorsque cet attribut est appliqu\u00e9 \u00e0 un \u00e9l\u00e9ment, ses enfants deviennent eux aussi indisponibles pour les technologies d’assistance.
Attention toutefois : si lui-m\u00eame ou l’un de ses enfants est un \u00e9l\u00e9ment interactif, il pourra tout de m\u00eame prendre le focus clavier.<\/p>\n

Cas d’usage :<\/strong> il est souvent utilis\u00e9 pour masquer des \u00e9l\u00e9ments non porteurs d’information, comme des images d\u00e9coratives ou des ic\u00f4nes SVG int\u00e9gr\u00e9es dans un bouton.<\/p>\n

<button aria-label=\"Fermer\"><svg aria-hidden=\"true\"<\/strong><\/mark>>...<\/svg><\/button><\/code><\/pre>\n\n
L’attribut tabindex=\"-1\"<\/code><\/h2>\n
Statut :<\/strong> visible, accessible aux lecteurs d’\u00e9cran, mais inatteignable au focus clavier.<\/p>\n
Fonctionnement :<\/strong> cet attribut est disponible aux technologies d’assistance, mais il supprime la prise de focus clavier sur un \u00e9l\u00e9ment interactif. Sa grande force r\u00e9side dans sa capacit\u00e9 \u00e0 permettre une prise de focus programmatique (via JavaScript avec la m\u00e9thode focus()<\/code>) uniquement et essentiellement sur des \u00e9l\u00e9ments statiques, comme un paragraphe ou un titre.<\/p>\n
Cas d’usage :<\/strong> on l’utilise fr\u00e9quemment pour g\u00e9rer la reprise de focus lors d’un changement de contexte. Par exemple, lors de l’ouverture d’une bo\u00eete de dialogue modale, il peut \u00eatre positionn\u00e9 sur le titre afin de d\u00e9placer le focus de fa\u00e7on programmatique au d\u00e9but du dialogue.<\/p>\n
<div role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"titre-1\">\n<h1 id=\"titre-1\" tabindex=\"-1\"<\/strong><\/mark>>Je suis le titre du dialogue<\/h1>\n[\u2026]\n<\/div><\/code><\/pre>\n\n
L’attribut tabindex=\"0\"<\/code><\/h2>\n
Statut :<\/strong> visible, accessible aux lecteurs d’\u00e9cran et atteignable au focus clavier.<\/p>\n
Fonctionnement :<\/strong> sa force principale est de pouvoir donner le focus clavier \u00e0 un \u00e9l\u00e9ment statique (comme un paragraphe ou un titre). N\u00e9anmoins, en l’absence d\u2019une s\u00e9mantique ad\u00e9quate d\u2019\u00e9l\u00e9ment interactif (role=\"button\"<\/code>, role=\"link\"<\/code>, etc.), l’\u00e9l\u00e9ment sera consid\u00e9r\u00e9 comme non-conforme. Sur un \u00e9l\u00e9ment interactif natif HTML, il n’apporte aucune valeur ajout\u00e9e puisque cet \u00e9l\u00e9ment peut d\u00e9j\u00e0, par nature, prendre le focus clavier.<\/p>\n
Cas d’usage :<\/strong> il est souvent utilis\u00e9 en compl\u00e9ment d’un r\u00f4le ARIA lorsqu’il s’av\u00e8re impossible d’utiliser un \u00e9l\u00e9ment interactif natif HTML ou encore lorsque l\u2019on souhaite g\u00e9rer la prise de focus dans un composant d\u2019interface.<\/p>\n
<div role=\"button\" tabindex=\"0\"<\/strong><\/mark>>Je suis un bouton, atteignable au clavier mais non fonctionnel en l\u2019\u00e9tat<\/div><\/code><\/pre>\n\n
L’attribut hidden<\/code><\/h2>\n
Statut : <\/strong>non visible, inaccessible aux lecteurs d’\u00e9cran et inatteignable au focus clavier.<\/p>\n
Fonctionnement :<\/strong> cet attribut masque compl\u00e8tement un \u00e9l\u00e9ment et ses enfants pour tout le monde. M\u00eame si l’\u00e9l\u00e9ment concern\u00e9 est interactif, il ne pourra pas \u00eatre atteint au clavier.<\/p>\n
Cas d’usage :<\/strong> on y a souvent recours pour masquer un sous-menu lorsqu’il n’est pas d\u00e9ploy\u00e9, \u00e9vitant ainsi que ses \u00e9l\u00e9ments soient disponibles dans cet \u00e9tat r\u00e9duit.<\/p>\n
<button aria-expanded=\"false\">Menu<\/button>\n<div hidden<\/strong><\/mark>>\n<ul>\n    <li><a href=\"#\">Je suis un lien non disponible \u00e0 l'\u00e9tat r\u00e9duit<\/a><\/li>\n<\/ul>\n<\/div><\/code><\/pre>\n\n
L’attribut inert<\/code><\/h2>\n
Statut :<\/strong> visible, inaccessible aux lecteurs d’\u00e9cran, inatteignable au focus clavier et au pointeur.<\/p>\n
Fonctionnement :<\/strong> il permet de conserver le visuel d’un \u00e9l\u00e9ment et de ses enfants tout en les rendant indisponibles aux technologies d’assistance, en interdisant la prise de focus clavier et les interactions du pointeur sur l’ensemble de ses \u00e9l\u00e9ments interactifs. C\u2019est finalement une combinaison des attributs aria-hidden=\"true\"<\/code> et tabindex=\"-1\"<\/code> appliqu\u00e9 \u00e0 l\u2019ensemble des \u00e9l\u00e9ments interactifs.<\/p>\n
Cas d’usage :<\/strong> cet attribut s’av\u00e8re tr\u00e8s utile dans les carrousels par exemple, plus sp\u00e9cifiquement sur les panneaux masqu\u00e9s ou partiellement masqu\u00e9s visuellement que l\u2019on ne souhaite pas rendre disponibles au clavier, au pointeur et aux technologies d\u2019assistance.<\/p>\n
<h2 id=\"our-strengths\">Nos points forts<\/h2>\n<section class=\"carousel\" aria-roledescription=\"Carrousel\" aria-labelledby=\"our-strengths\">\n<div id=\"carousel-items\">\n    <div role=\"group\" aria-roledescription=\"Panneau\" aria-label=\"1 sur 3\">\n        <h3>Design Responsable<\/h3>\n        <p>Le Design Responsable est une d\u00e9marche [\u2026] son cycle de vie.<\/p>\n        <a href=\"#en-savoir-plus\">D\u00e9couvrir les projets \u00e9co-responsables<\/a>\n    <\/div>\n    <div role=\"group\" aria-roledescription=\"Panneau\" aria-label=\"2 sur 3\" inert<\/strong><\/mark>>\n        <h3>Accessibilit\u00e9 Num\u00e9rique<\/h3>\n        <p>L'Accessibilit\u00e9 Num\u00e9rique consiste \u00e0 concevoir [\u2026] personnes handicap\u00e9es.<\/p>\n        <a href=\"#audit\">D\u00e9couvrir les projets accessibles<\/a>\n    <\/div>\n    [\u2026]\n<\/div>\n<\/section><\/code><\/pre>\n\n
L’attribut disabled<\/code><\/h2>\n
Statut : <\/strong>visible mais peu perceptible par d\u00e9faut, accessible aux lecteurs d’\u00e9cran, inatteignable au focus clavier.<\/p>\n
Fonctionnement :<\/strong> il fonctionne sur les \u00e9l\u00e9ments interactifs natifs qui l’acceptent, comme par exemple un bouton ou un champ de formulaire. Il peut \u00e9galement \u00eatre utilis\u00e9 sur certains \u00e9l\u00e9ments statiques comme la balise <fieldset><\/code>. Bien que l\u2019\u00e9l\u00e9ment soit visible et disponible pour les technologies d’assistance, il s’av\u00e8re souvent peu perceptible visuellement par d\u00e9faut pour indiquer un \u00e9tat d\u00e9sactiv\u00e9. Attention toutefois, si l’\u00e9l\u00e9ment est porteur d’information, cet \u00e9tat devrait \u00eatre perceptible visuellement. Puisque l\u2019\u00e9l\u00e9ment n’est pas cens\u00e9 \u00eatre utile dans l\u2019interface, il n’est pas atteignable au focus clavier. Ce point est \u00e0 prendre en compte pour les \u00e9l\u00e9ments interactifs susceptibles d\u2019\u00eatre d\u00e9sactiv\u00e9s, afin d\u2019\u00e9viter la perte de focus clavier. C\u2019est le cas, par exemple, des boutons de contr\u00f4le de certains carrousels lorsque l’on atteint le premier ou le dernier panneau. Dans ce cas, l\u2019usage de l\u2019attribut aria-disabled<\/code> peut \u00eatre une meilleure solution (voir la section suivante).<\/p>\n
Cas d\u2019usage\u00a0: <\/strong>dans un formulaire, des champs sont d\u00e9sactiv\u00e9s tant que d\u2019autres choix n\u2019ont pas \u00e9t\u00e9 faits au pr\u00e9alable.<\/p>\n
<input type=\"checkbox\" id=\"toggle-shipping-address\" name=\"toggle-shipping-address\">\n<label for=\"toggle-shipping-address\">Adresse de livraison diff\u00e9rente de l\u2019adresse de facturation<\/label>\n<fieldset>\n<legend>Adresse de livraison<\/legend>\n<label for=\"street-address\">Nom de la voie<\/label>\n<input type=\"text\" id=\"street-address\" name=\"street-address\" autocomplete=\"address-line1\" disabled=\"disabled\"<\/strong><\/mark>>\n[\u2026]\n<\/fieldset><\/code><\/pre>\n\n
L’attribut aria-disabled=\"true\"<\/code><\/h2>\n
Statut :<\/strong> visible, accessible aux lecteurs d’\u00e9cran et atteignable au focus clavier.<\/p>\n
Fonctionnement :<\/strong> \u00e0 la mani\u00e8re de l’attribut disabled<\/code>, il fonctionne \u00e9galement sur les \u00e9l\u00e9ments interactifs qui l’acceptent, mais peut aussi s’appliquer \u00e0 certains composants ou \u00e9l\u00e9ments statiques (comme des groupes). Contrairement \u00e0 son homologue natif, il n’est pas personnalis\u00e9 graphiquement par d\u00e9faut.<\/p>\n
Avantage majeur :<\/strong> l’\u00e9l\u00e9ment reste accessible au focus clavier. C’est un atout de taille : si un \u00e9l\u00e9ment interactif passe \u00e0 l\u2019\u00e9tat d\u00e9sactiv\u00e9, l’utilisateur conserve le focus sur l\u2019\u00e9l\u00e9ment sans le perdre brusquement. Il faudra bien entendu pr\u00e9voir en JavaScript de d\u00e9sactiver l\u2019action de l\u2019\u00e9l\u00e9ment \u00e0 l\u2019\u00e9tat d\u00e9sactiv\u00e9 et dans les formulaires de g\u00e9rer manuellement les contr\u00f4les de formulaire.<\/p>\n
Cas d\u2019usage\u00a0:<\/strong> comme d\u00e9j\u00e0 \u00e9voqu\u00e9 auparavant, un carrousel avec des contr\u00f4les qui peuvent changer d\u2019\u00e9tat est un bon exemple.<\/p>\n
<button type=\"button\">Pr\u00e9c\u00e9dent<\/button>\n<button aria-disabled=\"true\"<\/strong><\/mark> type=\"button\">Suivant<\/button><\/code><\/pre>\n\n
Les propri\u00e9t\u00e9s CSS display: none;<\/code> et visibility: hidden;<\/code><\/h2>\n
Statut :<\/strong> non visible, inaccessible aux lecteurs d’\u00e9cran et inatteignable au focus clavier.<\/p>\n
Fonctionnement :<\/strong> ces propri\u00e9t\u00e9s CSS masquent compl\u00e8tement l’\u00e9l\u00e9ment pour l’ensemble des utilisateurs et suppriment toute interaction au clavier. Cependant, il existe une exception notable : si l’\u00e9l\u00e9ment masqu\u00e9 est cibl\u00e9 par un attribut aria-labelledby<\/code> ou aria-describedby<\/code>, il demeure restituable par les technologies d’assistance.<\/p>\n
Diff\u00e9rence cl\u00e9 :<\/strong> contrairement \u00e0 la propri\u00e9t\u00e9 CSS display: none;<\/code>, la propri\u00e9t\u00e9 visibility: hidden;<\/code> a l’avantage de conserver les transitions CSS.<\/p>\n
Cas d’usage :<\/strong> id\u00e9al pour masquer un contenu qui n\u2019est pas visible et non atteignable au clavier, comme un sous-menu r\u00e9duit.<\/p>\n
<button aria-expanded=\"false\">Menu<\/button>\n<div style=\"display: none;\"<\/strong><\/mark>>\n<ul>\n    <li><a href=\"#\">Je suis un lien non disponible \u00e0 l'\u00e9tat r\u00e9duit<\/a><\/li>\n<\/ul>\n<\/div><\/code><\/pre>\n\n
Les classes CSS pour masquer visuellement (.sr-only<\/code>, .visually-hidden<\/code>, etc.)<\/h2>\n
Statut :<\/strong> non visible, accessible aux lecteurs d’\u00e9cran et atteignable au focus clavier.<\/p>\n
Fonctionnement :<\/strong> l’\u00e9l\u00e9ment n’est pas visible \u00e0 l’\u00e9cran car il est positionn\u00e9 de mani\u00e8re \u00e0 sortir du cadre visible, ce qui lui permet de rester disponible pour les technologies d’assistance. Appliquer ce type de classe sur un \u00e9l\u00e9ment interactif ne l’emp\u00eache pas de recevoir le focus clavier. La vigilance est de mise : cette configuration est particuli\u00e8rement pertinente si l’\u00e9l\u00e9ment se d\u00e9voile et devient visible uniquement au moment de la prise de focus (par exemple, un lien d’\u00e9vitement).<\/p>\n
Cas d’usage :<\/strong> tr\u00e8s utile pour cr\u00e9er des noms accessibles ou fournir des informations contextuelles sp\u00e9cifiques aux utilisateurs de lecteurs d’\u00e9cran.<\/p>\n
<a href=\"#\">En savoir plus<span class=\"sr-only\"<\/strong><\/mark>> sur la classe .sr-only<\/span><\/a><\/code><\/pre>\n
En CSS, cette classe est g\u00e9n\u00e9ralement d\u00e9finie de la fa\u00e7on suivante :<\/p>\n
.sr-only {\nborder: 0 !important;\nclip: rect(1px, 1px, 1px, 1px) !important;\n-webkit-clip-path: inset(50%) !important;\nclip-path: inset(50%) !important;\nheight: 1px !important;\noverflow: hidden !important;\npadding: 0 !important;\nposition: absolute !important;\nwidth: 1px !important;\nwhite-space: nowrap !important;\n}<\/code><\/pre>\n\n
R\u00e9capitulatif<\/h2>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u00c9l\u00e9m\u00e9nts<\/th>\nPr\u00e9sent visuellement<\/th>\nAccessible aux technologies d’assistance<\/th>\nAtteignable au clavier<\/th>\n<\/tr>\n<\/thead>\n
aria-hidden="true"<\/th>\nOui<\/td>\nNon<\/td>\nOui<\/td>\n<\/tr>\n
tabindex="-1"<\/th>\nOui<\/td>\nOui<\/td>\nNon<\/td>\n<\/tr>\n
tabindex="0"<\/th>\nOui<\/td>\nOui<\/td>\nOui<\/td>\n<\/tr>\n
hidden<\/th>\nNon<\/td>\nNon<\/td>\nNon<\/td>\n<\/tr>\n
inert<\/th>\nOui<\/td>\nNon<\/td>\nNon<\/td>\n<\/tr>\n
disabled<\/th>\nOui<\/td>\nOui<\/td>\nNon<\/td>\n<\/tr>\n
aria-disabled="true"<\/th>\nOui<\/td>\nOui<\/td>\nOui<\/td>\n<\/tr>\n
display: none;
visibility: hidden;<\/th>\n		Non<\/td>\nNon<\/td>\nNon<\/td>\n<\/tr>\n
.sr-only, .visually-hidden, etc.<\/th>\nNon<\/td>\nOui<\/td>\nOui<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>","protected":false},"excerpt":{"rendered":"
Les outils permettant de g\u00e9rer la visibilit\u00e9 d\u2019un \u00e9l\u00e9ment, son accessibilit\u00e9 par les technologies d\u2019assistance ou la prise de focus au clavier sont puissants. Ils doivent cependant \u00eatre manipul\u00e9s avec pr\u00e9caution pour garantir une exp\u00e9rience utilisateur accessible \u00e0 toutes et tous.<\/p>","protected":false},"author":5,"featured_media":5646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[],"class_list":["post-5447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css-et-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/5447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/comments?post=5447"}],"version-history":[{"count":34,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/5447\/revisions"}],"predecessor-version":[{"id":5657,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/posts\/5447\/revisions\/5657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media\/5646"}],"wp:attachment":[{"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/media?parent=5447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/categories?post=5447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ideance.net\/blog\/en\/wp-json\/wp\/v2\/tags?post=5447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}