28220 sujets

CSS et mise en forme, CSS3

[résolu]Comprendre pourquoi ces lignes?

j'aimerai comprendre à quoi servent ces lignes ? (trouvées sur site en etudiant sa css) je n'en comprend pas l'objet!! a part faire apparaître un logo!! çà me parait bien compliqué Merci de m'éclaicir les idées...

dans HTML

<body>
<div id="container">
	<a class="accessibility" href="#content" title="Skip Navigation - go to content">Skip Navigation - go to content</a>
	<a class="homelink" href="/" title="Media Homepage"> Media Homepage</a>
	<div id="subcontainer">


dans la CSS


#container a.accessibility {
	text-indent: -5000px;
	text-decoration: none;
	position: absolute;
	left: -5000px;
	top: -5000px;
}
#container a.homelink {
	width: 290px;
	height: 45px;
	display: block;
	background-image: url(media_logo.gif);
	background-repeat: no-repeat;
	text-indent: -5000px;
	text-decoration: none;
}

Modifié par dentnoir (06 Nov 2005 - 10:08)
Bonjour,

Je ne sais pas sur quel site tu as trouvé ces lignes, mais elles correspondent à sa politique d'accessibilité. Même si sur un navigateur graphique, l'indentation du texte fait que le lien "go to content" ne sera pas visible, il prend toute son importance lorsqu'un déficient visuel visite le site.

Par exemple, s'il est équipé d'une synthèse vocale, le lien lui sera lu, ce qui lui permettra de mieux se repérer dans l'architecture de la page.

De façon courante, on distingue ces différents liens utiles dans les menus d'accessibilité : "Aller au contenu", "Aller au menu", "Aller à la recherche", "Politique d'accessibilité". Cette dernière page vise à donner des informations supplémentaires, notamment à renseigner les accesskeys si elles ont été définies.

Quant à la classe .homelink, elle a pour rôle de placer un logo effectivement, tout en permettant d'avoir un lien clair pour les déficients visuels.
Modifié par Romain H. (06 Nov 2005 - 17:32)
Bonjour,

Le premier lien est un lien d'accès direct (ou lien d'évitement) et est donc motivé par une logique d'accessibilité.
Il permet dans une structure de page du type :


titre page

menus

contenu

cloture du document


d'éviter, dans une navigation clavier suivant les liens (touche tab du clavier), de devoir systématiquement (dans toutes les pages) passer par tous les liens des menus avant d'atteindre le contenu.

La css concernant ce lien correspond à un choix de le rendre complêtement invisible dans le cas d'une présentation graphique non linéarisée des documents. En fait c'est une erreur car même dans ce cas ce type de lien peut avoir son utilité.

Le deuxième lien renvoit à tout autre chose.

Il s'agit de mettre un logo dans un document, que ce logo soit un lien "retour page d'accueil", et qu'il ne soit pas en dur mais en image background. Il faut donc prévoir le cas d'une consultation non graphique (css non opérante) où le texte en dur du lien permet de garder celui ci accessible en l'absence d'image background. Si la css est active alors le text-indent négatif rend le texte invisible en ne gardant que l'image.

C'est une technique tout à fait efficace avec une limite : css active mais images non chargées.
wouah !!
çà c'est de le réponse précise, je vous en remercie beaucoup tous les deux, mais une question me turlupine, où peut-on trouver de telles astuces pour avoir une accessibilité à tous et comment tester correctement son site si par exemple on n'est pas équipé d'une synthèse vocale.
dentnoir > Pour ce qui est de l'aperçu pour petits écrans ou pour la synthèse vocale, tu peux utiliser Opera qui implémente les deux.
Pour l'aperçu pour petits écrans, tu peux appuyer simultanément sur "Maj" + "F11", il te changera l'affichage comme s'il était vu sur un petit écran.
Pour ce qui est de la synthèse vocale, je ne me suis jamais penché sur le sujet, mais tu devrais trouver des ressources chez un grand fan qui hante ce forum. Smiley cligne
Administrateur
dentnoir a écrit :
wouah !!
çà c'est de le réponse précise, je vous en remercie beaucoup tous les deux, mais une question me turlupine, où peut-on trouver de telles astuces pour avoir une accessibilité à tous et comment tester correctement son site si par exemple on n'est pas équipé d'une synthèse vocale.

Hello,

Tu trouveras énormément de Ressources dans notre salon Accessibilité (voir les sujets d'annonce).
Pour les liens d'évitement, tu devrais trouver plusieurs sujets de forum qui en discutent.
Tu peux égelement t'inspirer des informations et liens que tu trouveras dans la Politique d'Accessibilité d'Alsacréations, et suivre les contenus très intéressants de Web-pour-tous (dont la v2 s'annonce prometteuse).

Bonne lecture pour le week-end Smiley smile
Modifié par Raphael (06 Nov 2005 - 11:30)
Re,

Comme tu te trouves dans un forum plutôt performant pour tout ce qui concerne les standards la qualité et tout ce genre de chose tu dois bien te douter que tu n'auras pas à chercher très loin.

Salon accessibilité du web et handicap > 3 annonces en en-têtes dont > Ressources sur l'accessibilité

Pour les tests il y a le lecteur d'écran jaws qui existe en version de démonstration gratuite (sessions de 40 minutes et relance du logiciel pour avoir une nouvelle session).

PS :

Ah oui, une petite remarque en passant :

il ne s'agit pas du tout d'astuces mais de pre requisit à tout trvail de développement un tant soit peu sérieux.
Modifié par clb56 (06 Nov 2005 - 11:31)
clb56 a écrit :

PS :

Ah oui, une petite remarque en passant :

il ne s'agit pas du tout d'astuces mais de pre requisit à tout trvail de développement un tant soit peu sérieux.


oui, je le pense aussi, excuse d'avoir employé le mot "astuce" et de n'avoir pas plus chercher dans " Politique d'Accessibilité d'Alsacréations".
Merci à tous.
Modifié par dentnoir (07 Nov 2005 - 19:46)
Sujet clos
Aller à