[Résolu] Accessibilité d'un titre et d'un "slogan"

Salut !
Actuellement, j'ai ça en HTML :

<h1><a href="/">Mon Titre</a></h1>
<p class="sous-titre">Mon Slogan de la mort qui tue</p>

Malheureusement, je dois faire chevaucher mon logo sur mon site, et pour cela, je dois utiliser une image (donc impossible en full CSS). Comment cependant garder la sémantique ?
Merci.
Modifié par doc mcfly (08 Sep 2012 - 17:10)

Bonjour,

tu peux utiliser

.sous-titre {
  pointer-events: none;
}

pour que ton sous-titre ne "bloque" plus le clic sur le titre en dessous (il devient "transparent" au clic si je puis dire).
Mais pas dans IE (c'est récent comme truc). Apparemment il y aurait une solution que je n'ai pas testée : Click through a DIV to underlying elements (in IE) (si ton sous-titre est en gras et qu'il devient "pateux", c'est le filter...)

Salut doc mcfly,
je ne comprends pas bien ce que tu veux, mais toutefois un jeu de z-index avec ton logo en #logo{z-index:1; display:block} ne serait-il pas une bonne approche ?
Ta plage de liens et textes chevauchera ton logo, non ton logo qui la chevauchera : #plage{z-index:2; display:block; background-color:transparent}
Modifié par zebulin (09 Sep 2012 - 17:08)

Oui, c'est tout à fait possible et pas gênant pour l'accessibilité (attention quand même à tester le comportement en cas d'agrandissement des textes seulements).

Merci ! j'adore ce site, c'est assez sympa, les réponses sont professionnels et on répond aux questions avec efficacité !

Bonjour,

les WCAG 2.0 (et donc RGAA et Accessiweb) demandent à ce que le texte reste lisible (ne se superpose pas) même quand on "zoome texte" (Firefox: Affichage / Zoom / Zoom texte seulement) jusqu'à 200% soit 6 niveaux de zoom, 6 appuis sur Ctrl et +.
Et que sans image ou sans CSS ou sans aucun des 2 ça soit lisible (tu peux préciser color: black; sur ton image de logo si le texte alternatif s'affiche en blanc sur blanc par exemple. Dans le cas "image affichée", ton image ne va pas devenir noire évidemment, ça ne change rien)

Felipe a écrit :
Bonjour,

tu peux utiliser

.sous-titre {
  pointer-events: none;
}

pour que ton sous-titre ne "bloque" plus le clic sur le titre en dessous (il devient "transparent" au clic si je puis dire).
Mais pas dans IE (c'est récent comme truc). Apparemment il y aurait une solution que je n'ai pas testée : Click through a DIV to underlying elements (in IE) (si ton sous-titre est en gras et qu'il devient "pateux", c'est le filter...)

Tiens je connaissais pas cette propriété, elle fait partie de quel module?
Modifié par Hermann (24 Feb 2013 - 13:34)

Felipe a écrit :
Ca viendrait de SVG et ne fait plus partie de CSS3 UI si j'en crois (via caniuse) :
- http://wiki.csswg.org/spec/css4-ui#pointer-events
- http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

J'avais découvert ça via http://littlebigdetails.com à propos d'un ticker (cours de bourse qui défile) je crois, et Lea Verou en avait parlé en détail dans une conf' de Fronteers : http://lea.verou.me/css3-secrets/#slide16
Ah ben non le ticker c'est son exemple à elle

Ok merci, je vois qu'elle sera repoussée sur la spec CSS4, c'est le module UI j'aurais dû m'en douter.
Par contre non implémentée dans Opera et IE (même la 10), il y a des alternatives apparement.