Se familiariser avec l'attribut Alt

[MPoppins]

Dead, peux-tu m'indiquer dans la partie admin où sont ces fameux attributs encore vides qu'on puisse se familiariser avec et s'entraîner à les remplir correctement pour la prochaine mouture du site?

http://handy.univ-lyon1.fr/access/charte.html

[MPoppins]

1. Introduction

Cette charte d'accessibilité à pour objectif d'aider les créateurs de pages HTML à réaliser des pages accessibles à la plupart des utilisateurs du Web. Elle s'intérèsse tout particulièrement aux utilisateurs munis d'une synthèse vocal ou d'un terminal braille. Les conseils fournis dans cette charte proviennent des "Accessibility Guidelines" écrites par le World Wide Web Consortium (W3C). Ce texte n'est pas une traduction intégrale de celui du W3C, mais présente les points que nous avons pu faire testé par deux utilisateurs non-voyants de la Mission Handicap utilisant une synthèse vocale et/ou un terminal braille. Toutefois, certaines rubriques présentent des améliorations d'accessibilité diponibles uniquement dans la recommandation 4.0 de HTML du W3C. Cette recommendation n'étant pas encore implémentée dans les navigateurs actuels. Ils sont cependant présents dans cette charte car nous pensons qu'ils apporteront beaucoup pour l'accessibilité des documents HTML.
2. Structure des documents

1. Adopter une structuration générale pour votre site et conserver cette structure pour l'ensemble du site.
2. La structure du site doit permettre à tous les utilisateurs de se repérer aisément quelque soit l'endroit où ils se trouvent.
3. Ne pas utiliser d'éléments HTML pour d'autres fonctions que celles pour lesquelles ils sont prévus.
Exemple : pour votre mise en page, vous avez besoin de décaler certains éléments. Pour ce faire, vous utlisez une image transparente. Cette image, communément appelé cale, ne sert qu'a améliorer votre mise en page.
Si vous n'avez pas d'autre solution ( si vous ne pouvez utiliser les CSS), utilisez plutô un espace  . Si malgré tout, vous ne pouvez utiliser ce choix, NE COMMENTEZ PAS LES IMAGES AVEC UN TEXTE DU TYPE ALT="CALE", mais plutôt avec un commentaire vide : ALT=""
4. Chaque document HTML doit comporter un titre L'utilité du titre d'un document HTML n'est plus a démontrée. En effet, lors de la recherche d'information à travers le Web, la plupart des moteurs de recherche présentent leurs résultats le titre du document trouvé ; de même, bon nombre de navigateurs utilisent ce titre lors de l'ajout d'un signet (bookmark) par l'utilisateur ; enfin, les logiciels d'accès actuels disposent en général d'une fonction permettant de lire la barre de titre d'un programme actif (dans le cas d'un navigateur, le titre du document courant).
5. Utiliser les styles logiques :
Ils permettent à l'utilisateur d'utiliser ces propres options en ce qui concerne les styles (polices, couleurs, taille des polices).
Ceci permet aux utilisateurs de configurer la taille du texte dans leur navigateur (très utile pour les personnes mal voyantes).


3. Images

1.
Fournir une alternatives textuelles pour chaque image
Chaque tag <IMG> doit comporter un attribut ALT, décrivant de manière brève le contenu de l'image. Toutefois, si une image est purement décorative, une alternative vide (ALT = "") peut s'avérer plus judicieuse. En effet, une alternative textuelle ayant pour valeur "IMAGE", n'est d'aucune utilité pour les utilisateurs n'utilisant pas les images.
L'alternative textuelle doit fournir une information aux utilisateurs ayant désactivé l'affichage des images ou utilisant un navigateur textuel. Elle doit être courte et fonctionnelle.
(Si l'image nécessite une description plus longue, utiliser l'attribut LONGDESC.

Remarque : dans la recommendation version 4.0 du langage HTML, l'attribut ALT du tag IMG est obligatoire. Pour les images simples, telles que les icônes utilisées pour des listes à puces, utiliser des alternatives simple. Les alternatives associées aux icônes peuvent être définies de manière fixes dans une charte graphique, accessible aux utilisateurs. Exemple : Si pour une liste à puce on utilise une image représentant une main, il sera plus judicieux d'utiliser comme alternative l'attribut ALT="*" que ALT="main".

2. Proposer une alternative aux images générées par des scripts, comme les compteurs, bandeaux publicitaires, image maps,.. (cf banière du site Mission Handicap)
3. IMAGES MAP :
Si une image map est utilisée, fournir une méthode alternative pour sélectionner les options de cette image map.

4. Liens

1. Définir des liens "parlants" :
i.e. : des textes de liens fournissant une information sur la nature du document vers lequel ils pointent .
Ainsi, on n'utilisera pas de liens tels que: cliquez ici .
2. A l'inverse, ne pas utiliser des textes de liens trop longs. Des textes de liens trop longs ne permettent pas a un utilisateur muni d'une plage braille de parcourir rapidement ces liens.
3. Séparation des liens (pour éviter de confondre 2 liens) :
Lien 1 Lien 2 peut être remplacé par : [Lien 1][ Lien 2], ou bien Lien 1 | Lien 2

5. Sons

* Fournir une transcription textuelle pour tous les clips audio, ceux-ci étant inaccessibles aux utilisateurs malentendants ou sourds.

6. Cadres (Frames)

1.
2. Si la navigation à travers les différents cadres est possible de manière individuelle (comme c'est le cas lorsqu'on a un cadre de menu et un cadre de contenu), indiqué à l'aide de l'élément <NOFRAME> un chemin de navigation dans les différents cadres. Si la navigation n'est pas possible avec un navigateur ne supportant pas les cadres (fortemment déconseillé), prévoir une alternative sans cadre introduite à l'aide de l'élément <NOFRAME>.

Exemple :

<FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200">
<FRAME src="contenu_du_frame1.html"> <FRAME
src="contenu_du_frame2.gif"> </FRAMESET> <FRAME
src="contenu_du_frame3.html">
<NOFRAMES>
<P>Ce doument composé de trois frames contient :
<UL>
<LI><A href="contenu_du_frame1.html">Un menu</A>
<LI><IMG src="contenu_du_frame2.gif" alt="Une image">
<LI><A href="contenu_du_frame3.html">Le corps d'un document auquel on
accède par le menu</A>
</UL>
</NOFRAMES>
</FRAMESET>

3. HTML 4 - Donnez un titre à chaque frame : l'attribut TITLE sert à nommer les frames et frameset. Ce titre peut servir à un utilisateur à se repérer lorsqu'il navigue dans des frames.
4. En attendant les prochains navigateurs capables d'interpréter HTML4.0 il faut donner des noms significatifs aux frames (menu, document, sommaire,etc...) d'un document HTML car en cas d'absence du titre, précédemment cité, la seule information disponible est le nom du frame (NAME) ce qui peut s'avérer obscur (eg. : NAME=" cadre1", NAME="cadre2", ...).

7. Tables

Diverses situations peuvent amener à l'utilisation de tables dans un document, chacune ayant des considéreations en matière d'accessibilité différentes.

1. Présentation de texte en colonnes (comme pour un journal) Sur certains navigateurs (e.g. Lynx), la présence d'éléments BR à la fin d'une cellule permet de linéariser le texte en colonnes.

Exemple : Le code HTML suivant, .....

<table>
<tr>
<td width = "250">

Bienvenue sur le nouveau site de "Sticker Voyage".
Vous trouverez cette semaine
des promotions pour New-York, San Francisco...<BR>
</td>
<td width = "250">
Welcome on the new Website of "Sticker Travel".
This week, special prices for
New york, San Francisco and much more.
</td>
</tr>
</table>

..... donne le résultat suivant sur un navigateur standard :
Bienvenue sur le site de "Sticker Voyage". Vous trouverez cette semaine des promotions pour New-York, San Francisco...
Welcome on the Website of "Sticker Travel". This week, special prices for New york, San Francisco and much more.
et le résultat suivant sur Lynx :

Bienvenue sur le nouveau site de "Sticker Voyage". Vous trouverez cette semaine des promotions pour New-York, San Francisco...
Welcome on the new Website of "Sticker Travel". This week, special prices for New york, San Francisco and much more.

Si vous ne mettez pas le <BR> à la fin de la cellule, vous obtiendrez le résultat suivant sous Lynx :

Bienvenue sur le nouveau site de "Sticker Voyage". Vous trouverez cette semaine des promotions pour New-York, San Francisco... Welcome on the new Website of "Sticker Travel". This week, special prices for New york, San Francisco and much more.

2. Utilisation de tables pour l'organisation d'une page :
De manière générale, l'utilisation de tables pour organiser les éléments dans une page HTML n'est pas recommendé (voire même déconseillé, utiliser de préférence les feuilles de styles). De plus en plus fréquente, cette méthode peut parfois aboutir à des résultats incohérents lorsque la page est lues avec un browser textuel, ou lorsqu'une synthèse vocale est utilisée.
3. Présentation de tableaux de données, matrices L'utilisation du tag <br> à la fin de chaque cellule d'une table permettra une organisation verticale des éléments de présentation sous un navigateur textuel du type Lynx.
4. Généralité :
Lorsqu'on utilise une table, bien avoir a l'esprit la manière selon laquelle cette table va être traitée par le navigateur. L'utilisation d'une table pour mettre en page un document n'est pas prescrit, mais doit faire l'objet d'une attention particulière.
5. Mise en page de liens à l'aide d'un table
6. Matrices, tableaux de données

8. Formulaire

1. Utilisez le tag LABEL pour décrire une entrée de formulaire.

<LABEL>Entrez votre nom<INPUT TYPE=...></label>

ou

<LABEL FOR="input1">Entrez votre nom</label>
<INPUT TYPE=... ID="input1">

La deuxième syntaxe permet d'affecter un label a un champ de formulaire lorsque le champ et le label se trouvent dans des blocs différent, comme par exemple des cellules de tableau.
9. Signets

* L'insertion de signet dans un document HTML peut permettre de forcer le placement du curseur d'un utilisateur de terminal braille à à un endroit précis du document.

<a name="nom_du_signet">...</a>

10. Casading Style Sheet (CSS) - Feuilles de Style

* On pourra utiliser les feuilles de style pour positionner les différents éléments dans un document HTML. ATTENTION : les CSS sont normalisées dans HTML 4 et ne sont à l'heure actuelle que supportées en partie par IE4, Netscape4 et AMAYA.

ben y du boulot

[MPoppins]

Déjà, même pour quelqu'un qui a une bonne vue, la taille des polices du forum est trop petite (oui merci le coup de 'tu peux avec firefox agrandir blablablablablabla)

Pour la musique, il faut surement régler le problème de la radio/flash ou trouver dans ces fameux attributs quelque chose qui indique qu'il y en a une puis dans les articles qui référencent les artistes faire peut-être 2 sortes de liens; les classiques qu'il y a déjà et trouver une formule plus adaptée aussi, ça doit pas être sorcier.
La radio est trop petite; légèrement moche mais ça c'est pas grave mais elle est pas pratique à manier.

On devrait aussi proposer au téléchargement tous les logiciels en relation avec le handicap, même si les personnes concernées doivent les connaître, ça permettrait à tout le monde de les découvrir aussi et pourquoi pas de les uitliser pour 'voir'.

Bon tout ça n'a pas l'air insurmontable, c'est même plutôt sympa comme truc à mettre en place et faudrait aussi l'intégrer dans la compil' pirate 2 ...ça serait un coup d'essai!

Il faudrait surtout trouver un parrain, enfin quelqu'un de directement concerné qui nous aiguille au fur et à mesure parcequ'on peut très bien avoir l'impression d'avoir suivi les consignes et être totalement à côté de la plaque.

[pers]

Tiens j'ai une bonne nouvelle pour toi : à partir de Firefox 3.1 (sortie ce noël), on pourra intéger du son et de la vidéo dans les pages web sans avoir besoin de Flash, uniquement avec des technologies libres et accessibles.

[floyd]

Pour les frames comme daed c'est NOOOOONNNNN.

Pour les attributs alt, c'est une question de rigueur lorsque l'on fait la mise en page HTML. De plus cela est obligatoire pour respecter les standards.

<br /> tout comme pour les <input ...... /> et non pas juste <input .... > (bien que cela soit pour le moment correcte on peut déjà penser aux futurs normes)

Question daed, template ou chaque page aura sa mise en page ???