[Résolu] Lettres d'un H1 colorées indépendemment et accessible

Hello !

J'aimerais pouvoir mettre en forme les lettres d'un titre <H1> de manière indépendante tout en prenant en compte l'accessibilité.

Par exemple, si je voulais mettre en rouge les voyelles et en bleu les consonnes avec le titre "Maison":

<style>
.consonne { color: red; }
.voyelle {color: blue; }
</style>

<h1><span class="consonne">M</span><span class="voyelle">a</span><span class="voyelle">i</span><span class="consonne">s</span><span class="voyelle">o</span><span class="consonne">n</span></h1>

Bon... c'est pas joli joli tout ça

Mais est-ce que ça va quand même? Principalement pour l'accessibilité? Est-ce que ça va être lisible par la suite?
Et j'ai d'autres problèmes après à voir... comment j'vais mettre ça dans Wordpress comme titre du blog... m'enfin bon, j'devrais y arriver (élégamment j'espère )

Si vous avez des commentaires ou des idées à me soumettre je suis preneur !

Merci

(ah oui, l'autre solution est de mettre une image avec un title, mais j'ai écarté ça pour l'accessibilité et le référencement... mais peut-être me trompé-je)

EDIT: fermeture du <h1>
Modifié par karib (14 Oct 2014 - 10:46)

Salut,
J'ai trouvé ça : http://forum.alsacreations.com/topic-4-46059-1-Une-lettre-sur-deux-en-gras.html
Conformément à ce que je pensais, si tu découpe le mot avec des balise, ça devient inaccessible...

Bonjour,

Même réponse que _laurent sur l'accessibilité.

karib a écrit :
ah oui, l'autre solution est de mettre une image avec un title, mais j'ai écarté ça pour l'accessibilité et le référencement... mais peut-être me trompé-je

Je pense effectivement que tu te trompes, et doublement :
- Une image est parfaitement référençable et tout à fait accessible...
- Pour peu que les choses soient faite correctement, i.e en utilisant l'alternative textuelle (attribut alt) qui va bien, et non l'attribut title qui n'a, a priori, rien à y faire. (pour en savoir plus lire l'astuce de Laurie-Anne)

Merci pour vos réponses à tous les deux

Je vais remballer ma solution toute pourrav' alors
(basée sur tympanus.net)

et creuser la voie de l'image avec alt donc

Je remet le lien que tu as donné sur l'astuce de Laurie-Anne