Bonjour Matthieu et tous,
je viens de lire un article parlant des avantages de WAI-ARIA pour les
utilisateurs de lecteurs d'écran dont le lien a été donné sur twitter.
WAI-ARIA for screen reader users: An overview of things you can find in
some mainstream web apps today:
http://www.marcozehe.de/2014/05/03/wai-aria-for-screen-reader-users-an-overview-of-things-you-can-find-in-some-mainstream-web-apps-today/
Cet article indique entre autres, que Twitter a fait de gros progrès
dans l'accessibilité en utilisant WAI-ARIA.
Ainsi, si tu es connecté à twitter et que tu fais une recherche d'un
utilisateur, WAI-ARIA permettra à un lecteur d'écran d'indiquer si le
champ de saisie dans lequel tu effectues ta recherche est un champ de
saisie, avec autocomplétion, sur plusieurs lignes.
Lorsque tu tapes les lettres de l'utilisateur que tu recherches, le
nombre de résultats est vocalisé grâce à ARIA et tu peux lire la liste
des résultats avec les flèches.
Peut-être que ça répondrait mieux à ta question que Yahoo?
J'aime bien la conclusion de cet article qui dit :
"And if anyone tries to tell you that WAI-ARIA is not important or its
importance is greatly overstated, ask them if they can do what you can
do, without using WAI-ARIA, and without offering any 3rd party app, just
the web browser and assistive technology. WAI-ARIA is important, and it
is being enhanced to provide even richer and more accessible experiences
in the future. More and more apps are moving to a web-based user
interface for both desktop and mobile operating systems, and it is
important to have a technology that can make these rich applications as
accessible as their native counterparts or legacy offerings. The
technology is there, it’s working, so let’s use it!
So keep your JavaScript turned on, fear not, and embrace the future of
web apps!"
Il faut utiliser ARIA, ne plus avoir peur de se servir du javascript!
bonne journée
Sylvie
Le 29/04/2014 16:58, Matthieu Marseille a écrit :
Merci Sylvie, ça ne répond pas à ma question, mais ça me donne des
pistes en effet. Le système sur Yahoo est similaire au mien en tout
point à priori (au moins en terme de restitution).
D'une part, je remarque que ça fonctionne mieux sous Firefox que
Chrome : sur Chrome, je n'ai aucune proposition / suggestion, et rien
n'est vocalisé dans la liste proposée, alors que sur Firefox, j'ai
bien les suggestions, et certaines sont vocalisées correctement.
Cependant, je remarque que la vocalisation est aléatoire, et repasser
sur un élément qui a été vocalisé correctement une première fois ne
garanti pas qu'il soit vocalisé à nouveau, à la place NVDA dit "vide".
Je ne trouve pas d'ARIA dans le code sur Yahoo, mais par contre ça
peut être une piste pour moi, je vais creuser dans ce sens !
2014-04-29 16:47 GMT+02:00 Sylvie Duchateau
<[email protected]
<mailto:[email protected]>>:
Bonjour Matthieu,
Je ne sais pas si ça répond à ton problème, mais vas voir sur le
site de yahoo.fr <http://yahoo.fr>.
Avec NVDA, lorsque tu tapes braille par exemple, NVDA dit : "une
ou plusieurs suggestions sont disponibles. Utilisez les flèches
haut et bas pour les faire défiler".
Tu utilises alors les flèches et NVDA annonce: "brailler",
"braille alphabet", "braillenet", "braille wikipédia" etc...
Je crois qu'ils utilisent ARIA, mais à vérifier, pour ça je laisse
la parole aux techniciens.
Amicalement
Sylvie
Le 29/04/2014 15:18, Matthieu Marseille a écrit :
Hello la liste,
Question un peu tricky je pense, je vais essayer d'être clair.
J'ai un champ de recherche d'horaires, qui est branché sur une
autocompletion (utilisant jquery.ui). Au bout de (x)
caractères entrés
dans le champ, l'autocompletion se met en marche, avec un échange
front-back pour pré-trier les résultats, et une mise en
surbrillance
dans la liste de résultats des caractères entrés dans le
champ, tout
cela fonctionne plutôt bien.
Mon problème se situe sur la mise en surbrillance des éléments
dans la
liste : chaque élément de la liste d'autocompletion (elle même
un ul /
li) est un lien <a>, et pour obtenir la surbrillance, les
caractères
entrés dans le champ sont triés, puis affichés encapsulés dans
un <span>
dans la liste, afin de pouvoir changer leur style, mais je
n'arrive pas
à faire vocaliser ces éléments par NVDA : il me vocalise juste
"vide"
pour chaque entrée.
J'ai essayé de remplacer les <span> par du <strong> ou <em>
sans succès,
j'ai tenté aussi de réinjecter l'intitulé complet en title sur le
<span>, là non plus sans succès.
Pour exemple, les éléments de la liste ressemblent à ça :
<li class="ui-menu-item" role="presentation">
<a title="Pernes" id="ui-id-5" class="ui-corner-all"
tabindex="-1">
<span title="Pernes">Per</span>nes
</a>
</li>
Auriez-vous déjà rencontré quelque chose de similaire,
auriez-vous une
idée ou une piste ?
Merci !
--
Matthieu MARSEILLE
DFO - F6 TECH
[email protected] <mailto:[email protected]>
<mailto:[email protected] <mailto:[email protected]> >
+33 (0)1 49 68 24 55
<tel:%2B33%20%280%291%2049%2068%2024%2055> FullSIX France
157 rue Anatole France
92309 Levallois Perret Cedex
<http://maps.google.fr/maps?q= fullsix+levallois+perret&oe=
utf-8&client=firefox-a&ie= UTF8&hl=fr&hq=fullsix&hnear=
Levallois-Perret&ll=48.900189, 2.279363&spn=0.016673,0.
045447&z=15&iwloc=A
<http://maps.google.fr/maps?q=fullsix+levallois+perret&oe=utf-8&client=firefox-a&ie=UTF8&hl=fr&hq=fullsix&hnear=Levallois-Perret&ll=48.900189,2.279363&spn=0.016673,0.045447&z=15&iwloc=A>>
http://www.fullsix.com
<http://www.fullsix.com/>
______________________________ _________________
liste_gta mailing list
[email protected]
<mailto:[email protected]>
http://list.accessiweb.org/ mailman/listinfo/liste_gta_
list.accessiweb.org
<http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org>
--
Sylvie Duchateau
Association BrailleNet
Tél.: + 33 (0) 1 44 27 26 25
<tel:%2B%2033%20%280%29%201%2044%2027%2026%2025>
Fax : +33 (0) 1 44 27 34 38
<tel:%2B33%20%280%29%201%2044%2027%2034%2038>
Web: http://www.braillenet.org / http://www.accessiweb.org
______________________________ _________________
liste_gta mailing list
[email protected] <mailto:[email protected]>
http://list.accessiweb.org/ mailman/listinfo/liste_gta_
list.accessiweb.org
<http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org>
--
Matthieu MARSEILLE
DFO - F6 TECH
[email protected] <mailto:[email protected]>
+33 (0)1 49 68 24 55 FullSIX France
157 rue Anatole France
92309 Levallois Perret Cedex
<http://maps.google.fr/maps?q=fullsix+levallois+perret&oe=utf-8&client=firefox-a&ie=UTF8&hl=fr&hq=fullsix&hnear=Levallois-Perret&ll=48.900189,2.279363&spn=0.016673,0.045447&z=15&iwloc=A>
http://www.fullsix.com
<http://www.fullsix.com/>
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
--
Sylvie Duchateau
Association BrailleNet
Tél.: +33 (0) 1 44 27 26 25 / Fax : +33 (0) 1 44 27 34 38
www.braillenet.org / www.accessiweb.org
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
