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="<!--Text-->" /> <description><!--Label Text--></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 Text-->" /> <label control="controlID"><!--Label Text--></label> | Either syntax is fine. |
| button | <button label="<!--Button Text-->" /> <button id='butwrap1'>
<label control='butwrap1'>
<!--Wrapped Label-->
</label>
</button> <button id='butwrap2'> <label control='butwrap2' value="<!--This-->" /> <label control='butwrap2' value="is" /> <label control='butwrap2' value="a" /> <label control='butwrap2' value="button" /> </button> <button image="images/img.xbm" tooltiptext="<!--Button Text-->"/> | 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='<!--Label Text-->' /> | |
| 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="<!--Group label-->" />
<hbox>
<button label="<!--Button Text-->" />
</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='<!--Image Label-->'/> | |
| key | See Keyboard Shortcut Tutorial | |
| keyset | See Keyboard Shortcut Tutorial | |
| listbox | <label control='listId'><!--Label Text--></label> <listbox id="listId"> <listitem value="val" label="<!--Item Text-->"/> </listbox> <label control='listId2' value='<!--List label-->' />
<listbox rows="5" id='listId2'>
<listcols>
<listcol/>
<listcol/>
<listcol/>
</listcols>
<listhead>
<listheader label="Name" />
<listheader label="Sex" />
<listheader label="Color" />
</listhead>
<listitem>
<label value="<!--Pearl-->" />
<label value="<!--Female-->" />
<label value="<!--Gray-->" />
</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 | |
| menuitem | See menulist and 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="<!--Label Text-->" control="comboId" />
<menulist id="comboId">
<menupopup>
<menuitem label="<!--Option1-->" />
<menuitem label="<!--Option2-->" selected="true" />
<menuitem label="<!--Option3-->" />
</menupopup>
</menulist> | |
| menupopup | See menulist and 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='<!--Radio Group-->' control='radioId' /> <radiogroup id='radioId'> <radio selected="true" label='<!--Option1-->' /> <radio label='<!--Option2-->' /> </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="<!--Status Bar-->" flex="1"/> </statusbar> | Read using JAWS with insert+page down |
| statusbarpanel | See statusbar | |
| tab | See tabbox | |
| tabbox | <tabbox>
<tabs>
<tab label="<!--Tab Text-->" />
</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"> <!--First name:--> </label> <textbox id='inputId'> | |
| tree | <tree hidecolumnpicker="true" >
<treecols>
<treecol label="Cats" primary="true"/>
</treecols>
<treechildren>
<treeitem container="true" open="true">
<treerow>
<treecell label="<!--Male-->" />
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="<!--Aramis-->" />
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="<!--Fergus-->" />
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree> |
|
| 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: