Accessibility/XUL Accessibility Reference

  • Revision slug: Accessibility//XUL_Accessibility_Reference
  • Revision title: Accessibility/XUL Accessibility Reference
  • Revision id: 103304
  • Created:
  • Creator: hobophobe
  • Is current revision? No
  • Comment 11 words added, 72 words removed

Revision Content

{{ NeedsTechnicalReview() }}

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.

Element Enabled Usage Comments
description
<description value="" />
<description></description>
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="" />
<label control="controlID"></label>
Either syntax is fine.
button
<button label="" />
<button id='butwrap1'>
  <label control='butwrap1'>
    
  </label>
</button>
<button id='butwrap2'>
  <label control='butwrap2' value="" />
  <label control='butwrap2' value="is" />
  <label control='butwrap2' value="a" />
  <label control='butwrap2' value="button" />
</button>
<button image="images/img.xbm" tooltiptext=""/>
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="" />
  <hbox>
    <button label="" />
  </hbox>
</groupbox>
 
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=''/>
 
key   See Keyboard Shortcut Tutorial
keyset   See Keyboard Shortcut Tutorial
listbox
<label control='listId'></label>
<listbox id="listId">
  <listitem value="val" label=""/>
</listbox>
<label control='listId2' value='' />
<listbox rows="5" id='listId2'>
  <listcols>
    <listcol/>
    <listcol/>
    <listcol/>
  </listcols>
  <listhead>
    <listheader label="Name" />
    <listheader label="Sex" />
    <listheader label="Color" />
  </listhead>
  <listitem>
    <label value="" />
    <label value="" />
    <label value="" />
  </listitem>
</listbox>
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
  See menulist and menubar
<menubar hidden="false">
  <menu label="File" accesskey="F">
    <menupopup>
      <menuitem label="New" accesskey="N" key="file-new-key"/>
    </menupopup>
  </menu>
</menubar>
 
<label value="" control="comboId" />
<menulist id="comboId">
  <menupopup>
    <menuitem label="" />
    <menuitem label="" selected="true" />
    <menuitem label="" />
  </menupopup>
</menulist>
 
  See menulist and menubar
  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='' control='radioId' />
<radiogroup id='radioId'>
  <radio selected="true" label='' />
  <radio label='' />
</radiogroup>
 
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="" flex="1"/>
</statusbar>
Read using JAWS with insert+page down
statusbarpanel   See statusbar
tab   See tabbox
tabbox
<tabbox>
  <tabs>
    <tab label="" />
  </tabs>
<tabpanels>
  <tabpanel orient="vertical">
    ...
  </tabpanel>
</tabpanels>
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">
  
</label>
<textbox id='inputId'>
 
tree
<tree hidecolumnpicker="true" >
  <treecols>
    <treecol label="Cats" primary="true"/>
  </treecols>
  <treechildren>
    <treeitem container="true" open="true">
      <treerow>
        <treecell label="" />
      </treerow>
      <treechildren>
        <treeitem>
          <treerow>
            <treecell label="" />
          </treerow>
        </treeitem>
        <treeitem>
          <treerow>
            <treecell label="" />
          </treerow>
        </treeitem>
      </treechildren>
    </treeitem>
  </treechildren>
</tree>
  • 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>{{ NeedsTechnicalReview() }}</p>
<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>
<table class="fullwidth-table"> <tbody> <tr> <th>Element</th> <th>Enabled Usage</th> <th>Comments</th> </tr> <tr> <td id="description">description</td> <td> <pre class="brush: xml">
&lt;description value="<!--Text-->" /&gt;
&lt;description&gt;<!--Label Text-->&lt;/description&gt;</pre> </td> <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> <pre class="brush: xml">
&lt;label control="controlID" value="<!--Label Text-->" /&gt;
&lt;label control="controlID"&gt;<!--Label Text-->&lt;/label&gt;</pre> </td> <td>Either syntax is fine.</td> </tr> <tr> <td id="button">button</td> <td> <pre class="brush: xml">
&lt;button label="<!--Button Text-->" /&gt;</pre> <pre class="brush: xml">
&lt;button id='butwrap1'&gt;
  &lt;label control='butwrap1'&gt;
    <!--Wrapped Label-->
  &lt;/label&gt;
&lt;/button&gt;</pre> <pre class="brush: xml">
&lt;button id='butwrap2'&gt;
  &lt;label control='butwrap2' value="<!--This-->" /&gt;
  &lt;label control='butwrap2' value="is" /&gt;
  &lt;label control='butwrap2' value="a" /&gt;
  &lt;label control='butwrap2' value="button" /&gt;
&lt;/button&gt;</pre> <pre class="brush: xml">
&lt;button image="images/img.xbm" tooltiptext="<!--Button Text-->"/&gt;</pre> </td> <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 <a href="#groupbox" title="groupbox">groupbox</a></td> </tr> <tr> <td id="checkbox">checkbox</td> <td> <pre class="brush: xml">
&lt;checkbox label='<!--Label Text-->' /&gt;</pre> </td> <td> </td> </tr> <tr> <td id="colorpicker">colorpicker</td> <td> <pre class="brush: xml">
&lt;colorpicker type="button" palettename="standard" /&gt;</pre> </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 <a href="#grid" title="grid">grid</a></td> </tr> <tr> <td id="columns">columns</td> <td> </td> <td>See <a href="#grid" title="grid">grid</a></td> </tr> <tr> <td id="command">command</td> <td> </td> <td>See <a class="external" href="/en/XUL_Tutorial/Keyboard_Shortcuts" title="XUL Keyboard shortcuts">Keyboard Shortcut Tutorial</a></td> </tr> <tr> <td id="commandset">commandset</td> <td> </td> <td>See <a class="external" href="/en/XUL_Tutorial/Keyboard_Shortcuts" title="XUL Keyboard shortcuts">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> <pre class="brush: xml">
&lt;groupbox&gt;
  &lt;caption label="<!--Group label-->" /&gt;
  &lt;hbox&gt;
    &lt;button label="<!--Button Text-->" /&gt;
  &lt;/hbox&gt;
&lt;/groupbox&gt;</pre> </td> <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> <pre class="brush: xml">
&lt;image src="images/img.xbm" tooltiptext='<!--Image Label-->'/&gt;</pre> </td> <td> </td> </tr> <tr> <td id="key">key</td> <td> </td> <td>See <a class="external" href="/en/XUL_Tutorial/Keyboard_Shortcuts" title="XUL Keyboard shortcuts">Keyboard Shortcut Tutorial</a></td> </tr> <tr> <td id="keyset">keyset</td> <td> </td> <td>See <a class="external" href="/en/XUL_Tutorial/Keyboard_Shortcuts" title="XUL Keyboard shortcuts">Keyboard Shortcut Tutorial</a></td> </tr> <tr> <td id="listbox">listbox</td> <td> <pre class="brush: xml">
&lt;label control='listId'&gt;<!--Label Text-->&lt;/label&gt;
&lt;listbox id="listId"&gt;
  &lt;listitem value="val" label="<!--Item Text-->"/&gt;
&lt;/listbox&gt;</pre> <pre class="brush: xml">
&lt;label control='listId2' value='<!--List label-->' /&gt;
&lt;listbox rows="5" id='listId2'&gt;
  &lt;listcols&gt;
    &lt;listcol/&gt;
    &lt;listcol/&gt;
    &lt;listcol/&gt;
  &lt;/listcols&gt;
  &lt;listhead&gt;
    &lt;listheader label="Name" /&gt;
    &lt;listheader label="Sex" /&gt;
    &lt;listheader label="Color" /&gt;
  &lt;/listhead&gt;
  &lt;listitem&gt;
    &lt;label value="<!--Pearl-->" /&gt;
    &lt;label value="<!--Female-->" /&gt;
    &lt;label value="<!--Gray-->" /&gt;
  &lt;/listitem&gt;
&lt;/listbox&gt;</pre> </td> <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 <a href="#listbox" title="listbox">listbox</a></td> </tr> <tr> <td id="menuitem">menuitem</td> <td> </td> <td>See <a href="#menulist" title="menulist">menulist</a> and <a href="#menubar" title="menubar">menubar</a></td> </tr> <tr> <td id="menubar">menubar</td> <td> <pre class="brush: xml">
&lt;menubar hidden="false"&gt;
  &lt;menu label="File" accesskey="F"&gt;
    &lt;menupopup&gt;
      &lt;menuitem label="New" accesskey="N" key="file-new-key"/&gt;
    &lt;/menupopup&gt;
  &lt;/menu&gt;
&lt;/menubar&gt;</pre> </td> <td> </td> </tr> <tr> <td id="menulist">menulist</td> <td> <pre class="brush: xml">
&lt;label value="<!--Label Text-->" control="comboId" /&gt;
&lt;menulist id="comboId"&gt;
  &lt;menupopup&gt;
    &lt;menuitem label="<!--Option1-->" /&gt;
    &lt;menuitem label="<!--Option2-->" selected="true" /&gt;
    &lt;menuitem label="<!--Option3-->" /&gt;
  &lt;/menupopup&gt;
&lt;/menulist&gt;</pre> </td> <td> </td> </tr> <tr> <td id="menupopup">menupopup</td> <td> </td> <td>See <a href="#menulist" title="menulist">menulist</a> and <a href="#menubar" title="menubar">menubar</a></td> </tr> <tr> <td id="popup">popup</td> <td> </td> <td>See <a href="#popupset" title="popupset">popupset</a></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> <pre class="brush: xml">
&lt;progressmeter mode="determined" value="10" /&gt;</pre> </td> <td>As progress advances, JAWS indicates percentage to the user</td> </tr> <tr> <td id="radio">radio</td> <td> </td> <td>See <a href="#radiogroup" title="radiogroup">radiogroup</a></td> </tr> <tr> <td id="radiogroup">radiogroup</td> <td> <pre class="brush: xml">
&lt;label value='<!--Radio Group-->' control='radioId' /&gt;
&lt;radiogroup id='radioId'&gt;
  &lt;radio selected="true" label='<!--Option1-->' /&gt;
  &lt;radio label='<!--Option2-->' /&gt;
&lt;/radiogroup&gt;</pre> </td> <td> </td> </tr> <tr> <td id="row">row</td> <td> </td> <td>See <a href="#grid" title="grid">grid</a></td> </tr> <tr> <td id="rows">rows</td> <td> </td> <td>See <a href="#grid" title="grid">grid</a></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> <pre class="brush: xml">
&lt;statusbar&gt;
  &lt;statusbarpanel label="<!--Status Bar-->" flex="1"/&gt;
&lt;/statusbar&gt;</pre> </td> <td>Read using JAWS with insert+page down</td> </tr> <tr> <td id="statusbarpanel">statusbarpanel</td> <td> </td> <td>See <a href="#statusbar" title="statusbar">statusbar</a></td> </tr> <tr> <td id="tab">tab</td> <td> </td> <td>See <a href="#tabbox" title="tabbox">tabbox</a></td> </tr> <tr> <td id="tabbox">tabbox</td> <td> <pre class="brush: xml">
&lt;tabbox&gt;
  &lt;tabs&gt;
    &lt;tab label="<!--Tab Text-->" /&gt;
  &lt;/tabs&gt;
&lt;tabpanels&gt;
  &lt;tabpanel orient="vertical"&gt;
    ...
  &lt;/tabpanel&gt;
&lt;/tabpanels&gt;</pre> </td> <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 <a href="#tabbox" title="tabbox">tabbox</a></td> </tr> <tr> <td id="tabpanels">tabpanels</td> <td> </td> <td>See <a href="#tabbox" title="tabbox">tabbox</a></td> </tr> <tr> <td id="tabs">tabs</td> <td> </td> <td>See <a href="#tabbox" title="tabbox">tabbox</a></td> </tr> <tr> <td id="textbox">textbox</td> <td> <pre class="brush: xml">
&lt;label control="inputId"&gt;
  <!--First name:-->
&lt;/label&gt;
&lt;textbox id='inputId'&gt;</pre> </td> <td> </td> </tr> <tr> <td id="tree">tree</td> <td> <pre class="brush: xml">
&lt;tree hidecolumnpicker="true" &gt;
  &lt;treecols&gt;
    &lt;treecol label="Cats" primary="true"/&gt;
  &lt;/treecols&gt;
  &lt;treechildren&gt;
    &lt;treeitem container="true" open="true"&gt;
      &lt;treerow&gt;
        &lt;treecell label="<!--Male-->" /&gt;
      &lt;/treerow&gt;
      &lt;treechildren&gt;
        &lt;treeitem&gt;
          &lt;treerow&gt;
            &lt;treecell label="<!--Aramis-->" /&gt;
          &lt;/treerow&gt;
        &lt;/treeitem&gt;
        &lt;treeitem&gt;
          &lt;treerow&gt;
            &lt;treecell label="<!--Fergus-->" /&gt;
          &lt;/treerow&gt;
        &lt;/treeitem&gt;
      &lt;/treechildren&gt;
    &lt;/treeitem&gt;
  &lt;/treechildren&gt;
&lt;/tree&gt;</pre> </td> <td> <ul> <li>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).</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 <a href="#tree" title="tree">tree</a></td> </tr> <tr> <td id="treechildren">treechildren</td> <td> </td> <td>See <a href="#tree" title="tree">tree</a></td> </tr> <tr> <td id="treecol">treecol</td> <td> </td> <td>See <a href="#tree" title="tree">tree</a></td> </tr> <tr> <td id="treecols">treecols</td> <td> </td> <td>See <a href="#tree" title="tree">tree</a></td> </tr> <tr> <td id="treeitem">treeitem</td> <td> </td> <td>See <a href="#tree" title="tree">tree</a></td> </tr> <tr> <td id="treerow">treerow</td> <td> </td> <td>See <a href="#tree" title="tree">tree</a></td> </tr> </tbody>
</table>
<p> </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