1178 sujets
Accessibilité du Web
... 
.. bon, alors voila le résultat des courses...
- pb tabindex : lorsque, comme moi, on ne sait pas bien utiliser tabindex, il ne vaut mieux pas en mettre... Il me semble que cela règle le problème autour de la carte. (Merci, Arsène, de m'avoir fait remarquer cette boulette... sans parler de l'autre boulette sur laquelle nous ne reviendrons pas... )
- pb Mozilla et opera sur la carte : il semble effectivement que ces 2 navigateurs "glissent" sur le flash sans le voir, lorsqu'on circule par les tab. Mais je n'ai aucune idée de la manière de résoudre ce problème.
Comme Jaws fonctionne avec IE, je n'avais tout simplement pas testé ça.
Quelqu'un connait-il une solution ?
Merci merci !
Basille
.. bon, alors voila le résultat des courses...
- pb tabindex : lorsque, comme moi, on ne sait pas bien utiliser tabindex, il ne vaut mieux pas en mettre... Il me semble que cela règle le problème autour de la carte. (Merci, Arsène, de m'avoir fait remarquer cette boulette... sans parler de l'autre boulette sur laquelle nous ne reviendrons pas... )
- pb Mozilla et opera sur la carte : il semble effectivement que ces 2 navigateurs "glissent" sur le flash sans le voir, lorsqu'on circule par les tab. Mais je n'ai aucune idée de la manière de résoudre ce problème.
Comme Jaws fonctionne avec IE, je n'avais tout simplement pas testé ça.
Quelqu'un connait-il une solution ?
Merci merci !
Basille
Ce n'est pas que Mozilla+Opera qui zappent la carte mais tous les navigateurs sauf IE (IE7 en tout cas, le reste je ne sais pas, j'ai pas essayé, peut-être qu'IE8 la zappe aussi ?)
< mode dépression/lexomil en vue >Du coup évidemment ça renvoie à la question de l'utilité d'utiliser Flash pour une simple carte qu'Html+Css sauraient très bien restituer tous seuls, rendant le tout bien plus accessible et aussi bien plus universel (Flash est illisible sur les mobiles par exemple). < /
>
Modifié par Arsene (28 May 2009 - 19:21)
< mode dépression/lexomil en vue >Du coup évidemment ça renvoie à la question de l'utilité d'utiliser Flash pour une simple carte qu'Html+Css sauraient très bien restituer tous seuls, rendant le tout bien plus accessible et aussi bien plus universel (Flash est illisible sur les mobiles par exemple). < /
> Modifié par Arsene (28 May 2009 - 19:21)
Hum... là, je ne suis pas d'accord. La question n'est pas de savoir si cela est indispensable pour une carte. Bien sûr qu'il est possible de faire autrement. Mais Flash apporte du dynamisme et des aspects visuels tout à fait intéressant à un site internet. Pourquoi l'accessibilité d'un site devrait-elle niveler par le bas les aspects visuels dynamiques ?
De plus, en l'occurence, pour les support ou internaute n'ayant pas le player flash, ma carte a bien sûr une alternative en html et css, avec un image fixe.
Par ailleurs, il me semble aussi que QuentinC nous expliquait plus haut que lui-même, naviguant avec Jaws, a installé le player flash pour pouvoir entendre les sons des videos, par exemple. Encore un argument pour ne pas sacrifier Flash sur l'autel de l'incompatibilité et chercher comment l'intégrer, non ?
Bref, quoi qu'il en soit, cela ne résout pas le problème... et si IE est le seul à réagir correctement, ça veut dire que je me suis encore faite avoir par ce fichu navigateur.
Est-ce qu'il n'y aurait pas une piste avec la rédaction des attributs de la balise <object> ?
Basille
De plus, en l'occurence, pour les support ou internaute n'ayant pas le player flash, ma carte a bien sûr une alternative en html et css, avec un image fixe.
Par ailleurs, il me semble aussi que QuentinC nous expliquait plus haut que lui-même, naviguant avec Jaws, a installé le player flash pour pouvoir entendre les sons des videos, par exemple. Encore un argument pour ne pas sacrifier Flash sur l'autel de l'incompatibilité et chercher comment l'intégrer, non ?
Bref, quoi qu'il en soit, cela ne résout pas le problème... et si IE est le seul à réagir correctement, ça veut dire que je me suis encore faite avoir par ce fichu navigateur.
Est-ce qu'il n'y aurait pas une piste avec la rédaction des attributs de la balise <object> ?
Basille
Bon, on va pas troller sur le pour ou contre Flash, je faisais juste remarquer que pour cet usage précis (surligner le nom d'une ville au passage) Html/Css sait le faire plus simplement. L'accessibilité ne nivelle pas par le bas : elle propose, dans la mesure du possible et à résultat strictement égal, des "aspects visuels dynamiques" identiques mais plus universels.
Sur ce sujet le big boss de Opera, Jon von Tetzchner, vient d'écrire un article (dégoté par Tristan Nitot sur standblog) intitulé Web standards could eclipse Flash .
Sur ce sujet le big boss de Opera, Jon von Tetzchner, vient d'écrire un article (dégoté par Tristan Nitot sur standblog) intitulé Web standards could eclipse Flash .
Arsene a écrit :
Bon, on va pas troller sur le pour ou contre Flash, je faisais juste remarquer que pour cet usage précis (surligner le nom d'une ville au passage) Html/Css sait le faire plus simplement.
Ah oui ? je ne connais pas de méthode simple et efficace pour faire cela en html et css, mais cela m'intéresse !
En gros, je n'ai pas réussi à appliquer de style a + a:hover sur les lien d'une map. Mais cela est-il possible ? ou bien il y a une autre méthode pour faire plusieurs boutons dynamiques sur une même image ?
Sans s'éparpiller en effet dans ce débat-là, Flash est un très bon outil, très efficace pour certaines choses. Peut-être disparaitra-t-il, mais tant qu'il est encore là, ça vaut la peine de passer un peu de temps à faire en sorte que tout le monde accède à l'information, je crois.
Arsene a écrit :
Ce n'est pas que Mozilla+Opera qui zappent la carte mais tous les navigateurs sauf IE (IE7 en tout cas, le reste je ne sais pas, j'ai pas essayé, peut-être qu'IE8 la zappe aussi ?)
... J'ai un doute, là : en testant, en navigation par le clavier, j'ai l'impression tous les "objects" sont sqwizés par la plupart des navigateurs, et pas seulement les objets flash ?
Merci pour les réponses !
Basille
Modifié par Basille (29 May 2009 - 10:50)
Basille a écrit :
En gros, je n'ai pas réussi à appliquer de style a + a:hover sur les lien d'une map. Mais cela est-il possible ? ou bien il y a une autre méthode pour faire plusieurs boutons dynamiques sur une même image ?
On peut raisonner dans l'autre sens : se passer de map et créer une image de fond de carte avec des éléments/événements positionnés par dessus.
Non, par exemple une position relative au coin haut-gauche de la carte devrait faire l'affaire. On peut imaginer le nom écrit en dur avec une image de fond qui se positionne en Css au survol (a:hover) venant éclairer en rouge comme dans ton exemple en ligne.
Pour les lecteurs d'écran on a bien la liste des noms en dur, pour les utilisateurs graphiques on a le même effet (mais qui supporte l'agrandissement textuel), pour du non-images la liste reste dispo, pour du non-Css idem, pour du microformat on "spanise" chaque nom comme il faut, etc etc.
Idéalement on n'a pas besoin de <div> : des <li> référencés par ID se positionneront où il faut et les <a> porteront l'image de fond ad hoc. 100% Html-Css pur jus.
Modifié par Arsene (29 May 2009 - 12:09)
Pour les lecteurs d'écran on a bien la liste des noms en dur, pour les utilisateurs graphiques on a le même effet (mais qui supporte l'agrandissement textuel), pour du non-images la liste reste dispo, pour du non-Css idem, pour du microformat on "spanise" chaque nom comme il faut, etc etc.
Idéalement on n'a pas besoin de <div> : des <li> référencés par ID se positionneront où il faut et les <a> porteront l'image de fond ad hoc. 100% Html-Css pur jus.
Modifié par Arsene (29 May 2009 - 12:09)
Oui, je vois la méthode. Pour les gens comme moi qui sont plus graphistes qu'informaticiens, c'est beaucoup plus compliqué que du Flash ( 
). Mais enfin, si cela rend l'accessibilité plus effective, il me semble justifié de se casser la tête.
En fait, j'ai lancé au départ ce fil sur la carte swf parce que justement je n'arrivais pas à monter la carte en question autrement...
Grand merci pour le tuyau qui va bien me servir.
Une des conclusion peut donc être en effet que dans le cas d'une carte, si c'est faisable, il vaut mieux passer par l'html/css. (je continue quand même de penser que dans certains cas de cartes plus complexes que la mienne, la monter en code est un casse-tête insoluble...)
Malgré tout, je pense que ce problème de passage à l'as des object en navigation au clavier dans les navigateurs autres que IE est quand même un gros problème.
Il n'y pas toujours de méthode html/css pour remplacer un media riche.
Je suis aussi tombée sur le tuto alsacréation très intéressant qui propose de rempacer les <iframe> par des <object>. Quid dans ce cas là de la navigation au clavier ?
). Mais enfin, si cela rend l'accessibilité plus effective, il me semble justifié de se casser la tête.En fait, j'ai lancé au départ ce fil sur la carte swf parce que justement je n'arrivais pas à monter la carte en question autrement...
Grand merci pour le tuyau qui va bien me servir.
Une des conclusion peut donc être en effet que dans le cas d'une carte, si c'est faisable, il vaut mieux passer par l'html/css. (je continue quand même de penser que dans certains cas de cartes plus complexes que la mienne, la monter en code est un casse-tête insoluble...)
Malgré tout, je pense que ce problème de passage à l'as des object en navigation au clavier dans les navigateurs autres que IE est quand même un gros problème.
Il n'y pas toujours de méthode html/css pour remplacer un media riche.
Je suis aussi tombée sur le tuto alsacréation très intéressant qui propose de rempacer les <iframe> par des <object>. Quid dans ce cas là de la navigation au clavier ?
Tester un truc du genre :
<ul id="carte"> => lui donner une taille en px et la carte en background
<li id="ville1"><a href=""><span class="locality">Ville 1</span></a></li> => position relative pour li, image "rouge" PNG en fond pour a => une demi-image sup vide (pour voir la carte en dessous) et une demi-image "rouge" en bas à afficher au survol a:hover+ a:focus (pour les TAB)
Ça c'est pour tes coins arrondis.
Pour faire plus simple encore (sans images) : a:hover+a:focus {background-color:red;color:white; } mais tu as des coins carrés.
Modifié par Arsene (29 May 2009 - 12:14)
<ul id="carte"> => lui donner une taille en px et la carte en background
<li id="ville1"><a href=""><span class="locality">Ville 1</span></a></li> => position relative pour li, image "rouge" PNG en fond pour a => une demi-image sup vide (pour voir la carte en dessous) et une demi-image "rouge" en bas à afficher au survol a:hover+ a:focus (pour les TAB)
Ça c'est pour tes coins arrondis.
Pour faire plus simple encore (sans images) : a:hover+a:focus {background-color:red;color:white; } mais tu as des coins carrés.
Modifié par Arsene (29 May 2009 - 12:14)
Oui, je vois bien la méthode et je te confirme que cela fonctionne, c'est d'aillerus comme ça qu'est monté le menu principal sur le site où est ma carte.
...sauf que moi je n'utilise pas les PNG qui ne sont pas compatibles avec tous les navigateurs (hum... oui, c'est IE ui les digère mal...
Je ne suis pas pro IE, mais il est très utilisé, donc on doit bien le prendre en considération), j'utilise plutôt des gif transparent. OK pour ça.
Mais c'est plutôt pour les coordonnées de chaque <li> que cela me semble compliqué, voire impossible dans certains cas. Par exemple dans le cas de localités si proches sur la carte que les pavés se superposent...
Je suppose que le plus simple est de monter une map dans un éditeur html, qui donnera ainsi toutes les coordonnées de chaque lien, à récupérer pour les placer en id dans la css.
Autre détail : les noms n'ont pas tous la même longueur. L'image de fond (coins arrondis ou quoi que ce soit d'autre) doit donc s'y adapter.
Ou bien il faut en créer de plusieurs tailles, et choisir la bonne à chaque fois.
Ou définir pour chaque <li>, dans son id une dimension + un arrière plan différent, etc.
Face à cette complexité, la tentation est grande de vraiment simplifier le visuel, quand même...
...sauf que moi je n'utilise pas les PNG qui ne sont pas compatibles avec tous les navigateurs (hum... oui, c'est IE ui les digère mal...
Je ne suis pas pro IE, mais il est très utilisé, donc on doit bien le prendre en considération), j'utilise plutôt des gif transparent. OK pour ça.Mais c'est plutôt pour les coordonnées de chaque <li> que cela me semble compliqué, voire impossible dans certains cas. Par exemple dans le cas de localités si proches sur la carte que les pavés se superposent...
Je suppose que le plus simple est de monter une map dans un éditeur html, qui donnera ainsi toutes les coordonnées de chaque lien, à récupérer pour les placer en id dans la css.
Autre détail : les noms n'ont pas tous la même longueur. L'image de fond (coins arrondis ou quoi que ce soit d'autre) doit donc s'y adapter.
Ou bien il faut en créer de plusieurs tailles, et choisir la bonne à chaque fois.
Ou définir pour chaque <li>, dans son id une dimension + un arrière plan différent, etc.
Face à cette complexité, la tentation est grande de vraiment simplifier le visuel, quand même...
Arsene a écrit :
Disons qu'avec moins de la moitié du temps que tu as passé sur Flash on arrive à le faire en Html
Hum !... nous ne sommes pas égaux face au code. Pour ma part, je passe dans ce cas beaucoup moins de temps dans flash !
Mais bon, ta méthode marche donc effectivement, quand c'est possible, ça se justifie.
Cela ne résoud pas le problème de <object>.
As-tu (ou quelqu'un d'autre) des infos sur cette histoire de balise <object> (Flash ou pas) qui est zappée dans la navigation au clavier ?
Modifié par Basille (29 May 2009 - 12:42)
Arsene a écrit :
object n'est pas zappé au clavier, c'est son contenu qui l'est.
<a href=""><object></object></a> est fonctionnel et valide il me semble.
Dans la logique, object devrait être un objet unique et non une collection d'objets.
Oups ! je viens de comprendre que tu me donnes ici la solution pour que le focus se mette aussi sur object !!?!!
J'avais très mal lu.
Merci pour la solution, Arsène !! Du coup, mon autre fil n'a aucun intérêt !!!
A bientôt,
Basille