Accessibilité pseudo-classe :target en CSS

Hello à tous,

Je me pose des questions sur l'accessibilité de l'utilisation de la pseudo-classe :target, et j'ai besoin de vos éclaircissements.

Je ne parle pas de l'attribut target en HTML (qui pose lui des soucis d’accessibilité) mais bien de :target en CSS, qui permet de sélectionner un élément de la page qui reçoit le target, ce qui revient à créer une ancre dans la page.

Ce :target reçu provient d'un lien et l'élément qui le reçoit n'est pas forcément un lien (comme le dit le W3C) mais qui est préférable d'être un lien (pour être compatible avec IE).

1 - Du coup, est-ce que modifier les styles d'un élément qui reçoit le target est un problème en terme d'accessibilité? Ou, plutôt, est-ce que modifier les styles d'un élément suivant l'élément qui reçoit le target est une mauvaise idée?

Voici un exemple:

<a href="#contenu">Aller au contenu</a>
Avec comme cible
<a href="#" id="contenu" name="contenu"></a>
<section>Le contenu de la section...</section>

#contenu:target + section{
     border: 1px solid red;
}

2 - Est-ce que détourner l'utilisation de :target pour créer des "slideshow" en CSS est aussi une mauvaise idée?

Voici quelques démos ou j'ai utilisé :target pour gérer le clic en CSS uniquement:
-http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target
-JSFiddle: Controller une animation CSS

3 - Est-ce que :target pose d'autres soucis que je ne soupçonne pas?

Merci.
A+. Vincent

Bonjour,

je ne suis pas très calé en accessibilité, mais ça m'intrigue beaucoup !

En terme de compatibilité, :selectizr ( par exemple ) permettrait de gérer :target à plus de 90% des internautes.

Mais effectivement, la cible d'un lien est censée être accessible "peu importe la façon d'arpenter la page", pas seulement au clic. Hors pour autant que je sache, :target ne fonctionne pas si on navigue au clavier par exemple : ce serait donc une faille dans l'accessibilité d'un site si le seul moyen d'accéder à la cible était le clic.

Il faudrait peut-être joindre :target à :focus, afin de signaler l'interaction, et permettre l'accès grâce à la touche entrée (ce qui est le comportement normal d'une ancre ) ?

Ajouter un title au lien serait également nécessaire, surtout si les liens vers les ancres sont des images, comme sur ton exemple de slide.

Pour répondre plus succinctement, étant donné que les ancres et les liens ancrés ne sont pas une entrave à l'accessibilité - bien au contraire - je ne pense pas que :target en soit une non plus. Par contre cela nécessite certains aménagements dans l'information : compatibilité navigateur, informations compréhensibles...

En ce qui concerne les styles qui dépendraient de :target, la base de l'accessibilité est que la compréhension ne doit pas venir de "la déco" ( lumière stridente et un éclair pourfend la nuit ). Que la section suivant une ancre n'ait pas son trait rouge - pour reprendre ton exemple - ne devrait pas être dramatique ni important pour l'accessibilité. C'est donc à mon avis un faux problème...

Est-ce que ça répond ( un peu ) à ton interrogation, ou suis-je totalement à côté de la plaque ?

J'ai réfléchis au fur et à mesure donc je te prie de bien vouloir excuser le style décousu !!

Salut,

L'utilisation de la pseudo-classe :target peut poser des problèmes d'accessibilité dans les cas suivants :
* l'information est véhiculée uniquement par la couleur (ex. : changement des couleurs de texte ou des couleurs d'arrière-plan pour signaler l'élément actuellement ciblé par :target),
* l'information est véhiculée uniquement par la forme ou la position (ex. : ajout d'une bordure pour signaler l'élément actuellement ciblé par :target).

La règle CSS indiquée en exemple est susceptible d'entrer dans ces cas de figure (après, reste à voir le contexte exact).

Déjà merci pour ta réponse...

Ten a écrit :
:target ne fonctionne pas si on navigue au clavier par exemple : ce serait donc une faille dans l'accessibilité d'un site si le seul moyen d'accéder à la cible était le clic.

En tout cas, mes démos fonctionnent si on navigue au clavier, je crois que :target est bien géré de ce coté là. (PS: bon sur css3create, je n'ai pas "encore" ajouté de liens d'évitement, donc il faut un peu tabuler pour arriver dessus et tester: je sais c'est mal). Mais sur celle qui est sur jsfiddle, tu peux tester sans soucis.

Ten a écrit :
Il faudrait peut-être joindre :target à :focus, afin de signaler l'interaction, et permettre l'accès grâce à la touche entrée (ce qui est le comportement normal d'une ancre ) ?

L'élément qui reçoit le :target reçoit-il aussi le :focus (si celui-ci est un lien bien sur)?

Ten a écrit :
la compréhension ne doit pas venir de "la déco"

Oui, tout à fait d'accord, c'était un exemple simple... Mais changer la couleur du texte, ou la couleur du fond d'un titre suivant une ancre, pour aider l'utilisateur à bien lui faire comprendre que la page a "scroller" toute seule et que son information se trouve ici: ça peut être bien non? Mais ça reste de la déco, ok. On peut aussi ajouter un contenu avec ::after ou ::before...

Du coup, d'autres questions me passent par la tête: dans le cas d'une galerie photo au clic, comme sur l'exemple, la navigation au clavier est à priori ok. Par contre, sans CSS, la navigation est perturbée car les ancres correspondantes aux images se trouvent avant les liens. Ca, ce n'est pas accessible, n'est-ce pas?

Victor BRITO a écrit :

uniquement par la couleur,
uniquement par la forme ou la position

Merci victor,

Ok, donc il y a des problèmes si on modifie la couleur et/ou la forme et/ou un autre style CSS.

Mais ce que je veux dire, c'est qu'il n'y a pas de perte d'informations. Ce n'est pas pire que de ne rien faire? C'est juste un bonus, l'info est bien présente.

Je crois que tu n'as pas bien saisi mon propos.

Par exemple, si tu changes uniquement les couleurs pour véhiculer une information (rubrique actuellement consultée, champs de formulaire non valides, élément actuellement ciblé par la pseudo-classe :target), il y a un problème d'accessibilité dans la mesure où les utilisateurs de lecteur d'écran qui sont aveugles ou malvoyants, les utilisateurs daltoniens et les utilisateurs qui n'ont pas la couleur pour d'autres raisons (imagine, par exemple, que les CSS ne se chargent pas ou que la carte graphique de l'ordinateur ne restitue plus les couleurs comme il se doit) n'auront pas accès à l'information. C'est, en sorte, le même problème que quand tu annonces que « tous les champs indiqués en rouge dans tel formulaire sont obligatoires ».

a écrit :
Je crois que tu n'as pas bien saisi mon propos.

Peut-être...

Ce que j'essaie de te dire, c'est que modifier le style d'une information, mais que ce style n'est pas primordial, ça n'est pas grave.

Si lorsque j'arrive sur une ancre j'affiche le texte en rouge, mais que l'utilisateur ne peut pas le voir, il sera quand même sur l'ancre, et pourra naviguer et obtenir l'info qu'il est venu chercher. La couleur est juste accessoire.

Ou alors, ce que tu essaies de me dire, c'est qu'il faut-il lui donner une autre info?

a écrit :
En tout cas, mes démos fonctionnent si on navigue au clavier, je crois que :target est bien géré de ce coté là.

Effectivement !

Mais pour rebondir sur ce que dit Victor BRITO et revenir au sujet initial, à priori :target ne pose pas de problème particulier d'accessibilité - pas plus qu'un lien standard en tout cas.

Dans la mesure ou on construit un site à des fins accessibles, aucun souci ne devrait en ressortir puisqu'on aurait déjà paré au pire. Les liens devraient comporter des titles afin d'être lus pour les mal/non-voyants, et leur compréhension ne pas reposer sur le visuel. Suis-je dans le juste ?

Probable qu'une optimisation - passant par les css sonores notamment - permette même de s'en servir pour l'accessibilité ?

C'est un sujet passionnant mais tellement complexe à appréhender..
Modifié par Ten (08 Dec 2011 - 16:47)

vdo93 a écrit :
Si lorsque j'arrive sur une ancre j'affiche le texte en rouge, mais que l'utilisateur ne peut pas le voir, il sera quand même sur l'ancre, et pourra naviguer et obtenir l'info qu'il est venu chercher. La couleur est juste accessoire.

Ou alors, ce que tu essaies de me dire, c'est qu'il faut-il lui donner une autre info?

Dans ce cas, l'autre façon d'obtenir l'info est le texte lui-même, aucun souci donc. Il y en aurait si le texte changeait de sens selon qu'il soit en rouge ou non.

Donc pour toi Felipe, aucun soucis.

Mais qu'en est-il de l'utilisation plus "détournée" de :target, comme pour gérer le "pause" ou "start" d'une animation CSS?

Hello.

vdo93 a écrit :
Mais qu'en est-il de l'utilisation plus "détournée" de :target, comme pour gérer le "pause" ou "start" d'une animation CSS?

Je ne pense sais pas ce qu'il en est en terme d'accessibilité, mais je ne suis personnellement pas fan, dans la mesure où :
- C'est un détournement de CSS pour faire ce qui devrait être fait en JS.
- Ça amène des comportements indésirables du scroll sauf grosse bidouille.
- L'historique est totalement faussé. Non seulement il est "spammé" mais je suis quasi sûr que ça entraine des effets de bords si un JS de la page utilise l'évent onhashchange.
- Il y a un gros côté bricolage là-dedans. En terme de maintenance, c'est plutôt pas terrible.

J'ai exactement le même à priori là-dessus au final que sur les menus déroulants full-css ; je trouve ça sympa quand c'est fait à titre de démos, mais totalement pas adapté pour une utilisation courante.

vdo93 a écrit :
Donc pour toi Felipe, aucun soucis.

Sur ce cas précis non.

vdo93 a écrit :
Mais qu'en est-il de l'utilisation plus "détournée" de :target, comme pour gérer le "pause" ou "start" d'une animation CSS?

Je rejoins l'avis de Florian_R : pas fan du tout. Je laisse s'amuser mes collègues quand ils poussent CSS3 (3 ? enfin CSS avancés) dans ses limites ou en défrichent de nouveaux aspects mais je m'opposerai jusqu'à nouvel ordre à ce que ce soit mis sur de "vrais" sites. Cela demande des tests avec toutes sortes d'aides techniques à commencer par les lecteurs d'écran les plus connus et je n'en ai vu aucun jusqu'à présent (et n'en ai pas effectué non plus) ; les habitudes pourraient en être chamboulées ; cela demande de retester CSS activés ou désactivés, idem pour les images et les 2 en même temps ... (ça je le fais régulièrement). Et de voir ce qu'il en reste sur les vieux navigateurs : graceful degradation ou pas avec et sans CSS et/ou avec et sans images et/ou JS s'il y en a.