[Résolu] Snippet titre adaptatif, accessibilité et sémantique - votre

A mon tour de poser des questions

Alors que je travaille sur la création de mon blog en mode mobile first (fun times ), s'en vient la problématique de caler le nom à rallonge dans l'espace réduit qui est la top bar.

J'avoue avoir pris une solution temporaire assez crado de type <span> avec une classe qui display: none en fonction de la largeur (je sais: ceymal).

Aujourd'hui je lisais sur le blog d'alsacréations cet article
Abréviations sur le web, balisage sémantique et exemples de code

J'aurais bien laissé un commentaire, mais comme les derniers datent de septembre, je me dit que j'aurais plus de réponses sur le forum.
La (les) solution(s) proposées me semblent un peu trop compliquées à devoir aller caller ses spans aux bons endroits, et surtout l'intérêt d'utiliser la balise <abbr> sans son attribut title.

J'en suis donc venu à cette idée d'utiliser l'attribut title de l'abbréviation et le pseudo-élément :before avec un span à cacher

<a href="#"><abbr title="My Super Awesome Blog"><span>MSAB</span></abbr></a>

@media (min-width: 481px) {

 abbr:before {
    content: attr(title);
  }

  abbr span {
    display: inline-block;
    text-indent: -9999px;
    overflow: hidden;
  }

}

Codepen à voir ici: http://codepen.io/sugarskill/pen/eKroE

Mon texte est toujours centré, mon lien fonctionne avec le before, tout va bien.

Il me semble que dans ce cas sont respectés accessibilité et sémantique, en plus d'être simple et rapide à écrire.
Il faudrait juste doubler dans une CSS pour IE8 car ce dernier zappera la media query.

Qu'en pensez-vous?


Aussi je me pose la question du moyen le plus efficace pour cacher visuellement un élément tout en restant accessible.

J'ai ici utilisé un text-indent négatif (j'ai choisi une valeure négative, car une valeur positive m'a déjà posé des soucis dans l'affichage du content d'un :before).
Mais je me pose la question de l'overflow, de clip, de width et height, de la position absolute.

Le 13 octobre dernier, Yahoo préconise:

.element-invisible { 
position: absolute !important; 
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); 
}

Clip Your Hidden Content For Better Accessibility

Sur le même article, Snook propose cette solution

.element-invisible { 
position: absolute !important;
height: 1px; 
width: 1px; 
overflow: hidden; 
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
clip: rect(1px, 1px, 1px, 1px); 
}

Pour finir avec la méthode dites la plus sure:

.element-invisible { 
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important; 
width: 1px !important; 
overflow: hidden;
}

Cette tartine d'attributs est-elle nécessaire, ou peut-on se contenter de la solution simple de Chris Coyer?

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

Accessibility/SEO Friendly CSS Hiding

Pour ta première question :
Avec jaws, on ne voit toujours et que seulement l'abréviation
Avec NVDA, on voit l'abréviation et le texte long, les deux à la suite l'un de l'autre, collés

Passer par CSS Content pour afficher/masquer du contenu n'est pas une bonne solution. Certains lecteurs d'écran l'ignorent complètement tandis que d'autres la rendent toujours, donc il y a toujours au moins une configuration où on n'obtient pas l'effet désiré.

Pour ta deuxième question, un code que j'ai repéré pour afficher du contenu pour un lecteur d'écran tout en le cachant visuellement est :

position: absolute;
top: auto;
left: -2px;
height: 1px;
width: 1px;
overflow: hidden;

SE méfier des cas où il est facile de déterminer qu'un élément est masqué; Voice Over a tendance à les détecter et à ne pas les lire. Par exemple pas de width/height à 0, pas de clip à 0 non plus. ET j'ai déjà remarqué que les grandes valeurs négatives de top/left/text-indent avaient tendance à faire ramer l'iPhone au moment où VO doit les prononcer (ça se manifeste par des pauses anormalement longues entre le petit son et le début effectif de la lecture).

J'ai pas essayé, mais je pense que ta version avec les clip à 1px devrait aussi fonctionner.

Merci QuentinC d'avoir pris le temps pour ce retour, c'est très intéressant.

Je ne pense pas pouvoir obtenir un résultat parfait, et des choix seront surement à faire, mais ça me donne des pistes de réflexion.

Que conseilles-tu pour tester l'accessibilité? Jaws, NVDA et Voice over?

a écrit :
Que conseilles-tu pour tester l'accessibilité? Jaws, NVDA et Voice over?

Si tu peux les trois, idéalement, oui. C'est les trois lecteurs d'écran les plus utilisés.
A noter que la version 40 minutes de jaws peut suffire, pas besoin de l'acheter.

Si tu dois en enlever un, enlève jaws; c'est le grand n°1 des lecteurs d'écran, mais c'est celui qui est le plus contraignant, le plus difficile à configurer, celui qui respecte le moins les standards, et probablement aussi le plus difficile à maîtriser pour les novices.

Avec NVDA et Voice Over, ça te fait déjà trois environnements à tester: windows+firefox, MacOS+Safari, iOS+Safari. Si tu en enlèves un de ces trois là, tu pourrais rater quelque chose.

Oui pour la version de Jaws c'est ce que je me disais, 40min feront l'affaire.

Merci.

Bonsoir,
toujours intrigué par ces types de dilemme, je me demander si il n’était pas plus simple de masquer avec un display:none; l'un ou l'autre des chaines de texte en laissant dans le HTML un <abbr> et un <span>.Certes , sans style on a le droit au deux et a l'attribut title.

mon codepen a 2 cents http://codepen.io/anon/pen/AgtKc

Cdt,
Modifié par gc-nomade (09 Dec 2013 - 20:33)