XUL accessibility guidelines

  • Revision slug: XUL_accessibility_guidelines
  • Revision title: XUL accessibility guidelines
  • Revision id: 99952
  • Created:
  • Creator: Aaronandy
  • Is current revision? No
  • Comment /* Toolbarbuttons */

Revision Content


Introduction

Welcome to the XUL Accessibility Guidelines. By following these principles and practises, you will be able to write you XUL application in such a way that all individuals, including those with physical, sensory, or communicative disabilities, with be able to use and enjoy them. Accessibility is not difficult, but does require a basic understanding of the different types of disabilities, commonly used assistive technologies, and special accesssibility features built into the XUL languages. Most of all, accessibility requires a concious effort on your part, and a desire to include everyone.

It is hoped that these guidelines will be sufficiently clear and detialed that everyone--even someone with no previous background in accessibility--can understand them. However, these is an active community of accessibility developers within the Mozilla Project that will be happy to help you with any converns or questions you have in regards to making your XUL fully accessible.

Learn More
Accessibility Platform Features Mozilla Community
Software Accessibility - Where Are We Today? Intro to accessibility, assistive technologies, and Mozilla resources.

Introduction to Web Accessibility. Overview of web accessibility from WebAIM.

Dive Into Accessibility. Downloadable book on web accessibility with tips and character sketches.

Technology Compatibility. List of popular assistive technologies and their respective compatibility levels with XUL.
Apple Accessibility. Portal to Apple accessibility.

LARS (Linux Accessibility Resource Site). Portal for general Linux accessibility.

Microsoft Accessibility. Portal for Microsoft accessibility.
Accessibility - MDC. Accessibility hub on the Mozilla Developer Center.

mozilla.support.accessibility. Mozilla accessibility newsgroup.

#accessibility. Accessibility channel on mozilla's IRC server.



Guidelines

Keyboard Access

Keyboard access is important to users who can't use a mouse. Many screen reader users and those with physical disabilities rely on the keyboard as their primary input tool. These users require easy, predictable, and well documented keyboard control.

Tab order

Provide a logical tab order and ensure that users can navigate all content using a keyboard. By default, the tab order is determined by the reading order of the underlying code. It can also be set programmatically with the tabindex attribute if needed, but the tabindex should be used sparingly and pages that used the tabindex should be tested thoroughly. The navigation order should be logical in order, generally left to right, top to bottom. Navigation order may vary depending on the nature of the application or the reading direction of the language.

Ensure that tab order is logical and all interactive elements can be accessed simply without the use of a mouse. You should be able to perform all functionality either directly in the application or through menu items or the context menu.

Trees

Provide alternative functionality for inaccessible operations. The column picker and column headers in XUL trees are not keyboard accessible, consistent with the standard tree behavior on most contemporary operating systems. It is therefore necessary to provide a keyboard accessible alternative for accessing this functionality.

Screenshot of the View in the Firefox bookmarks manager.

The Firefox "Bookmarks Manager" provides an example of how to make trees more accessible. The bookmark manager allows users to sort bookmarks by a particular column of information and choose which columns to display. Because column headers and the column picker, in the upper right hand corner of the tree, can not receive focus, they are not operable with a keyboard. In the bookmark manager this functionality is available under the view menu which is accessible to a keyboard user.


Toolbarbuttons

Toolbar buttons cannot receive focus with a keyboard. Functionality associated with a toolbar should be duplicated elsewhere in the application, such as in a menu item or context menu. In cases where duplication of functionality is not possible (such as a window without a menubar), toolbar buttons can be made focusable by adding class="tabbable" or with the special CSS rule -moz-user-focus: normal; this should only in extreme cases, and should be consistent within the window or application (meaning that either all toolbar buttons are tabbable or none of them are, but not an arbitrary mixture of both).

Keyboard shortcuts

Context menus

Mouse dependent scripting

Scrolling

Maintaining focus

Testing keyboard access

Assistive information

Alternative text

Title

Form labels

Testing assistive information

Display

System defaults

Color

Flexible sizing

Testing display

Human computer interaction

Instruction

Alerts

Interactive Elements

Error recovery

Response time

Testing human computer interaction

Media

Audio

Video

Animation

Testing Media

Other issues

Custom widgets

Revision Source

<p>
</p><p><br>
</p>
<h2 name="Introduction">Introduction</h2>
<p>Welcome to the XUL Accessibility Guidelines. By following these principles and practises, you will be able to write you XUL application in such a way that all individuals, including those with physical, sensory, or communicative disabilities, with be able to use and enjoy them. Accessibility is not difficult, but does require a basic understanding of the different types of disabilities, commonly used assistive technologies, and special accesssibility 
features built into the XUL languages. Most of all, accessibility requires a concious effort on your part, and a desire to include everyone.
</p><p>It is hoped that these guidelines will be sufficiently clear and detialed that everyone--even someone with no previous background in accessibility--can understand them. However, these is an active community of accessibility developers within the Mozilla Project that will be happy to help you with any converns or questions you have in regards to making your XUL fully accessible.
</p>
<table class="standard-table">
  <caption>Learn More</caption>
  <tbody><tr>
    <th>Accessibility</th>
    <th>Platform Features</th>
    <th>Mozilla Community</th>
  </tr>
  <tr>
    <td><a class="external" href="http://www.mozilla.org/access/today">Software Accessibility - Where Are We Today?</a> Intro to accessibility, assistive technologies, and Mozilla resources.
<p><a class="external" href="http://webaim.org/intro/">Introduction to Web Accessibility</a>. Overview of web accessibility from WebAIM.
</p><p><a class="external" href="http://diveintoaccessibility.org/">Dive Into Accessibility</a>. Downloadable book on web accessibility with tips and character sketches.
</p>
<a class="external" href="http://kb.mozillazine.org/Assistive_technology_compatibility|Assistive">Technology Compatibility</a>. List of popular assistive technologies and their respective compatibility levels with XUL.</td>

    <td><a class="external" href="http://www.apple.com/accessibility/">Apple Accessibility</a>. Portal to Apple accessibility.
<p><a class="external" href="http://larswiki.atrc.utoronto.ca/wiki">LARS (Linux Accessibility Resource Site)</a>. Portal for general Linux accessibility.
</p>
<a class="external" href="http://www.microsoft.com/enable/">Microsoft Accessibility</a>. Portal for Microsoft accessibility.</td>

    <td><a href="en/Accessibility">Accessibility - MDC</a>. Accessibility hub on the Mozilla Developer Center.
<p><a class="external" href="http://groups.google.com/group/mozilla.support.accessibility">mozilla.support.accessibility</a>. Mozilla accessibility newsgroup.
</p>
<a class="external" href="irc://irc.mozilla.org/#accessibility">#accessibility</a>. Accessibility channel on mozilla's IRC server.</td>
  </tr>
</tbody></table>
<p><br>
</p><p><br>
</p>
<h2 name="Guidelines">Guidelines</h2>
<h3 name="Keyboard_Access">Keyboard Access</h3>
<p>Keyboard access is important to users who can't use a mouse. Many screen reader users and those with physical disabilities rely on the keyboard as their primary input tool. These users require easy, predictable, and well documented keyboard control.
</p>
<h4 name="Tab_order">Tab order</h4>
<p><b>Provide a logical tab order</b> and ensure that users can navigate all content using a keyboard. By default, the tab order is determined by the reading order of the underlying code. It can also be set programmatically with the tabindex attribute if needed, but the tabindex should be used sparingly and pages that used the tabindex should be tested thoroughly. The navigation order should be logical in order, generally left to right, top to bottom. Navigation order may vary depending on the nature of the application or the reading direction of the language.
</p><p>Ensure that tab order is logical and all interactive elements can be accessed simply without the use of a mouse. You should be able to perform all functionality either directly in the application or through menu items or the context menu.
</p>
<h4 name="Trees">Trees</h4>
<p><b>Provide alternative functionality for inaccessible operations</b>. The column picker and column headers in XUL trees are not keyboard accessible, consistent with the standard tree behavior on most contemporary operating systems. It is therefore necessary to provide a keyboard accessible alternative for accessing this functionality.
</p>
<div class="float-right"><img alt="Screenshot of the View in the Firefox bookmarks manager." src="File:en/Media_Gallery/XUL_a11y_treesort.png"></div>
<p>The Firefox "Bookmarks Manager" provides an example of how to make trees more accessible. The bookmark manager allows users to sort bookmarks by a particular column of information and choose which columns to display. Because column headers and the column picker, in the upper right hand corner of the tree, can not receive focus, they are not operable with a keyboard. In the bookmark manager this functionality is available under the view menu which is accessible to a keyboard user.
</p><p><br>
</p>
<h4 name="Toolbarbuttons">Toolbarbuttons</h4>
<p>Toolbar buttons cannot receive focus with a keyboard. <b>Functionality associated with a toolbar should be duplicated elsewhere in the application</b>, such as in a menu item or context menu. In cases where duplication of functionality is not possible (such as a window without a menubar), toolbar buttons can be made focusable by adding <i>class="tabbable"</i> or with the special CSS rule <i>-moz-user-focus: normal</i>; this should only in extreme cases, and should be consistent within the window or application (meaning that either all toolbar buttons are tabbable or none of them are, but not an arbitrary mixture of both).
</p>
<h4 name="Keyboard_shortcuts">Keyboard shortcuts</h4>
<h4 name="Context_menus">Context menus</h4>
<h4 name="Mouse_dependent_scripting">Mouse dependent scripting</h4>
<h4 name="Scrolling">Scrolling</h4>
<h4 name="Maintaining_focus">Maintaining focus</h4>
<h4 name="Testing_keyboard_access">Testing keyboard access</h4>
<h3 name="Assistive_information">Assistive information</h3>
<h4 name="Alternative_text">Alternative text</h4>
<h4 name="Title">Title</h4>
<h4 name="Form_labels">Form labels</h4>
<h4 name="Testing_assistive_information">Testing assistive information</h4>
<h3 name="Display">Display</h3>
<h4 name="System_defaults">System defaults</h4>
<h4 name="Color">Color</h4>
<h4 name="Flexible_sizing">Flexible sizing</h4>
<h4 name="Testing_display">Testing display</h4>
<h3 name="Human_computer_interaction">Human computer interaction</h3>
<h4 name="Instruction">Instruction</h4>
<h4 name="Alerts">Alerts</h4>
<h4 name="Interactive_Elements">Interactive Elements</h4>
<h4 name="Error_recovery">Error recovery</h4>
<h4 name="Response_time">Response time</h4>
<h4 name="Testing_human_computer_interaction">Testing human computer interaction</h4>
<h3 name="Media">Media</h3>
<h4 name="Audio">Audio</h4>
<h4 name="Video">Video</h4>
<h4 name="Animation">Animation</h4>
<h4 name="Testing_Media">Testing Media</h4>
<h4 name="Other_issues">Other issues</h4>
<h4 name="Custom_widgets">Custom widgets</h4>
Revert to this revision