Aller au contenu

Diaporama en demeure de WAI


ste

Sujets conseillés

Elo,

je suis en train de bosser sur un diaporama (il devrait être bientôt diffusé !) web...

J'aimerais que ceux qui s'y connaissent vraiment bien côté accessibilité me disent où sont ses défauts... car je tente à le rendre AAA (Ayayaye ;) ). Avis aux lecteurs d'écran, et autres "texteurs"...

Je l'ai conçu pour qu'il soit conforme XHTML 1.0, CSS3... et ai pensé à beaucoup de choses. Mais, ce soir, je m'y perds un peu...

http://devghs.stephane-huc.net

P.S. : Pour voir des exemples de "Longue Description" :

- Exemple sur Photo

- Exemple sur Vidéo

Un autre avis que le mien risque de m'être profitable ! ;)

Lien vers le commentaire
Partager sur d’autres sites

Niveau codage, je suis pas assez fort pour te répondre, mais ton bout de choux est trop :wub:

Sinon, c'est vraiment beau à voir et le diaporama fonctionne à merveille.

Le côté obscure de ton diaporama ---> J'espère que personne se servira de tes photos qui me semblent être tout de même perso (plus maintenant) :wacko:

En tous les cas, c'est magnifiquement réalisé :up:

Modifié par PwetPwet
Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)
Le côté obscure de ton diaporama ---> J'espère que personne se servira de tes photos qui me semblent être tout de même perso (plus maintenant)  :wacko:

Merci de tes compliments... cest toujours appréciable !

T'inquiète pas pour les photos. Ca fait un moment qu'elles sont diffusées sur le net.

En effet, la première mouture de ce diaporame est sur famille.stephane-huc.net.

Quant à cette nouvelle mouture, j'ai revu le code PHP, le code html ; je l'ai pensé pour être multilingue, et surtout accessible... c'est pour cette raison, que j'aimerais un retour de la communauté, avant de diffuser les sources de manière organisée.

Ce que je veux prouver, c'est qu'il est possible de créer un tel "objet" et de le rendre accessible au plus grand nombre, et là j'entends par accessible, toutes les définitions sous-jacentes !

Hormis le fait, que je connaisse quelques "failles" (tels les titres de pages qui ne changent pas selon le contexte; mais je vais y remédier...) ; je ne suis pas trop sûr de mon concept au niveau de l'usage des "clés" en relation avec les accesskeys et autres relations id !...

Bref, c'est pour ces raisons, et bien plus encore, que je souhaite un retour "éclairé" !!!

Modifié par ste
Lien vers le commentaire
Partager sur d’autres sites

Bon, je viens de le finaliser.

(la gestion des titres est corrigée)

Qu'en penses donc Monique, Yobiwan, Ganf, Denis (et autres "senseï" ;) ) ?!

Lien vers le commentaire
Partager sur d’autres sites

Guest fandeholly

l'ennui avec ces galeries, c'est les blancs laissés entre les photos qui ne sont pas aux même dimensions... Sinon question bête mais le xhtml 1.1 ne t'interesse pas alors que css 3 t'interesse déjà?

un autre truc interessant que je me demande c'est si on doit considérer un lot d'images comme une liste et chaque image comme un objet de la liste... je n'y avais pas pensé avant et ça commence à me troter...

la source est propre mais les tabindex du genre 10014 ça fait bizarre, et j'avoue ne pas avoir commpris comment marchait les longdesc. voilà sinon pas grand chose à dire.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour ste,

Pourquoi utilises-tu la balise <map> alors qu'il n'y a pas de <area> ?

J'avoue ne pas comprendre.

Je préfèrerai "Description détaillée de la photo"

plutôt que "Longue description de la photo"

Mais je ne comprends pas trop ton utilisation des longsdc non plus, puisque le texte s'affiche directement sous la photo.

Et sur le plan puremment visuel, il serait mieux de décoller ton contenu des bords de la page.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Je ne sais pas si ça le fait uniquement chez moi, mais ton diaporama ne fonctionne pas du tout sur IE6 (quand je cliques sur une vignette, j'arrive sur une erreur 404).

Et je trouve que les bordures en pointillées ne sont pas du meilleur effet (mais, bon c'est très personnel comme appréciation...).

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Je ne sais pas si ça le fait uniquement chez moi, mais ton diaporama ne fonctionne pas du tout sur IE6 (quand je cliques sur une vignette, j'arrive sur une erreur 404).

Et je trouve que les bordures en pointillées ne sont pas du meilleur effet (mais, bon c'est très personnel comme appréciation...).

Ca ne me faisait pas la fois ou je l'ai vu pour la première fois, mais je confirme ce que tu dis, dans 7/8 cas sur 10, j'ai la même erreur que toi Pixame

Lien vers le commentaire
Partager sur d’autres sites

Sensei... elle est bien bonne celle-là... Dans mon jeune temps, j'ai bien été sampai quelques années, mais sensei, c'est un titre auquel je ne saurais aspirer (d'autant plus que mes techniques commencent à être très lointaines, voilà trois ans que je ne m'entraine plus).

Enfin, sans faire une analyse très poussée de la chose (l'occasion d'y revenir plusieurs fois sera mieux que de tout essayer de noter d'un coup), je remarque rapidement qualeques trucs trucs :

La première, c'est l'utilisation curieuse de l'attribut longdesc qui devrait en théorie pointer vers un document texte, téléchargeable par l'utilisateur qui souhaite le faire. D'utiliser cet attribut pour faire un simple lien vers une section du site qui contiendrait le dit texte ne me semble pas approprié (ou du moins, correspondante à ce que l'on devrait faire d'un longdesc).

Deuxièmement, les accesskeys pointent bien vers des sections de la page, mais souvent, on en a pas réellement conscience. Je suis dans une résolution de 1024x768 et par exemple, le alt+7 pour le copyright me mène à un endroit ou je ne vois pas le copyright... parce qu'il est juste sous la limite de mon viewport. Ce phénomène semble fréquent, compte tenu que les liens des accesskeys semblent tous mener à des endroits différents des pages (mais souvent dans les mêmes).

Avec les syles désactivés, il n'y a pas d'indications que l'on passe sur des liens cliquables avec les photos... ton menu pour les liens suivants et précédents compte aussi deux puces pour les caractères [ et ] ce qui me semble questionnable. De même, en désactivant les couleurs, on perd les seules informations nous explicitant les liens (comme ceux-ci ne sont pas soulignés ou ne changent lpus sur mouseover, on perd l'indication de leur état). Aussi, en désactivant les images, les alt deviennent très difficiles à lire à cause des bordures en pointillés. Ce genre de trucs pourraient poser problèmes dans un contexte de "full AAA". :)

Dernière chose pour le moment... comment je fais pour revenir au début du caroussel lorsque je suis en plein dedans ? Je n'ai pas remarqué de liens me permettant de revenir au tout début. MAis je te l'accorde, c'est plus une question d'utilisabilité que d'accessibilité.

Voilà pour une première ronde. ^_^

Next !

Lien vers le commentaire
Partager sur d’autres sites

Bonjour ste,

Pourquoi utilises-tu la balise <map> alors qu'il n'y a pas de <area> ?

J'avoue ne pas comprendre.

Je préfèrerai "Description détaillée de la photo"

plutôt que "Longue description de la photo"

Mais je ne comprends pas trop ton utilisation des longsdc non plus, puisque le texte s'affiche directement sous la photo.

Et sur le plan puremment visuel, il serait mieux de décoller ton contenu des bords de la page.

Elo all,

Monique :

- Pourquoi utilisez l'élèment map dans ce contexte ?!

La directive 13.6 te répondra mieux que moi :

Groupez les liens apparentés, les identifiez, et tant que les navigateurs web ne le font pas, fournir un moyen de contourner le groupe...

Et la technique envisagée par le W3C est celle-ci !

There are several ways to allow users to bypass groups of links (as users with vision do when they see the same set on each page):

    * Include a link that allows users to skip over the set of navigation links.

    * Provide a style sheet that allows users to hide the set of navigation links.

    * Use the HTML 4.01 MAP element to group links, then identify the group with the "title" attribute.

In the future, user agents may allow users to skip over elements such as navigation bars.

Dont la traduction française pourrait être :

Il y a différentes façons de permettre à l'utilisateur de contourner les groupes de liens (...) :

    * Inclure un lien qui permet aux utilisateurs de saute le "set" des liens de navigations

    * Fournir une feuille de style qui permette aux utilisateurs de cacher le "set" des liens de navigations

    * Utiliser l'élèment HTML 4.01 MAP pour grouper les liens, et les identifier avec l'attribut "title".

Dans le futur, les agents utilisateurs (ie: autrement dit, browsers web, à ce jour...) permettront aux utilisateurs de passer par dessus des élèments telles que les barres de navigations.

C'est apparemment un détail, qui passe à côté de beaucoup de monde ;)

- le "Description détaillée de la photo" me parait plus correcte aussi... bien vu, monique, merci...

- l'usage de longdesc : en fait, j'ai pensé à deux choses, au niveau usage !

Comme j'ai intégré la gestion (des fichiers .txt s'ils existent), j'ai écrit l'attibut longdesc de l'image pointant vers ce texte qui est remonté (s'il existe bien sûr !)

De, même que j'ai intégré l'élèmen link correspondant en tant que lien alternatif qui pointe directement vers la source brute de ces fichiers texte (quand elles existent !)

Mais, j'ai très bien pu me tromper...

-décoller légèrement : vi d'autant, que moi aussi, cela me génait un peu !

- l'Error 404, je viens de découvrir cela sous IE... et, je ne comprends pas encore pourquoi !?! D'autant que Mozilla "affiche".

Pour info, sous Lynx, j'ai l'erreur qui s'affiche pendant deux, trois secondes, mais il arrive à m'afficher le contenu, c'est vraiment étonnant !!!

Une idée ?!

Lien vers le commentaire
Partager sur d’autres sites

J'avoue bien aimer aussi le coup du sensei ;o)

Pour ce qui est de regarder plus en détail, je vais essayer de prendre du temps car ca n'est pas si simple que ca sur une problématique large.

En tout cas, pour le londesc j'avoue etre assez dubitatif. A la fois tu n'as rien de faux coté codage (tu donnes bien l'accès a une description de l'image par ton ancre) et d'un autre coté je n'arrive pas du tout à voir l'interet d'une telle démarche.. Ca me rappel des developpeurs d'IBM madrid que nous avions formé il 'y deux ans qui voulait absolument implémenter toutes les balises d'accessibilité pour ne pas risquer d'avoir des warnings sous bobby.

Dans ton cas précis la description longue de l'image est présente et ne nécéssite pas l'atribut longdesc. D'autant que cet attribut est super mal géré par les naviagteurs.

WAI demande une description longue des images quand c'est nécéssaire, elle n'impose pas le moyen de le faire. Cela peut etre via un lien sur l'image vers cette descrition longue dans un fichier externe, une légende ...

Je pense que tu en as presque trop fait

:)

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

Denis, ton cyberlecteur a besoin d'un sérieux coup de main, côté réflexion sur tes propos !

L'attribut longdesc, je me suis expliqué dessus ; mon approche n'est peut être pas si mauvaise, bien que différente, je l'avoue (mais j'ai l'habitude d'avoir une vision "faussée" en rapport avec ce que l'on considére la norme ... mais bon, ce n'est pas l'endroit pour m'expliquer...).

(En rapport avec ce que dit Yobiwan : "Je pense que tu en as presque trop fait " <=> c'est justement, souvent le rapport, ce qui me parait normal est souvent trop pour autrui.)

Je reviens à toi Denis :

Avec les syles désactivés, il n'y a pas d'indications que l'on passe sur des liens cliquables avec les photos...

(...)

De même, en désactivant les couleurs, on perd les seules informations nous explicitant les liens (comme ceux-ci ne sont pas soulignés ou ne changent lpus sur mouseover, on perd l'indication de leur état)

(...)

en désactivant les images, les alt deviennent très difficiles à lire à cause des bordures en pointillés.

Et la bordure naturelle sur les images quand elles sont des hyperliens, elles-mêmes...

sans parler du curseur qui change naturellement ... tout en oubliant pas le survol nommant la valeur de l'attribut alt...

Sans la couleur activée, les liens qui ont été actifs deviennent violets, ceux qui n'ont pas été cliqués restent bleus. On perd comment l'indication de l'état ?!

Quant à ta remarque sur les attibuts 'alt' difficile à lire, je me pose la question, si le fait que j'ai un théme sur mozilla, ne me permet pas d'être embété comme tu le parais. (bien que théoriquement, non) ?

Sincérement, je ne te comprends pas !

Peux-tu me faire des captures écran, que j'assimile ton propos, stp !?!

A ceci, ton propos me semble juste :

ton menu pour les liens suivants et précédents compte aussi deux puces pour les caractères [ et ] ce qui me semble questionnable

En effet, cela ne l'est certainement pas ... et, je me suis posé la question, bien que je me demande aussi en quoi cela pourrait être "faux" !

Pour finir, avec cela :

comment je fais pour revenir au début du caroussel lorsque je suis en plein dedans ? Je n'ai pas remarqué de liens me permettant de revenir au tout début.

Alors, là, tu me troubles sérieusement...

Parles-tu de revenir en haut de page ou de revenir à l'index général (la page d'entrée) ?

Car, si c'est de la page d'entrée, il y a bel et bien l'indication "Sortir du Diaporama 'XYZ'" qui permet d'y revenir... Par contre, il n'est peut être pas au bon endroit du code source !?!

Si c'est d'un lien "Top", que tu me questionnes, il est vrai, je l'ai oublié : à émettre ?

Quant à mon problème d'Erreur 404, perceptible sous IE, je sèche vraiment !

Car, même si Lynx le signale aussi, il n'y a que IE qui plante...

Quelle pourrait être la raison ?

Modifié par ste
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...