Appliquer un contour à du texte

(reprise du message précédent)

Raphael a écrit :

Certes, je ne voyais pas cela comme ça. Mais cette technique (imparfaite) est également utilisée pour avoir des titres en image plus accessibles et pas seulement pour les référenceurs.

? La syntaxe de base d'un titre en image accessible étant:

<h1><img ... alt="Equivalent textuel de l'image ici"></h1>

Je ne vois pas le rapport avec un title détourné ?

A quelle syntaxe fais-tu allusion exactement ?

<h1 title="Equivalent textuel de l'image ici'"><img ... alt="Equivalent textuel de l'image ici'"></h1>

... le title est inutile et sans justification

<h1 title="Equivalent textuel de l'image ici'"><img ... alt="'"></h1>

... le alt est mal renseigné

<h1 title="Equivalent textuel de l'image ici'"><img ...></h1>

... l'absence de alt est invalide.

Sur le fond, je n'ai rien contre l'idée de trouver un biais pour obtenir cet effet d'ombrage que CSS2 ne permet pas. Mais ce biais, pour être préférable à un texte en image, devrait AMHA respecter comme cahier des charges, par exemple:
- ne pas détourner le HTML de sa signification
- ne pas compromettre la restitution du contenu quelque-soit le media
- apporter un bénéfice par rapport au titre en image (effectivement, une gestion plus simple des modifications du texte).

Je crois avoir déjà mentionné la <edit>sIFR</edit> dans cet ordre d'idée, même si elle reste elle aussi une "bidouille".
Modifié le 30 Oct 2004 - 12:35

@Laurent >
Lorsque je disais "Certes, je ne voyais pas cela comme ça. Mais cette technique (imparfaite) est également utilisée pour avoir des titres en image plus accessibles et pas seulement pour les référenceurs."

Je ne parlais pas de la seconde méthode (content sur title), mais de la première méthode (textes superposés) :

Je parlais de la technique d'utiliser ce genre de choses :

<h1><span>titre</span></h1>

Avec :

h1 {background-image...}
h1 span {display: none}

C'est une méthode couramment utilisée pour les titres en images tout en leur proposant un texte alternatif pour navigateurs textes.
Même si cette méthode est imparfaite, tu en as parlé dans deux billets, elle reste souvent utilisée.

Oups, en effet. Je ne pensais pas du tout à cela... vu que cette technique reposant sur le display:none pose de très sérieux problèmes d'accessibilité en raison de :
- l'interprétation erronée de display: none par les développeurs : celui-ci s'aplique (et c'est logique) à tous les médias, y compris les media "aural". Display: none ne doit pas être employé [i]actuellement pour masquer du contenu à un lecteur d'écran[/b]. <edit>Il pourra l'être lorsque ceux-ci implémenteront les CSS "aural" et/ou "speech" permettant de rétablir le display de son choix pour l'élément concerné.</edit>
- nombreux bugs CSS des lecteurs d'écran qui n'en ont actuellement strictement rien à faire des standards Web, des dispositifs HTML normalisés pour l'accessibilité, et autres WCAG (ce n'est pas leur intérêt commercial, puisque ces standards sortiraient l'accessibilité de la niche propriétaire sur laquelle repose leur existence).

Bref, je croyais acquis que cette technique était tout sauf accessible.
Modifié le 30 Oct 2004 - 13:53

ElMoustiko a écrit :

Genre pour des <pre>, on met class="PHP" class="CSS" class="JavaScript", ... et via CSS

pre
{
background: #fff ;
}
html > body pre[ class]:before /* hack pour éviter qu'IE interprete font, et margin */
/* il y a un espace entre [ et class pour eviter que ca soit interprété comme du BBcode*/
{
content: attr(class) ;
color: #eee ;
margin-top: 5px ;
font-size: 3em ;
font-style: italic ;
}

J'ai tapoté le code comme ça au filling, mais ca pourrait donner un résultat sympa en testant un peu.

Personnellement, je n'utiliserai pas class (car toutes les classes seraient identiques finalement), mais plutôt title qui apporterait une description supplémentaire.

Ahh wé c'est pas débile ce que tu dis là Raphaël, c'est vrai que le title apporte une information supplémentaire.

Laurent Denis a écrit :

- l'interprétation erronée de display: none par les développeurs : celui-ci s'aplique (et c'est logique) à tous les médias, y compris les media "aural". Display: none ne doit pas être employé actuellement pour masquer du contenu à un lecteur d'écran.

Et si on positionne l'élément comme ceci?

HTML

<h1><span>Titre</span></titre>

CSS

h1 { 
   background: transparent url("images/h1.gif"); 
}

#inagalaxyfaraway span { 
   position: absolute; 
   left: -9999px; 
   top: -9999px; 
}

@Stephan >
Laurent a fait de beaux billets à ce sujet.
Celui-ci notamment vaut le coup-d'oeil : http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image

Oui, beau billet!

La technique du logo clipé en CSS semble viable.
J'ai mis dans mes bookmarks.

Merci!

Stephan a écrit :

J'ai mis dans mes bookmarks.

Bonne idée, il mérite d'ailleurs d'atterir dans les Ressources : http://forum.alsacreations.com/topic.php?fid=7&tid=7