Entité html dans un submit

(reprise du message précédent)

Bonjour,

Ok, je comprends l'intérêt d'opacity pour l'accessibilité.

L'astuce de Manumanu relève de la mâme logique : font: 0/0 a;

J'ai encore des choses à faire avant mais je m'attaque prochainement au petit button avec infobulle.

Je vous tiens au courant.

QuentinC a écrit :

Que fait ce code ? Je ne comprends pas.

Masquer un texte en lui assignant une taille de 0, une hauteur de ligne de 0 et une famille de police qui n'existe pas (a) ? Un hack bien crade en gros.

a écrit :
Masquer un texte en lui assignant une taille de 0, une hauteur de ligne de 0 et une famille de police qui n'existe pas (a) ? Un hack bien crade en gros.

Aha, merci. Je ne connaissais pas la forme 0/0 et je ne pensais pas que le 'a' pouvait être un nom de police.

JE ne pense pas que ce soit plus crade que opacity:0 ou text-indent: -1000000px ou position:absolute + width:1px + overflow:hidden + left: -2px. C'est juste plus compliqué à comprendre.

Le seul truc vraiment proscrit à ma connaissance c'est le texte de même couleur que le fond.

Bonjour,

J'avais beaucoup de choses à faire avant mais il est temps de reven ir sur le suiet.

a écrit :
En clair: le lecteur d'écran lit le texte avec opacity:0 alors que les utilisateurs voyants ne le voient pas; avec display:none ou visibility:hidden, le texte a complètement disparu pour tout le monde, personne ne peut le lire, pas même un lecteur d'écran.

Le problème est qu'il y a encore en service des navifgateurs qui ne comprennent pas opacity.

Du coup, j'ai pour l'instant choisi visibility même si c'est nul pour l'accessibilité.

IE8 ne comprend pas le :hover pour un élément qui n'est pas un lien mais ça marche bien sur tous navigateurs.

Je vais bientôt rebondir avec quelques questions.

a écrit :
Le problème est qu'il y a encore en service des navifgateurs qui ne comprennent pas opacity.

Du coup, j'ai pour l'instant choisi visibility même si c'est nul pour l'accessibilité.

IL y a d'autres astuces.

Celle qui est le plus souvent recommandée ressemble à ceci :

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

Une autre variante plus connue :

text-indent: -1000000px;

Sur ce sujet, il me semble que la technique de Thierry Koblenz, de Yahoo, et utilisée par HTML5boilerplate (et KNACSS) couvre tous les cas de figure :

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

Source : https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html

Merxci de vos réponsesz, je vais bosser dessus.

Les données du problème :

1) Si propriété non gérée par vieux navigateur, les bulles doivent être invisibles.
C'est le problème avec opacity, toutes les bulles s'affichent si le navigateur ne connaît pas.

2) Lecture audio pour les non-voyants
C'est le problème avec display: none ou visiblity: hidden

3) Cette fois cela relève plutôt du purisme mais si possible ne pas donner un ordre idiot au navigateur comme text-indent: -1000em.

J'essaye le truc de Raphaël et si ce n'est pas universel je passe à un ordre idiot.

Je vous tiens au courant, j'espère avancer avant le prochain week-end.

Bonjour,

Exemple d'infobulles dans la ligne fixe en bas de page

Je n'ai pas changé les infobulles, je le fais dès que j'ai le temps, mais la ligne fixe en bas de page me fait rebondir sur plusieurs sujets pour lesquels je vais créer ou réactiver des discussions.

Le positionnment des deux éléments dans div#footer

Le filet supérieur

L'emploi de la pseudo-classe target

Encore merci.

Bonjour,

Dans mon cas l'emploi de clip devrait donner :

#footer a i {position: absolute; top: -2em; left: -1.5em; font-size: 0.98em; white-space: nowrap; color: #000; background-color: infoBackground; z-index: 1; overflow: hidden; padding: 0; height: 1px; width: 1px; border: 0; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px)}

#footer a:hover i {clip: auto; height: auto; width: auto; padding: 2px 3px; border: 1px solid #000}

Par rapport à visiblity: hidden ou display: none la déclaration avec clip est beaucoup plus lourde, en gros il faut ajouter :

overflow: hidden; padding: 0; height: 1px; width: 1px; border: 0; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px)

Puis ensuite corriger au :hover au lieu d'avoir simplement visibility: viqsible ou display: block.

Cela dit l'emploi de clip semble bien fonctionner et si c'est ce qui se fait de mieux pour l'accessibilité je vais peut-être le mettre en ligne.
Modifié par boteha_2 (15 Aug 2015 - 21:17)