1178 sujets

Accessibilité du Web

Salut,

Je me posais la question en relisant l'article sur les alt de Laurie-Anne ainsi que les commentaires associés. Sur quoi on se base pour dire :'cette image je l'insère via le CSS ou celle-ci je le met dans le html?

Ensuite quel degré de précision pour les alt ? J'essaie d'être explicite mais je me demande si j'en fais pas trop du coup , exemple :

upload/39092-1338498078.png

alt="une flèche noire orientée vers la droite"
Hello.

Ma règle d'or : si le Alt est stupide, c'est qu'il y a de fortes chances que l'image doivent être un background (je n'envisage absolument pas la possibilité que je puisse écrire des Alt stupides Smiley biggrin ).

Plus sérieusement, la meilleure vérification a mon sens reste :

1 - webdeveloper toolbar
2 - Désactiver les CSS. Est-ce que le document a encore du sens?
3 - Désactiver les images. Est-ce que le document avec juste le contenu des Alt a encore du sens? Est-ce que le Alt fait doublon avec son contexte (légende "en dur" sous l'image par exemple)?
4 - ???
5 - Profit!
Modifié par Florian_R (01 Jun 2012 - 00:09)
Hello JM,
Une réponse rapide, qui sera sûrement complétée par d'autres…
jmlapam a écrit :
Sur quoi on se base pour dire :'cette image je l'insère via le CSS ou celle-ci je le met dans le html?

On se base sur la logique de séparation du contenu et de sa mise en forme, tout simplement. Il y a en fait assez peu de situations vraiment ambigües.

Ton exemple ne peut justement pas faire l'objet d'une généralité, à part pour dire que l'immense majorité du temps, le texte alternatif que tu proposes ne sera pas pertinent !

Deux exemples (choisis au pif) d'utilisation de ta «flèche noire orientée vers la droite» :
— cas d'un lien hypertexte proposant le téléchargement d'un fichier où l'on souhaite placer une telle flèche avant le texte du lien pour le rendre plus visible, repérable, sexy, etc. : on utilise CSS avec dans l'idéal la pseudo-classe :before pour afficher la flèche (ou un background-image si l'on souhaite être rétro-compatible). L'image est alors purement décorative et n'a pas vocation à avoir le moindre texte alternatif.
— cas d'un diaporama comportant de telles flèches pour passer à l'image suivante/précédente : on affiche les flèches via HTML avec <img /> et on place un texte alternatif pertinent, par exemple «image suivante/image précédente».

Pour ce type de pictogrammes, le texte alternatif pertinent ne réside la plupart du temps pas par une description "physique" de l'image mais par une explication du contenu véhiculé par l'image (cas #2).

Ton exemple hors contexte ne permet pas d'en dire beaucoup plus… aurais-tu un exemple en situation pour lequel tu te poses cette question ? Ça permettrait de donner une réponse plus tranchée Smiley smile
Salut à vous deux,

Effectivement je vérifie en désactivant les images. En réalité j'utilise beaucoup les ul ol li etc... parce que finalement sur un site il y a pas mal de listes. Donc oui effectivement pour des puces je passerais plutôt par le CSS, cela paraît évident ne serait-ce que pour éviter d'avoir à retaper le même code.

Dans ses commentaires Laurie-Anne parle de rue 89 et dit que cela n'aurait aucun sens de passer par le CSS et là je comprends rien du tout.

Effectivement la flèche n'est pas à prendre dans le cas d'une déco de liste ou d'un suivant etc... donc si je te suis audrajsb il y a bien la logique :
_ l'image est porteuse de sens (slider) HTML
_ l'image décore CSS

Ma question porte pour quand on commence à bosser des projets intéressants ce qui semble être bientôt mon cas. Tant que c'est perso ou semi-pro on peut réajuster mais si j'ai 2000 images c'est une autre paire de manche.

Donc si j'arrete mes digressions :

photo d'un chat < alt=''photo d'un chat' ?
< alt="un chat" ?
jmlapam a écrit :

photo d'un chat &lt; alt=''photo d'un chat' ?
&lt; alt=&quot;un chat&quot; ?


La dernière fois que j'ai testé un lecteur écran il annonçait à chaque fois qu'il rencontrait une image qu'il s'agissait d'une image avant de lire le alt. Donc je met juste "un chat" à part si il y a une raison particulière de nommer le type d'image. Ex : une peinture représentant un chat.

Bon j'ai pas fait de tests beaucoup plus poussés et l'accessibilité est loin d'être ma spécialité.
Modifié par jb_gfx (01 Jun 2012 - 01:52)
Salut jb,

oui je pensais justement aux lecteurs d'écran. Le truc c'est de savoir si je peux me baser sur quelque chose de potable / passable que je vais pouvoir itérer via le PHP sur des centaines d'images.
Bonjour,

Déterminer si une image est décorative ou non n'est pas une science exacte (même s'il y a des cas évidents). Dans le cas de ta flèche, sauf si elle se trouve dans une banque d'images, son alt n'est pas bien choisi (voir réponse d'audrasjb). Ce qui détermine le alt d'une image, c'est principalement son contexte.


Pour le "Photo de", en général, je suis contre, sauf dans le cas d'une description vraiment complète ; et là encore, il est préférable de placer cette description dans un paragraphe suivant la photo.


Pour ta centaine d'images, il faut voir :
- Est-ce que ces images sont du même "type" ?
- Auront-elles un contexte/but similaire ?
- Pourquoi as-tu autant d'images (banque d'images, illustrations aléatoires...) ?
- ...
jb_gfx a écrit :
Comment ça ? Tu as un exemple ?


Ouep il s'agit de taffer sur un système d'upload.

@Laurie-Anne :
- Est-ce que ces images sont du même "type" ?

>>oui, par groupe du moins

- Auront-elles un contexte/but similaire ?

>> oui

- Pourquoi as-tu autant d'images (banque d'images, illustrations aléatoires...) ?

banque d'image oui.
Le lien de Patidou est très complet, c'est vraiment simple, peut-être même trop mais en tout cas c'est un bon début. Merci à vous.