L'implémentation dans Firefox des Applications Internet Riches Accessibles (ARIA) permet aux contrôles de style applicatif, comme les arbres, les barres de menus et les feuilles de calcul, d'être utilisables à la fois avec le clavier et avec des technologies d'assistance, comme les lecteurs d'écran, les agrandisseurs d'écran et les périphériques d'entrée alternatifs. Elle aide aussi à fournir des solutions d'accessibilité pour les mises à jour locales d'une page du style AJAX.
ARIA, originellement connu comme accessibilité DHTML, est un nouveau standard prometteur en cours de développement au W3C - World Wide Web Consortium. Toute la documentation est disponible sur cette page publique du groupe de travail sur les protocoles et les formats ( PFWG ). Cela comprend le roadmap ARIA, le ARIA roles spec et le states module .
Le code pour ARIA dans Firefox est une contribution d'IBM.
Des exemples ARIA, qui montrent l'implémentation dans Firefox, sont disponibles. Tandis que la communauté attend après le groupe Protocoles et Formats du W3C pour faire passer l'implémentation ARIA dans les différentes phases du processus de standardisation, des sites web peuvent déjà être aujourd'hui développés en tirant profit du support de ARIA dans Firefox. Des corrections de bugs et de petites adaptations se produisent encore, des améliorations évolutives se poursuivront dans le support dans Firefox de ARIA.
Navigation au clavier
La navigation au clavier est supportée via une extension de l'attribut HTML tabindex
, implémenté à l'origine dans Internet Explorer. Cette extension permet à n'importe quel élément HTML d'être navigable avec la touche de tabulation ou, au moins, de lui donner le focus par un script ou par la souris. La différentiation entre les éléments navigables avec la touche de tabulation et ceux qui peuvent simplement avoir le focus permet le développement de contrôles conteneurs comme des vues en arbre et des feuilles de calcul, où les flèches sont utilisées pour se déplacer entre les éléments fils du conteneur. Comme ce support se base sur des technologies déjà présentes dans Internet Explorer, les contrôles DHTML peuvent être rendus accessibles au clavier tant dans Firefox 1.5 que dans Internet Explorer. L'extension tabindex
est également prise en compte dans les spécifications des futures versions d'Opera et Safari.
Une documentation pratique sur la construction de contrôles personnalisés navigables au clavier décrit comment coder du DHTML navigable au clavier fonctionnant de manière indépendante du navigateur.
Support de base pour les technologies d'assistance
Le support des technologies d'assistance nécessite Firefox 1.5 et du contenu balisé spécialement en utilisant des attributs limités à un espace de noms pour décrire chaque contrôle. Par exemple, chaque contrôle doit utiliser les attributs ARIA pour spécifier son rôle : un type de contrôle connu comme un menu, une barre de mesure ou de progression. Chaque rôle peut gérer un petit nombre d'attributs de propriétés supplémentaires comme checked
, selected
, required
, invalid
et expanded
. Par exemple, une case à cocher peut être spécifiée comme :
<span tabindex="0" role="wairole:checkbox" property:checked="true" onkeydown="return checkBoxEvent(event);" onclick="return checkBoxEvent(event);"> Un label de case à cocher </span>
La case à cocher ci-dessus est totalement personnalisée, mais se comporte tout à fait comme une case à cocher normale en ce qui concerne les technologies d'assistance et l'utilisateur. L'auteur peut lui donner n'importe quelle apparence visuelle de son choix via CSS. Voici le détail des attributs :
Attribut | Signification |
---|---|
tabindex="0" |
Place la case à cocher basée sur <span> dans le cycle de navigation par tabulation, et permet de lui donner le focus par un clic de souris. Par contraste, tabindex="-1" aurait permis à l'élément d'obtenir le focus via un script ou un clic de souris, mais sans le faire entrer dans le cycle de tabulation par défaut. |
role="wairole:checkbox" |
Indique qu'il s'agit d'une case à cocher, afin d'en informer les technologies d'assistance comme les lecteurs d'écran. |
property:checked="true" |
Les cases à cocher gèrent une propriété checked ; la préciser indique que la case peut être cochée. Les propriétés sont également définies pour les technologies d'assistance. |
onkeydown="return checkBoxEvent(event);" |
Permet la capture de la barre d'espace pour inverser la propriété checked . La méthode checkBoxEvent() est responsable de cette implémentation, ainsi que de retourner false si l'évènement ne doit pas continuer à être propagé (a été traité). |
onclick="return checkBoxEvent(event);" |
Outre la gestion du clavier, cette indication est également nécessaire pour qu'un clic de souris sur la case à cocher inverse sa valeur. |
Veuillez consulter les exemples ARIA fournis pour plus de détails sur l'utilisation de ce balisage. Firefox implémente la correspondance entre ces rôles et propriétés de balisage avec MSAA - Microsoft Active Accessibility ou avec ATK - Accessibility Toolkit (du Gnome Accessibility Project), qui sont les API d'accessibilité standard sous Windows et Linux. Comme les informations de contrôle sont définies via des API d'accessibilité standard, les technologies d'assistance sont dans une grande mesure compatibles avec ces nouveaux contrôles sans aucun code supplémentaire. Le support le plus complet parmi les lecteurs d'écran est pour l'instant fourni par Window-Eyes 5.5 . Les agrandisseurs d'écran comme ZoomText sont également compatibles avec les nouveaux contrôles ARIA.
Le support d'Internet Explorer n'est pour l'instant pas disponible pour les parties rôle et propriétés. Internet Explorer ne supporte actuellement que la navigation au clavier pour ces contrôles. Les fournisseurs de technologies d'assistance devraient être en mesure de gérer directement la sémantique ARIA, sans changements dans Internet Explorer, en se référant directement au DOM et aux évènements de modification du DOM.
Choix entre XHTML et HTML
Les versions actuelles d'Internet Explorer (7 et plus anciennes) ne permettent pas de charger des documents de type MIME XHTML ("application/xml+xhtml"
). Par conséquent, les documents doivent être servis en tant que "text/html"
à Internet Explorer. Pour plus d'informations concernant l'implémentation d'un changement de type MIME, veuillez consulter
XHTML's Dirty Little Secret
. Mise à jour: Firefox préfère le HTML au XHTML maintenant, et l'en-tête HTTP-ACCEPT
a changé. Pour Apache, utilisez la nouvelle règle RewriteCond du fil sur intertwingly.net.
Si vous n'avez pas besoin de migrer en XHTML, les contrôles avec un support ARIA peuvent également être créés en HTML. Le document
Embedding Accessibility Role and State Metadata in HTML Documents
sur le site WAI (Web Accessibility Initiative) Protocols and Formats du W3C explique comment intégrer les informations de rôle et d'état dans l'attribut class
. Une bibliothèque de scripts analyse les informations de rôle et d'état depuis l'attribut class
et les positionnent en tant qu'attributs d'espace de noms sur l'élément.
Certains des exemples ci-dessous sont également fournis en HTML. Ces versions seront chargées correctement par Internet Explorer, et la navigation au clavier fonctionnera convenablement.
La bibliothèque de script analysant les attributs role
et state
depuis l'attribut class
est disponible à cet endroit : enable.js.
Exemples de contrôles
Tests en naviguant avec le clavier et la souris
La navigation au clavier ou à la souris fonctionne tant dans Internet Explorer que dans Firefox. Notez que seules les versions HTML de ces exemples ont été testées et rendues fonctionnelles dans Internet Explorer. Les versions XHTML de ces exemples ne l'ont pas été.
Tests à l'aide de l'extension Firefox Accessibility
L'Extension Firefox Accessibility dispose de fonctionnalités permettant de tester l'accessibilité des rôles ARIA.
Tests avec des lecteurs d'écran
Le support des lecteurs d'écran est uniquement disponible dans Firefox 1.5 et supérieurs. Voici les composants requis qui doivent être installés :
- Firefox : téléchargez et installez Firefox.
- Un lecteur d'écran : pour tester avec un lecteur d'écran, Window-Eyes 5.5 est nécessaire. JAWS 7.x propose également un support partiel de ARIA.
Exemples simples et complexes
Note: des exemples sont aussi listés par rôle/propriété dans les prochaines sections.
Des exemples très simples, montrant les bases de ce qui peut être fait :
- case à cocher XHTML, case à cocher HTML
- barre de mesure graphique XHTML, barre de mesure simple XHTML, barre de progression XHTML
- alerte XHTML, alerte HTML
Des exemples de conteneurs complexes, montrant comment la navigation aux flèches du clavier peut être implémentée :
- feuille de calcul XHTML avec barre de menus
- panneau d'onglets XHTML, panneau d'onglets HTML
- arborescence XHTML, arborescence HTML, arborescence HTML
De plus, des exemples de zones dynamiques, qui fonctionnent actuellemnt dans Fire Vox.
Rôles supportés
Voici un tableau détaillant les rôles supportés par Firefox, et ceux pour lesquels on dispose d'exemples. Notez que certaines propriétés sont "universelles" et fonctionnent sur tous les éléments, voir la section propriétés supportées pour plus d'informations.
Sauf indication contraire, les propriétés sont booléennes et peuvent avoir les valeurs true
ou false
. Dans ce cas, un attribut non défini est équivalent à false
.
Soyez conscients que les attributs checked
, selected
et expanded
sont particuliers. En effet false
est différent de l'absence d'attribut dans le sens où false
indique que le contrôle est cochable/sélectionnable/dépliable et l'absence d'attribut indique qu'il ne l'est pas.
Ce tableau fournit également des détails techniques sur la manière dont Firefox expose ces informations au travers des API d'accessibilité sous Windows (MSAA) et Linux (ATK).
</td>
<td> </td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.1+</td>
<tr> <td>imggroup
</td> <td> </td> <td>name from title attribute</td> <td> </td> <td colspan="3">Défini, mais actuellement pas de support spécial AT</td> </tr> <tr> <td>label
</td> <td> </td> <td>name depuis le contenu des enfants ou l'attribut title
</td> <td> </td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>link
</td> <td> </td> <td>name depuis le contenu des enfants ou l'attribut title
, linked
(toujours true
)</td> <td> </td> <td>Name incorrectement calculé</td> <td>Name incorrectement calculé</td> <td>Window-Eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>list
</td> <td>
readonly
multiselectable
</td>
<td>name depuis l'attribut title
</td> <td> </td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>listbox
</td>
<td>
readonly
multiselectable
</td>
<td>name depuis l'attribut title
</td> <td>XHTML</td> <td>non</td> <td>Window-Eyes 5.5+, JAWS 7.1+</td> <td>Window-Eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>listitem
</td>
<td>
selected=true|false
(l'absence d'attributselected
indique non sélectionnable))checked=true|false
(l'absence d'attributchecked
indique non cochable (checkable
))
</td>
<td>name depuis le contenu des enfants ou l'attribut title
</td> <td> </td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>log
(logs chat, logs game, logs error, etc. Dynamique par défaut)</td> <td> </td> <td> </td> <td>chat AJAX</td> <td colspan="3">Défini, mais actuellement pas de support spécial AT</td> </tr> <tr> <td>menu
</td> <td> </td> <td>name depuis l'attribut title
</td> <td>XHTML</td> <td colspan="3">Window-eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>menubar
</td> <td> </td> <td>name depuis l'attribut title
</td> <td>XHTML</td> <td colspan="3">Window-eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>menuitem
</td>
<td>
haspopup
checked=true|false|mixed
</td>
<td>name depuis le contenu des enfants ou l'attribut title
</td> <td>XHTML</td> <td>Window-Eyes 5.5, JAWS 7.1+ (mais pas checked=mixed
)</td> <td>Window-Eyes 5.5, JAWS 7.1+ (Besoin de tests pour vérifier si le support de checked=mixed
est actif)</td> <td>Window-Eyes 5.5, JAWS 7.1+ (Besoin de tests pour vérifier si le support de checked=mixed
est actif)</td> </tr> <tr> <td>menuitemcheckbox
</td> <td>checked
</td> <td>checkable
, name depuis le contenu des enfants ou l'attribut title
</td> <td> </td> <td>non</td> <td>Besoin de tests de vérification</td> <td>Besoin de tests de vérification</td> </tr> <tr> <td>menuitemradio
</td> <td>checked
</td> <td>checkable
, name depuis le contenu des enfants ou l'attribut title
</td> <td> </td> <td>Besoin de tests de vérification</td> <td>Besoin de tests de vérification</td> <td>Besoin de tests de vérification</td> </tr> <tr> <td>option
</td>
<td>
selected=true|false
(l'absence d'attributselected
indique non sélectionnable)checked=true|false
(l'absence d'attributchecked
indique non cochable (checkable
))
</td>
<td>name depuis le contenu des enfants ou l'attribut title
</td> <td>XHTML</td> <td>non</td> <td>Window-Eyes 5.5+, JAWS 7.1+</td> <td>Window-Eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>presentation
</td> <td> </td> <td>Ces éléments sont automatiquement retirés de la hiérarchie d'accessibilité. Lorsque cet attribut est positionné sur un tableau, tous les descendants relatifs au tableau sont également retirés de la hiérarchie d'accessibilité.</td> <td> </td> <td colspan="3">Tout ce qui utilise des APIs d'accessibilité comme MSAA ou ATK, mais pas DOM-basé AT
Ex., fonctionne avec Window-Eyes 5.5+, JAWS 7.0+, ZoomText 9.1+, mais pas avec Fire Vox</td> </tr> <tr> <td>progressbar
</td>
<td>
valuenow="#"|"unknown"
valuemin="#"
valuemax="#"
</td>
<td>name depuis l'attribut title
</td> <td>XHTML</td> <td colspan="3">Window-eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>radio
</td> <td>checked
</td> <td>name depuis le contenu des enfants ou l'attribut title</code</td> <td>faux boutons radio (XHTML)</td> <td colspan="3">Window-eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td><code>radiogroup
</td>
<td>
invalid
required
</td>
<td>name depuis l'attribut title
</td> <td> </td> <td colspan="3">Window-eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>region
</td> <td> </td> <td> </td> <td> </td> <td colspan="3">Défini, mais actuellement pas de support spécial AT</td> </tr> <tr> <td>rowheader
</td>
<td>
selected=true|false
(l'absence d'attributselected
indique non sélectionnable)readonly
</td>
<td>name depuis le contenu des enfants ou l'attribut title
</td> <td>XHTML</td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.1+</td> </tr> <tr> <td>secret
</td>
<td>
invalid
required
</td>
<td>name depuis l'attribut title
, protégé (toujours true
)</td> <td> </td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>separator
</td> <td> </td> <td> </td> <td> </td> <td colspan="3">Besoin de tests de vérification</td> </tr> <tr> <td>slider
</td>
<td>
invalid
readonly
required
valuenow="#"
valuemin="#"
valuemax="#"
</td>
<td>name depuis l'attribut title
</td> <td>barre de mesure texte XHTML barre de mesure graphique XHTML</td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.1+ (navigation avec les flèches brisée dans JAWS 8.0)</td> </tr> <tr> <td>spinbutton
</td>
<td>
invalid
readonly
required
valuenow="#"
valuemin="#"
valuemax="#"
</td>
<td>name depuis l'attribut title
</td> <td> </td> <td colspan="3">Besoin de test pour vérification</td> </tr> <tr> <td>spreadsheet
</td> <td> </td> <td>name depuis l'attribut title
multiselectable
(toujours true
)</td> <td>XHTML</td> <td colspan="3">déprécié, utiliser grid
en remplacement</td> </tr> <tr> <td>tab
</td> <td> </td> <td>name depuis le contenu des enfants ou l'attribut title
</td> <td>XHTML, HTML</td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>tabcontainer
</td> <td> </td> <td> </td> <td> </td> <td colspan="3">Défini, mais actuellement pas de support spécial AT</td> </tr> <tr> <td>table
</td> <td> </td> <td>name depuis l'attribut title
</td> <td> </td> <td>non</td> <td>Window-Eyes 5.5+, JAWS 7.0+</td> <td>Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>tablist
</td> <td> </td> <td> </td> <td>XHTML, HTML</td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>tabpanel
</td> <td> </td> <td> </td> <td>XHTML, HTML</td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>td
</td> <td> </td> <td>name depuis l'attribut title
</td> <td> </td> <td>non</td> <td>Window-Eyes 5.5+, JAWS 7.0+</td> <td>Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>th
</td> <td> </td> <td>name depuis l'attribut title
</td> <td> </td> <td>non</td> <td>Window-Eyes 5.5+, JAWS 7.0+</td> <td>Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>textarea
</td> <td>readonly
</td> <td>name depuis l'attribut title
</td> <td> </td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>textfield
</td>
<td>
haspopup
readonly
</td>
<td>name depuis l'attribut title
</td> <td> </td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>toolbar
</td> <td> </td> <td> </td> <td> </td> <td colspan="3">Défini, mais pas clair si support spécial At doit lui être fourni ou même si besoin de lui</td> </tr> <tr> <td>tree
</td>
<td>
multiselectable
readonly
</td>
<td>name depuis l'attribut title
</td> <td>XHTML, HTML</td> <td colspan="3">Window-Eyes 5.5+, JAWS 7.0+</td> </tr> <tr> <td>treeitem
</td>
<td>
selected=true|false
(l'absence d'attributselected
indique non sélectionnable)checked=true|false|mixed
(l'absence d'attributchecked
indique non cochable (checkable
))expanded=true|false
(l'absence d'attributexpanded
indique non dépliable)
</td>
<td>name depuis le contenu des enfants ou l'attribut title
</td> <td>XHTML, HTML</td> <td>Windows-Eyes 5.5+, JAWS 7.0+, pas pas de support de checked=mixed
</td> <td>Windows-Eyes 5.5+, JAWS 7.0</td> <td>Windows-Eyes 5.5+, JAWS 7.0</td> </tr> </table>
† tous les éléments permettent des propriétés universelles, qui sont marquées par Tous les éléments dans la colonne Applicable du tableau des propriétés ci-dessous.
all elements allow universal properties, which are marked with "all elements" in the applicability column in the property table below.
Étendue de rôles du module XHTML d'attributs de rôles
Le module XHTML attributs de rôles définit les rôles suivants: banner, contentinfo, definition, main, navigation, note, search, secondary, seealso
En XHTML, cette étendue de rôles peut être utilisée sans le préfixe "wairole:
", par exemple <div role="main">
. Idéalement les lecteurs d'écran fourniront des mécanismes pour obtenir ces rôles, ou bien feront démarrer automatiquement l'utilisateur sur le contenu principal. Les agrandisseurs d'écran et les téléphones cellulaires peuvent aussi par défaut démarrer sur le contenu principal, ou bien fournir une mise en évidence spéciale ou des mécanismes de navigation. Cependant, tandis que ces rôles sont définis via les chaines de rôles MSAA, aucun support spécial n'est actuellement connu dans les technologies d'assistance.
Propriétés supportées
Rôle | Propriétés définies par l'auteur† | Propriétés automatiquement supportées | Exemples | Support Firefox 1.5 | Support Firefox 2 | Support Firefox 3 version de test |
---|---|---|---|---|---|---|
alert |
name depuis le contenu des enfants ou l'attribut title |
XHTML, HTML, XHTML | Window-Eyes 5.5+, ZoomText 9.1+, JAWS 7.1+ | |||
alertdialog |
name depuis le contenu des enfants ou l'attribut title |
non | Window-Eyes 5.5+, ZoomText 9.1+, JAWS 7.1+ | Window-Eyes 5.5+, ZoomText 9.1+, JAWS 7.1+ | ||
application |
XHTML | Window-Eyes 5.5+ | ||||
breadcrumbs |
Défini, mais actuellement pas de support spécial AT | |||||
button |
|
name depuis le contenu des enfants ou l'attribut title |
HTML XHTML (avec description) | Window-Eyes 5.5+, JAWS 8.0+, bouton flèche ARIA ne met pas à jour l'attribut title | ||
buttoncancel |
name depuis le contenu des enfants ou l'attribut title |
Window-Eyes 5.5+, JAWS 7.0+ | ||||
buttonsubmit |
name depuis le contenu des enfants ou l'attribut title , défaut (toujours true) |
Window-Eyes 5.5+, JAWS 7.0+, | ||||
checkbox |
|
name depuis le contenu des enfants ou l'attribut title |
XHTML, HTML | Window-Eyes 5.5+, JAWS 7.0+ | ||
checkboxtristate |
|
name depuis le contenu des enfants ou l'attribut title |
Besoin de tests de vérification | |||
columnheader |
|
name depuis le contenu des enfants ou l'attribut title |
XHTML | Window-Eyes 5.5+, JAWS 7.1+ | ||
combobox |
|
name depuis l'attribut title |
XHTML | Window-Eyes 5.5+, JAWS 7.0+ | ||
description |
XHTML | name depuis le contenu des enfants ou l'attribut title |
Window-Eyes 5.5+, JAWS 7.0+ Besoin d'être utilisé en même temps que aaa:describedby sur l'élément qu'il décrit. |
|||
dialog |
Besoin de tests de vérification | |||||
directory |
Défini, mais actuellement pas de support spécial AT | |||||
document |
Window-Eyes 5.5+ | |||||
grid |
|
name depuis l'attribut title |
XHTML |
|
|
|
gridcell |
|
name depuis le contenu des enfants ou l'attribut title |
XHTML |
|
||
group |
name depuis l'attribut title |
Nom de la propriété Applicable Exemples Support Firefox 1.5 Support Firefox 2 Support Firefox 3 version de test aaa:activedescendant="[id]"
Tous les éléments Listbox XHTML aucun aucun Window-Eyes 5.5+, JAWS 7.0+ aaa:atomic="true"
Tous les éléments
Fire Vox 2.7+ Fire Vox 2.7+ Fire Vox 2.7+
Aussi défini via les API d'accessibilité mais pas encore utilisé par des AT d'usage général aaa:busy="true" ou "false" ou "error"
Tous les éléments Non implémenté Non implémenté aaa:checked="true"
aaa:checked="false"
(signifie sélectionnable, mais non coché) rôles : checkbox, checkboxtristate, menuitem, menuitemcheckbox, menuitemradio, listitem, option, radio, treeitem
Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ aaa:checked="mixed"
(signifie sélectionnable, mais indeterminé) rôles : checkboxtristate, menuitem, treeitem
Besoin de tests de vérification Besoin de tests de vérification Besoin de tests de vérification aaa:controls=IDLIST
Tous les éléments
Fire Vox 2.7+
Aussi défini via les API d'accessibilité mais pas encore utilisé par des AT d'usage général Fire Vox 2.7+
Aussi défini via les API d'accessibilité mais pas encore utilisé par des AT d'usage général Fire Vox 2.7+
Aussi défini via les API d'accessibilité mais pas encore utilisé par des AT d'usage général aaa:datatype="xsd:DATATYPE"
Tous les éléments non non Défini, mais pas de support AT aaa:describedby=IDLIST
Tous les éléments Bouton avec describedby
Zone dynamique avec describedby
Window-Eyes 5.5+ Window-Eyes 5.5+ Window-Eyes 5.5+ aaa:disabled="true"
Tous les éléments Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ aaa:dropeffect="copy" ou "move" ou "reference" ou "none"
Tous les éléments Non implémenté Non implémenté Non implémenté aaa:expanded="true"
rôles : treeitem, region, (combobox ?) aaa:flowto=IDLIST
Tous les éléments Défini, mais pas de support AT Défini, mais pas de support AT Défini, mais pas de support AT aaa:grab= "true" ou "false" ou "supported"
All elements Non implémenté Non implémenté Non implémenté aaa:haspopup="true"
rôles : button, menuitem, textfield
Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ aaa:invalid="true"
Tous les éléments XHTML Window-Eyes 5.5+ Window-Eyes 5.5+ Window-Eyes 5.5+ aaa:labelledby="[IDLIST]"
Tous les éléments labelledby=IDLIST Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ aaa:level=POSITIVE_NUMBER
Tous les éléments, particulièrement utile sur treeitem non non Fonctionne pour les vues d'arbre uniquement, Window-Eyes 5.5+ et JAWS 7.0+ aaa:live=POLITENESS
Tous les éléments
- live="off"
- live="polite"
- live="assertive"
- live="rude"
- multiple live regions
- nested live regions
- controls and politeness
- Form Hints
- AJAX Chat
- Scoreboard
Fire Vox 2.7+ Fire Vox 2.7+ Fire Vox 2.7+
Aussi défini via les API d'accessibilité mais pas encore utilisé par des AT d'usage général aaa:multiselectable="true"
rôles : grid, list, tree
non supporté non supporté Besoin de tests de vérification aaa:owns
Tous les éléments non non non aaa:pressed="true"
rôles : button Besoin de tests de vérification Besoin de tests de vérification Besoin de tests de vérification aaa:posinset=POSITIVE_NUMBER
(généralement ensemble avec aaa:setsize
, et aaa:level
si placé sur un treeitem
) Tous les éléments, particulièrement utile sur option, listitem, treeitem.
mock radio buttons (xhtml) non non Fonctionne pour option, listitem et treeitem uniquement, dans Window-Eyes 5.5+ et JAWS 7.0+ readonly="true"
rôles : checkbox, checkboxtristate, columnheader grid, gridcell, list, listbox, rowheader, spinbutton, textarea, textfield
Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ aaa:relevant=RELEVANCE_LIST
Tous les éléments
Fire Vox 2.7+ Fire Vox 2.7+ Fire Vox 2.7+
Aussi défini via les API d'accessibilité mais pas encore utilisé par des AT d'usage général xhtml:role="wairole:[WAIROLE]"
Tous les éléments Voir tableau des rôles ci-dessus Voir tableau des rôles ci-dessus Voir tableau des rôles ci-dessus Voir tableau des rôles ci-dessus aaa:required="true"
Tous les éléments Window-Eyes 5.5+ Window-Eyes 5.5+ Window-Eyes 5.5+ selected="true"
selected="false"
(signifie sélectionnable, mais pas sélectionné) rôles : columnheader, gridcell, listitem, option, rowheader
Besoin de tests de vérification Besoin de tests de vérification Besoin de tests de vérification aaa:setsize=POSITIVE_NUMBER
(généralement avec posinset<code>, et <code>aaa:level
si placé sur un treeitem
)) Tous les éléments,particulièrement utile sur option, listitem, treeitem
faux boutons radio (XHTML) non non Fonctionne seulement option, listitem, treeitem
, dans Window-Eyes 5.5+ et JAWS 7.0+ aaa:sort=SORT_TYPE
Tous les éléments non non Aussi défini via les API d'accessibilité mais pas encore utilisé par des AT d'usage général tabindex
Tous les éléments HTML Tous les AT, supporté également dans IE 5+ Tous les AT, supporté également dans IE 5+ Tous les AT, supporté également dans IE 5+ valuenow="#"
valuemin="#"
valuemax="#"
rôles : progressbar, slider, spinbutton
barre de mesure texte XHTML barre de mesure graphique XHTML barre de progression texte XHTML Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ Window-Eyes 5.5+, JAWS 7.0+ valuenow non définie(pour une valeur indéterminée)
rôles : progressbar
Besoin de tests de vérification Besoin de tests de vérification Besoin de tests de vérification
Zones dynamiques
Quelques pages web ont des zones dynamiques dont la mise à jour peut être basée sur des actions de l'utilisateur ou des évènements réels. Un exemple de changements basés sur des actions d'utilisateurs est la page préférences de ce wiki. Exemples de changements basés sur l'inclusion d'évènements réels: zone de chat, statistiques de jeux en temps réel ou informations financières en temps réel.
L'accessibilité des lecteurs d'écran pour les zones dynamiques est actuellement problèmatique. Si un lecteur d'écran lisaient tous les changements dynamiques sur une page, ce serait gênant pour l'utilisateur. Si un lecteur d'écran n'en lisait aucun, l'utilisateur pourrait manquer une information vitale.
Une solution est développée grâce à ARIA, où les auteurs web peuvent spécifier quelles sont les zones dynamiques, et aussi des informations supplémentaires utiles sur les zones dynamiques. Cela aidera le lecteur d'écran à déterminer quoi lire et quand.
Ces propriétés ARIA incluent live, atomic, relevant, controls, labelledby
et describedby
. Actuellement, la prise en charge est en cours de développement dans l'extension lecteur d'écran Fire Vox, afin d'aider les efforts de transfert des standards d'écriture, de démontrer le bénéfice d'adopter WAI-ARIA à la communauté web, et de monter à la communauté de développeurs de lecteur d'écran ce qui fonctionne avec une expérience d'utilisateur final.
Plus d'informations:
- Voir le rapport complet sur l'état actuel du développement du balisage de zone dynamique sur AJAX:WAI_ARIA_Live_Regions. Il fournit aussi des liens de tests qui fonctionnent avec Fire Vox.
- Des tests simples et complexes sont proposés par Charles Chen, le développeur de l'extension Fire Vox. Ces exemples fonctionnent tous avec Fire Vox.
- Une autre description du balisage est fourni dans l'article zone dynamique ARIA sur Juicy Studio, par Gez Lemon.
On ne s'attend pas à ce que les zones dynamiques soient prises en charge dans les lecteurs d'écran généralistes avant Firefox 3.
Développement de standards pour ARIA
Au sein de l'Initiative Web Accessibility du W3C se trouve le groupe de travail Protocols and Formats (PFWG). Ce groupe s'est largement concentré sur ce qu'ils appellent la feuille de route du travail sur l'accessibilité du contenu dynamique Web, qui est à la fois un effort à court terme pour définir les rôles et propriétés de base ainsi qu'un effort à long terme pour combler chaque manque important.
Bugs ouverts dans Firefox
La liste complète des bugs ARIA en cours pour Firefox se trouve ici. Vous pouvez y suivre la progression du support d'ARIA dans Firefox.
Le futur de ARIA
D'autres fonctionnalités ARIA sont prévues pour des versions futures. Ce travail dépend de l'établissement d'un standard relativement stable par le groupe PFWG du W3C. Parmi ces changements, on notera la possibilité pour les auteurs de définir de nouveaux rôles héritant des rôles connus, le support d'actions descriptibles, la spécification de relations entre éléments et des touches d'accès sémantiques contournant les conflits actuels entre les raccourcis clavier du navigateur avec ceux de la page Web.
ARIA mailing liste
N'importe qui intéressé par ARIA peut discuter de questions techniques dans la liste WAI-xtech.
Note: comme de robot d'inscription est actuellement arrêté, contacter Al Gilman <[email protected]> et Michael Cooper <[email protected]> pour demander à être ajouté à la liste WAI-xtech.