Revision 103300 of Accessibility/XUL Accessibility Reference

Revision slug: Accessibility//XUL_Accessibility_Reference
Revision title: Accessibility/XUL Accessibility Reference
Revision id: 103300
Created: Oct 26, 2007, 11:24:50 PM
Creator: Kohei
Is current revision? No
Comment /* Category */

Tags:

Revision Content

This table is designed to show how to expose text properly for various XUL element types. Sections in bold are to draw attention to pieces that are often overlooked for visual layouts. Underlined text may be read by the screen reader.

*************************************************************************Text" />

<description>Label Text</description> *************************************************************************Label Text" />

<label control="controlID">Label Text</label> *************************************************************************Button Text" />

Wrapped Label</label>
</button>

<button id='butwrap2'>
<label control='butwrap2' value="This" />

<button image="images/img.xbm" tooltiptext="Button Text"/> ***************************************************************************************************************************************************************************************************************************Label Text' />********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************Group label" />
<hbox><button label="Button Text" /></hbox>
</groupbox> ****************************************************************************************************************************************************************************************************************************************************************************************************Label Text</label>

<listbox id="listId">
<listitem value="val" label="

Item Text"/>
</listbox>

<label control='listId2' value='List label' />
<listbox rows="5" id='listId2'>

<label value="

Pearl" />
<label value="Female" />
<label value="Gray" />
</listitem> ****************************************************************************************************************************************************************************************************************************************************************************************************Label Text"control="comboId" />

<menupopup>
<menuitem label="

Option1" />
<menuitem label="Option2" selected="true" />
<menuitem label="Option3" />

</menupopup>

</menulist> ******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************Radio Group' control='radioId' />

<radiogroup id='radioId'>
<radio selected="true" label='

Option1' />
<radio label='Option2' />
</radiogroup> ****************************************************************************************************************************************************************************************************************************************************************************************************Status Bar" flex="1"/>
</statusbar> ***************************************************************************************************************************************************************************************************************************Tab Text" /></tabs>
<tabpanels>
<tabpanel orient="vertical"> ... </tabpanel>
</tabpanels> *****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************First name:</label>
<textbox id='inputId'> *************************************************************************Male" /></treerow>
<treechildren>
<treeitem>
<treerow><treecell label="Aramis" /></treerow>

</treeitem><treeitem>
<treerow><treecell label="

Fergus" /></treerow>
</treeitem>
</treechildren>
</treeitem></treechildren></tree> ******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************

Element	Enabled Usage	Comments
description	<description value="
Use for non-label text. Although tutorials claim label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do.
label	<label control="controlID" value="
Either syntax is fine.
button	<button label="
Note that in the third example, only the first label is read
browser	JAWS 7.10 issues	To use a browser element with HTML, the type="content" attribute should be specified. However, this attribute causes any XUL loaded in the browser to have issues with JAWS 7.10. We believe they are using the window class to determine that it is content rather than dialog, but does not support content mode for XUL. Therefore, with JAWS 7.10, to use XUL inside of a browser, the type attribute cannot not be used.
caption		See groupbox
checkbox	<checkbox label='

colorpicker	<colorpicker type="button" palettename="standard" />	colorpicker appears to read color values out if the colorpicker can get focus in the first place.
column		See grid
columns		See grid
command		See Keyboard Shortcut Tutorial
commandset		See Keyboard Shortcut Tutorial
deck		Only the currently selected deck layer can be focused.
grid		Although text in the grid can be read, JAWS does not recognize grids as tables for table reading mode.
groupbox	<groupbox> <caption label="

iframe	JAWS 7.10 issues	Testing with JAWS 7.10, use of an iframe element causes many, unpredictable issues with XUL inside of the iframe. Okay to use HTML inside of iframe. See browser element for more info.
image	<image src="images/img.xbm" tooltiptext='Image Label'/>
key		See Keyboard Shortcut Tutorial
keyset		See Keyboard Shortcut Tutorial
listbox	<label control='listId'>
I don't seem to be able to find a straightforward way to read the header labels in JAWS. Items are read per line as in "Pearl Female Gray"
listitem		See listbox
menuitem		See menulist/menubar
menubar	<menubar hidden="false"> <menu label="File" accesskey="F"> <menupopup> <menuitem label="New" accesskey="N" key="file-new-key"/> </menupopup></menu></menubar>
menulist	<label value="

menupopup		See menulist/menubar
popup		See popupset
popupset		Be careful regarding keyboard access of popups. I don't see a means of accessing a popup brought up via the popup attribute. Using context="popupId" allows access via Shift+F10 on Windows and Linux.
progressmeter	<progressmeter mode="determined" value="10" />	As progress advances, JAWS indicates percentage to the user
radio		See radiogroup
radiogroup	<label value='

row		See grid
rows		See grid
stack		All elements can be focused, even if not visible due to being hidden under something else
statusbar	<statusbar> <statusbarpanel label="
Read using JAWS with insert+page down
statusbarpanel		See statusbar
tab		See tabbox
tabbox	<tabbox> <tabs><tab label="
Focusing the tabbox will visually set focus to the selected tab, then you can select different tabs by using the left and right arrow keys.
tabbrowser	JAWS 7.10 issues	Testing with JAWS 7.10, use of a tabbrowser element causes many, unpredictable issues with XUL inside of the iframe. Okay to use HTML inside of tabbrowser. See browser element for more info.
tabpanel		See tabbox
tabpanels		See tabbox
tabs		See tabbox
textbox	<label control="inputId">

tree	<tree hidecolumnpicker="true" > <treecols><treecol label="Cats" primary="true"/></treecols> <treechildren> <treeitem container="true" open="true"> <treerow><treecell label="
There is no keyboard access to the column picker (the widget visually to the right of the column headers) or the column headers themselves (for sorting by column). These functions must be replicated elsewhere (like in the main menu, e.g. the Manage Bookmarks window in Firefox 2 or the Places window in Firefox 3). JAWS 7.10 can not read the column headers. The main tree is accessible like a regular tree control. Firefox exposes the position, cardinality, and depth of each tree item through the accessible description {{ mediawiki.external('TODO exact format?') }}
treecell		See tree
treechildren		See tree
treecol		See tree
treecols		See tree
treeitem		See tree
treerow		See tree

Elements that do not expose anything to screen readers/have no discovered accessibility issues yet:
arrowscrollbox, bbox, box, grippy, hbox, menuseparator, overlay, page, script, spacer, splitter, stringbundle, stringbundleset, vbox, window

Elements not processed yet:
action, binding, bindings, broadcaster, broadcasterset, conditions, content, dialog, dialogheader, editor, listcell, member, observes, preference, preferences, prefpane, prefwindow, resizer, richlistbox, richlistitem, resizer, rule, scrollbar, scrollbox, scrollcorner, separator, template, textnode, titlebar, toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox, tooltip, treeseparator, triple, wizard, wizardpage

Cases to revisit:

Revision Source

<p>This table is designed to show how to expose text properly for various XUL element types. Sections in bold are to draw attention to pieces that are often overlooked for visual layouts. Underlined text may be read by the screen reader.</p>
<span class="comment">*************************************************************************</span><ins>Text</ins>" /&gt; <br clear="all"><br clear="all">
&lt;description&gt;<ins>Label Text</ins>&lt;/description&gt; <span class="comment">*************************************************************************</span><ins>Label Text</ins>" /&gt; <br clear="all"><br clear="all"> &lt;label control="controlID"&gt;<ins>Label Text</ins>&lt;/label&gt; <span class="comment">*************************************************************************</span><ins>Button Text</ins>" /&gt; <br clear="all"><br clear="all"><p>&lt;button <b>id='butwrap1'</b>&gt;<br>
&lt;label <b>control='butwrap1'</b>&gt;</p><ins>Wrapped Label</ins>&lt;/label&gt;<br>
&lt;/button&gt; <br clear="all"><br clear="all">
&lt;button <b>id='butwrap2'</b>&gt;<br>
&lt;label <b>control='butwrap2'</b> value="<ins>This</ins>" /&gt;<br><p>&lt;label <b>control='butwrap2'</b> value="is" /&gt;<br>
&lt;label <b>control='butwrap2'</b> value="a" /&gt;<br>
&lt;label <b>control='butwrap2'</b> value="button" /&gt;<br>
&lt;/button&gt; <br clear="all"> <br clear="all">
</p>
&lt;button image="images/img.xbm" <b>tooltiptext="<ins>Button Text</ins>"</b>/&gt; <span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><ins>Label Text</ins>' /&gt;<span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><ins>Group label</ins>" /&gt;<br>
&lt;hbox&gt;&lt;button label="<ins>Button Text</ins>" /&gt;&lt;/hbox&gt;<br> &lt;/groupbox&gt; <span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><ins>Label Text</ins>&lt;/label&gt;<br><p>&lt;listbox <b>id="listId"</b>&gt;<br>
&lt;listitem value="val" label="</p><ins>Item Text</ins>"/&gt;<br>
&lt;/listbox&gt; <br clear="all"><br clear="all">
&lt;label control='listId2' value='<ins>List label</ins>' /&gt;<br>
&lt;listbox rows="5" id='listId2'&gt;<br><p>&lt;listcols&gt;&lt;listcol/&gt;&lt;listcol/&gt;&lt;listcol/&gt;&lt;/listcols&gt;<br>
&lt;listhead&gt;<br>
&lt;listheader label="Name" /&gt;<br>
&lt;listheader label="Sex" /&gt;<br>
&lt;listheader label="Color" /&gt;<br>
&lt;/listhead&gt;<br>
&lt;listitem&gt;<br>
</p><p>&lt;label value="</p><ins>Pearl</ins>" /&gt;<br>
&lt;label value="<ins>Female</ins>" /&gt;<br>
&lt;label value="<ins>Gray</ins>" /&gt;<br> &lt;/listitem&gt;
<span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><ins>Label Text</ins>"<b>control="comboId"</b> /&gt;<br><p>&lt;menulist <b>id="comboId"</b>&gt;<br>
</p><p>&lt;menupopup&gt;<br>
&lt;menuitem label="</p><ins>Option1</ins>" /&gt;<br>
&lt;menuitem label="<ins>Option2</ins>" selected="true" /&gt;<br>
&lt;menuitem label="<ins>Option3</ins>" /&gt;<br><p>&lt;/menupopup&gt;<br>
</p>
&lt;/menulist&gt; <span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><ins>Radio Group</ins>' <b>control='radioId'</b> /&gt;<br clear="all"><p>&lt;radiogroup <b>id='radioId'</b>&gt;<br clear="all">
&lt;radio selected="true" label='</p><ins>Option1</ins>' /&gt;<br clear="all">
&lt;radio label='<ins>Option2</ins>' /&gt;<br clear="all"> &lt;/radiogroup&gt; <span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><ins>Status Bar</ins>" flex="1"/&gt;<br> &lt;/statusbar&gt; <span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><ins>Tab Text</ins>" /&gt;&lt;/tabs&gt;<br>
&lt;tabpanels&gt;<br>
&lt;tabpanel orient="vertical"&gt; ... &lt;/tabpanel&gt;<br> &lt;/tabpanels&gt; <span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><ins>First name:</ins>&lt;/label&gt;<br clear="all"> &lt;textbox <b>id='inputId'</b>&gt; <span class="comment">*************************************************************************</span><ins>Male</ins>" /&gt;&lt;/treerow&gt;<br>
&lt;treechildren&gt;<br>
&lt;treeitem&gt;<br>
&lt;treerow&gt;&lt;treecell label="<ins>Aramis</ins>" /&gt;&lt;/treerow&gt;<br><p>&lt;/treeitem&gt;&lt;treeitem&gt;<br>
&lt;treerow&gt;&lt;treecell label="</p><ins>Fergus</ins>" /&gt;&lt;/treerow&gt;<br>
&lt;/treeitem&gt;<br>
&lt;/treechildren&gt;<br> &lt;/treeitem&gt;&lt;/treechildren&gt;&lt;/tree&gt; <span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><span class="comment">*************************************************************************</span><table class="fullwidth-table">
<tbody><tr>
<th> Element </th>
<th> Enabled Usage </th>
<th> Comments </th>
</tr>

<tr>
<td id="description"> description </td>
<td> &lt;description value="</td></tr> <tr><td> Use for non-label text. Although tutorials claim label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. </td> 
</tr><tr>
<td id="label"> label </td>
<td> &lt;label control="controlID" value="</td></tr> <tr><td> Either syntax is fine. </td> 
</tr><tr>
<td id="button"> button </td>
<td> &lt;button label="</td></tr> 
 
<tr><td> Note that in the third example, only the first label is read </td> 
</tr><tr>
<td id="browser"> browser </td>
<td> JAWS 7.10 issues </td>
<td> To use a browser element with HTML, the type="content" attribute should be specified. However, this attribute causes any XUL loaded in the browser to have issues with JAWS 7.10. We believe they are using the window class to determine that it is content rather than dialog, but does not support content mode for XUL. Therefore, with JAWS 7.10, to use XUL inside of a browser, the type attribute cannot not be used.
</td></tr>

<tr>
<td id="caption"> caption </td>
<td> </td>
<td> See groupbox </td>
</tr>

<tr> <td id="checkbox"> checkbox </td>
<td> &lt;checkbox label='</td></tr> <tr><td> </td> 
</tr><tr>
<td id="colorpicker"> colorpicker </td>
<td> &lt;colorpicker type="button" palettename="standard" /&gt; </td>
<td> colorpicker appears to read color values out if the colorpicker can get focus in the first place. </td>
</tr>

<tr>
<td id="column"> column </td>
<td> </td>
<td> See grid </td>
</tr>

<tr>
<td id="columns"> columns </td>
<td> </td>
<td> See grid </td>
</tr>

<tr>
<td id="command"> command </td>
<td> </td>
<td> See <a class="external" href="https://developer.mozilla.org/en/docs/XUL_Tutorial:Keyboard_Shortcuts|XUL">Keyboard Shortcut Tutorial</a></td>
</tr>

<tr> <td id="commandset"> commandset </td>
<td> </td>
<td> See <a class="external" href="https://developer.mozilla.org/en/docs/XUL_Tutorial:Keyboard_Shortcuts|XUL">Keyboard Shortcut Tutorial</a></td>
</tr>

<tr>
<td id="deck"> deck </td>
<td> </td>
<td> Only the currently selected deck layer can be focused. </td>
</tr>

<tr>
<td id="grid"> grid </td>
<td> </td>
<td> Although text in the grid can be read, JAWS does not recognize grids as tables for table reading mode. </td>
</tr>

<tr>
<td id="groupbox"> groupbox </td>
<td> &lt;groupbox&gt;<br>
<p>&lt;caption label="</p></td></tr><tr><td> </td> 
</tr><tr>
<td id="iframe"> iframe </td>
<td> JAWS 7.10 issues </td>
<td> Testing with JAWS 7.10, use of an iframe element causes many, unpredictable issues with XUL inside of the iframe. Okay to use HTML inside of iframe. See browser element for more info. </td>
</tr>

<tr>
<td id="image"> image </td>
<td> &lt;image src="images/img.xbm" <b>tooltiptext='<ins>Image Label</ins>'</b>/&gt; </td>
<td> </td>
</tr>
<tr>
<td id="key"> key </td>
<td> </td>
<td> See <a class="external" href="https://developer.mozilla.org/en/docs/XUL_Tutorial:Keyboard_Shortcuts|XUL">Keyboard Shortcut Tutorial</a></td>
</tr>

<tr>
<td id="keyset"> keyset </td>
<td> </td>
<td> See <a class="external" href="https://developer.mozilla.org/en/docs/XUL_Tutorial:Keyboard_Shortcuts|XUL">Keyboard Shortcut Tutorial</a></td>
</tr>

<tr>
<td id="listbox"> listbox </td>
<td> &lt;label <b>control='listId'</b>&gt;</td></tr>
 
<tr><td> I don't seem to be able to find a straightforward way to read the header labels in JAWS. Items are read per line as in "Pearl Female Gray" </td> 
</tr><tr>
<td id="listitem"> listitem </td>
<td> </td>
<td> See listbox </td>
</tr>

<tr>
<td id="menuitem"> menuitem </td>
<td> </td>
<td> See menulist/menubar </td>
</tr>

<tr>
<td id="menubar"> menubar </td>
<td> &lt;menubar hidden="false"&gt;<br>
<p>&lt;menu label="File" accesskey="F"&gt;<br>
&lt;menupopup&gt;<br>
&lt;menuitem label="New" accesskey="N" key="file-new-key"/&gt;<br>
</p>
&lt;/menupopup&gt;&lt;/menu&gt;&lt;/menubar&gt; </td> <td> </td>
</tr>

<tr>
<td id="menulist"> menulist </td>
<td> &lt;label value="</td></tr> 

<tr><td> </td> 
</tr><tr>
<td id="menupopup"> menupopup </td>
<td> </td>
<td> See menulist/menubar </td>
</tr>

<tr>
<td id="popup"> popup </td>
<td> </td>
<td> See popupset </td>
</tr>

<tr>
<td id="popupset"> popupset </td>
<td> </td>
<td> Be careful regarding keyboard access of popups. I don't see a means of accessing a popup brought up via the popup attribute. Using context="popupId" allows access via Shift+F10 on Windows and Linux. </td>
</tr>

<tr>
<td id="progressmeter"> progressmeter </td>
<td> &lt;progressmeter mode="determined" value="10" /&gt; </td>
<td> As progress advances, JAWS indicates percentage to the user </td>
</tr>

<tr>
<td id="radio"> radio </td>
<td> </td>
<td> See radiogroup </td>
</tr>

<tr>
<td id="radiogroup"> radiogroup </td>
<td> &lt;label value='</td></tr>
<tr><td> </td> 
</tr><tr>
<td id="row"> row </td>
<td> </td>
<td> See grid </td>
</tr>

<tr>
<td id="rows"> rows </td>
<td> </td>
<td> See grid </td>
</tr>

<tr>
<td id="stack"> stack </td>
<td> </td>
<td> All elements can be focused, even if not visible due to being hidden under something else </td>
</tr>

<tr>
<td id="statusbar"> statusbar </td>
<td> &lt;statusbar&gt;<br>
<p>&lt;statusbarpanel label="</p></td></tr><tr><td> Read using JAWS with insert+page down </td> 
</tr><tr>
<td id="statusbarpanel"> statusbarpanel </td>
<td> </td>
<td> See statusbar </td>
</tr>

<tr>
<td id="tab"> tab </td>
<td> </td>
<td> See tabbox </td>
</tr>

<tr>
<td id="tabbox"> tabbox </td>
<td> &lt;tabbox&gt;<br>
<p>&lt;tabs&gt;&lt;tab label="</p></td></tr><tr><td> Focusing the tabbox will visually set focus to the selected tab, then you can select different tabs by using the left and right arrow keys. </td> 
</tr><tr>
<td id="tabbrowser"> tabbrowser </td>
<td> JAWS 7.10 issues </td>
<td> Testing with JAWS 7.10, use of a tabbrowser element causes many, unpredictable issues with XUL inside of the iframe. Okay to use HTML inside of tabbrowser. See browser element for more info. </td>
</tr>

<tr>
<td id="tabpanel"> tabpanel </td>
<td> </td>
<td> See tabbox </td>
</tr>

<tr>
<td id="tabpanels"> tabpanels </td>
<td> </td>
<td> See tabbox </td>
</tr>

<tr>
<td id="tabs"> tabs </td>
<td> </td>
<td> See tabbox </td>
</tr>

<tr>
<td id="textbox"> textbox </td>
<td> &lt;label <b>control="inputId"</b>&gt;</td></tr> <tr><td> </td> 
</tr><tr>
<td id="tree"> tree </td>
<td> &lt;tree hidecolumnpicker="true" &gt;<br>
<p>&lt;treecols&gt;&lt;treecol label="Cats" primary="true"/&gt;&lt;/treecols&gt;<br>
&lt;treechildren&gt;<br>
&lt;treeitem container="true" open="true"&gt;<br>
</p><p>&lt;treerow&gt;&lt;treecell label="</p></td></tr>
<tr><td> <ul><li>There is <b>no keyboard access</b> to the column picker (the widget visually to the right of the column headers) or the column headers themselves (for sorting by column). These functions must be replicated elsewhere (like in the main menu, e.g. the Manage Bookmarks window in Firefox 2 or the Places window in Firefox 3).</li> <li>JAWS 7.10 can not read the column headers.</li> <li>The main tree is accessible like a regular tree control.</li> <li>Firefox exposes the position, cardinality, and depth of each tree item through the accessible description {{ mediawiki.external('TODO exact format?') }}</li></ul></td> 
</tr><tr>
<td id="treecell"> treecell </td>
<td> </td>
<td> See tree </td>
</tr>

<tr>
<td id="treechildren"> treechildren </td>
<td> </td>
<td> See tree </td>
</tr>

<tr>
<td id="treecol"> treecol </td>
<td> </td>
<td> See tree </td>
</tr>

<tr>
<td id="treecols"> treecols </td>
<td> </td>
<td> See tree </td>
</tr>

<tr>
<td id="treeitem"> treeitem </td>
<td> </td>
<td> See tree </td>
</tr>

<tr>
<td id="treerow"> treerow </td>
<td> </td>
<td> See tree </td>
</tr>
</tbody></table>
<p><br clear="all"></p>
<p>Elements that do not expose anything to screen readers/have no discovered accessibility issues yet:<br>
arrowscrollbox, bbox, box, grippy, hbox, menuseparator, overlay, page, script, spacer, splitter, stringbundle, stringbundleset, vbox, window</p>
<p>Elements not processed yet:<br>
action, binding, bindings, broadcaster, broadcasterset, conditions, content, dialog, dialogheader, editor, listcell, member, observes, preference, preferences, prefpane, prefwindow, resizer, richlistbox, richlistitem, resizer, rule, scrollbar, scrollbox, scrollcorner, separator, template, textnode, titlebar, toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox, tooltip, treeseparator, triple, wizard, wizardpage</p>
<p>Cases to revisit:</p>

Revert to this revision