28172 sujets

CSS et mise en forme, CSS3

Pages :
Dans cet échange : ici ,

Stephan propose une alternative au "display:none" pour cacher le nom du site en texte dans la version graphique, utiliser la propriété CSS "clip" voir le lien proposé ici

Cette propriété CSS clip peut-elle être également utilisée pour un lien ou encore pour un séparateur de lien (|) ?

Merci d'avance pour vos réponses Smiley cligne
Modifié le 17 Dec 2004 - 13:34
Alors je viens de tester ici : http://www.chroniques-taoistes.com/site/

En fait, j'ai créé une class "non-voyant" dans laquelle j'ai placé le titre (h1) en texte et un petit menu avec quelques raccourcis pour permettre une visite simplifiée des pages. Et c'est sur cette class que j'ai utilisé l'attribut clip.

... et ça fonctionne. Le seul problème est que la feuille de styles css ne passe plus la validation W3C à cause de la syntaxe :
clip: rect(1px 1px 1px 1px);


Merci IE Smiley fache
Blog & Blues a écrit :

En mode Strict, pour permettre le support de clip dans IE6.0 Win , tout en restant compatible avec des navigateurs appliquant strictement CSS2.1, il serait donc prudent d'écrire :

p {
position: absolute;
clip: rect(5px 40px 45px 5px);
clip: rect(5px, 40px, 45px, 5px);
}

Internet Explorer ne lira que la première règle clip, tandis que les navigateurs plus strictes liront la seconde.

Notons que le validateur CSS du W3C considère alors que la feuille de style est invalide.


http://blog-and-blues.org/weblog/2004/08/14/272-syntaxe-de-la-propriete-clip
vi vi ! Stephan !! arfff ! si c'est le prix à payer pour une plus grande accessibilité, ce n'est pas bien grave...

Par contre un p'tit truc me gène Smiley rolleyes ... et oui encore un Smiley cligne , c'est la navigation au clavier.

En effet, le menu "raccourcis" n'apparait pas sur ma page graphique, parcontre lors d'une navigation clavier, les liens eux sont survolés par la touche "tab".

Est-ce important ? Gênant ? et si oui, quelle solution adoptée ?

Merci d'avance pour vos suggestions Smiley cligne
Mon premier réflexe en arrivant sur la page est d'aller voir la page "accessibilité" et on n'y voit pas les raccourcis-clavier. Ce serait bien de les lister là.

Pour "tab" je te propose une solution, mais attends que je retrouve...
Heuuuuuuuu ! voui en effet, c'est prévue pour ça... entre autres !

ssssscuse moi, je vais les ajouter dès demain Smiley cligne

Merci pour ton aide ! Smiley biggrin
Bonsoir !!

Bon ! je me suis mal exprimé, je vais essayer d'être plus clair Smiley cligne

- Les raccourcis clavier sont listés.
- En lecture sur un navigateur texte, il apparaît différents éléments comme le titre du site, et certains éléments dédiés aux personnes non voyantes comme par exemple un lien pour passer le sommaire.

- Pour cacher ces différents éléments sur l'interface graphique, j'utilise l'attribut clip comme défini ci-dessus et on ne les voit pas, ça, ça marche.

* Mais si une personne utilise la touche "tab" sur la version graphique pour naviguer, elle va circuler sur un menu invisible puisque caché par clip.

En d'autres termes, ce qui est caché visuellement par clip mais n'est pas caché par une navigation au clavier. Les liens cachés par clip sont repérés par la touche tab.

Pour vérifier, connectez-vous sur mon site en cours de construction et utilisez la touche tab. Vous verrez en haut de la page, se dessiner un rectangle qui entoure les liens invisibles.

Donc je ne trouve pas ça génial.

Est-ce plus clair ainsi ?

Merci pour vos avis... et éventuellement une solution Smiley cligne

Oupssss ! je vous remet le lien : http://www.chroniques-taoistes.com/site/
Modifié le 14 Dec 2004 - 17:46
Courage ! je suis là Smiley lol

Je vais donc formuler ma question autrement Smiley cligne

On connait donc maintenant une limite à l'utilisation de l'attribut clip.

Comment cacher, dans la version graphique, quelques liens destinés uniquement aux personnes non-voyantes ? svp !

Là ça devrait répondre........... même si j'ai peur de la réponse Smiley ohwell
Merci Stephan,

Mais je crois que tu n'as pas bien saisi le problème.

Je souhaite cacher complètement les liens dédié aux personnes non-voyantes dans la version graphique.

Hors, là, ils n'apparaissent pas visuellement grâce à l'attribut clip, mais ils sont quand même détectés par la touche "tab" du clavier. et c'est ça qui ne me convient pas Smiley cligne
Intéressant, ce problème de navigation au clavier. Iil faut en effet convenir que clipper un lien n'est pas une bonne idée Smiley cligne

Réservons plutôt le clip à du contenu sans surprise , comme l'image dans l'exemple des titres.

D'ailleurs, la question importante ici, AMHA, est plutôt: pourquoi cacher ce menu d'accessibilité dans les navigateurs graphiques ?
Merci pour ton intervention Laurent Denis,

Ben ! en fait, il ne présente aucun intérêt pour les personnes qui utilisent un navigateur graphique, c'est même, je trouve, encombrant.

Ces liens sont, dans l'ordre :

- un lien vers la page Accessibilité (qui sera une page d'aide complète)
- un lien pour passer le sommaire
- un lien pour passer les graphismes et accéder directement aux textes (dans l'ordre d'affichage de la page, les graphismes s'affichent en premier)
- un lien vers le formulaire de recherche.

Du confort dans le respect des règles d'accessibilité Smiley cligne
Administrateur
Si ces liens :
- ne doivent pas être visibles aux navigateurs graphiques
- doivent être utilisables sur les autres agents utilisateurs (lynx, moteurs, etc.)
- doit rester utilisables même sans CSS ou sur les navigateurs dinosaures.

... Alors pourquoi ne pas tout simplement donner à ces liens la même couleur que l'arrière plan ? (dans le cas d'un arrière plan uni, bien sûr)

C'est peut-être une idée saugrenue et je m'en excuse si c'est le cas, mais ne vaut-elle pas qu'on y prête attention ?
Bah, je trouve ces liens forts interessant pour des navigateurs graphique moi Smiley sweatdrop

Le lien vers les règles et aide niveau accessibiltés peuvent interesser tout le monde, le lien vers la navigation aussi et le lien vers la recherche c'est clair que lui aussi peut servir !!!
Raphael a écrit :
Si ces liens :
- ne doivent pas être visibles aux navigateurs graphiques
- doivent être utilisables sur les autres agents utilisateurs (lynx, moteurs, etc.)
- doit rester utilisables même sans CSS ou sur les navigateurs dinosaures.

... Alors pourquoi ne pas tout simplement donner à ces liens la même couleur que l'arrière plan ? (dans le cas d'un arrière plan uni, bien sûr)

C'est peut-être une idée saugrenue et je m'en excuse si c'est le cas, mais ne vaut-elle pas qu'on y prête attention ?

ça ne va pas alourdir la mise en page ? (de l'absolute pour les supperposition pour pas que ça "encombre", etc...)
ça ne résoudra pas le pb du clip, ils resteront sélectionnable avec "tab"...
Administrateur
Poire a écrit :

ça ne va pas alourdir la mise en page ? (de l'absolute pour les supperposition pour pas que ça "encombre", etc...)
ça ne résoudra pas le pb du clip, ils resteront sélectionnable avec "tab"...

Ben je pensais simplement à changer la couleur, aucun positionnement spécifique.
Par contre, oui ça restera sélectionnable avec tab... mais c'est un peu le but d'une navigation au départ, non ?
Merci à vous pour vos suggestions Smiley cligne

Evidemment, si il n'y a pas de solution valable, je les ferais apparaître à mon grand regret Smiley smile

- Pour répondre à Raphaël.
Mettre les liens de la même couleur que le fond revient au même que ce qui est fait actuellement (sauf que ce qui est fait n'est pas une bonne idée Smiley smile ) donc ne résouid pas le problème, les liens sont toujours visités par la touche "tab" lors d'une navigation par clavier.

- Pour répondre à ElMoustiko.
Ben ! en fait, conformément au règles, le lien vers la page "Accessibilité" apparaît déjà 2 fois sur la page, dans le menu "Accès direct" juste au dessus du "fil d'Ariane" et dans le pied de page. Je l'ai placé en tout premier dans le menu que je souhaite caché pour que ce soit le premier lien accessible aux personnes non-voyantes. Quand aux liens qui permettent de passer le sommaire ou accéder directement aux textes, je n'en vois pas vraiment l'utilité pour une navigation graphique, d'autant que les deux amènent la page (en version graphique) au même niveau de hauteur. Pour le lien vers le moteur de recherche, tu as vu ou sera le moteur ? Il sera plus rapide de cliquer directement dans le champ.

Enfin, là c'est mon opinion toute personnelle à moi Smiley cligne , ça ne veut pas dire que j'ai forcemment raison et je trouve cet échange, autant que le problème posé, très intéressant.
beh à priori ce qu'il veut c'est les cacher de l'interface graphique avec les même effet qu'en hidden mais qu'ils soient accecible avec une interface non-graphique

utiliser "clip" ou changer la couleur revient en gros au même non ? (dans son cas)
Pages :