1174 sujets

Accessibilité du Web

[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)
Administrateur
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)
Actuellement, j'ai <h1>Mon titre</h1><p>Sous titre</p>. Or je dois, pour des raisons graphique, fait <img src="logo.png" alt="logo"/>. Mais comment garder ma sémantique ?
Tout simplement :
<h1><img src="logo.png" alt="Mon titre"/></h1><p>Sous titre</p>


voire : 
<h1><img src="logo.png" alt="Mon titre - Sous titre"/></h1>


Suivant le cas de figure exact.


Fait bien attention à tes alt sur img. Un alt "logo" c'est plus gênant qu'utile.
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é !
Administrateur
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 &quot;bloque&quot; plus le clic sur le titre en dessous (il devient &quot;transparent&quot; 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 &quot;pateux&quot;, 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)
Administrateur
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 Smiley confused
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 Smiley confused

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.
Sujet clos
Aller à