Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 99939 of Building accessible custom components in XUL

  • Revision slug: Building_accessible_custom_components_in_XUL
  • Revision title: Building accessible custom components in XUL
  • Revision id: 99939
  • Created:
  • Creator: MarkPilgrim
  • Is current revision? No
  • Comment Building Accessible Custom Components In XUL moved to Building accessible custom components in XUL

Revision Content

DHTML Accessibility is a new technology which enables developers to construct accessible controls within (X)HTML pages. Developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications. Assistive technologies could only see the generic HTML markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview).

By implementing DHTML Accessibility techniques, web developers can declare that generic HTML elements are really acting as specific GUI controls (such as a treeitem within a treeview). Firefox 1.5 is the first browser to support DHTML Accessibility; it maps the declarations within the HTML page to the underlying accessibility architecture so that assistive technologies can "read" a web page and know how to present these complex controls to the end user.

This has all been well-documented for some time. However, it is less well-known that the same DHTML Accessibility techniques can be applied to XUL, Mozilla's XML markup language for building user interfaces. (The Firefox interface itself is built in XUL, as well as the graphical interface presented by Firefox extensions.)

XUL itself has a much richer set of built-in controls than HTML. There is generally no need to build your own XUL tab bar or treeview. Firefox ships with a XUL tabbox element and a XUL:tree element, and these elements are fully accessible out-of-the-box. However, if you are building custom controls in XUL, you may need to use DHTML Accessibility techniques to ensure that your custom controls are equally accessible.

Revision Source

<p><a href="en/Accessible_DHTML">DHTML Accessibility</a> is a new technology which enables developers to construct accessible controls within (X)HTML pages.  Developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications.  Assistive technologies could only see the generic HTML markup used to build the control; they had no way of knowing that a particular collection of <code>div</code> and <code>span</code> elements should be treated as a single cohesive control (such as a tab bar or a treeview).
</p><p>By implementing DHTML Accessibility techniques, web developers can declare that generic HTML elements are really acting as specific GUI controls (such as a treeitem within a treeview).  Firefox 1.5 is the first browser to support DHTML Accessibility; it maps the declarations within the HTML page to the underlying accessibility architecture so that assistive technologies can "read" a web page and know how to present these complex controls to the end user.
</p><p>This has all been well-documented for some time.  However, it is less well-known that the same DHTML Accessibility techniques can be applied to XUL, Mozilla's XML markup language for building user interfaces.  (The Firefox interface itself is built in XUL, as well as the graphical interface presented by Firefox extensions.)
</p><p>XUL itself has a much richer set of built-in controls than HTML.  There is generally no need to build your own XUL tab bar or treeview.  Firefox ships with a <a href="en/Tabbox">XUL tabbox</a> element and a <a href="en/XUL/tree">XUL:tree</a> element, and these elements are fully accessible out-of-the-box.  However, if you are building custom controls in XUL, you may need to use DHTML Accessibility techniques to ensure that your custom controls are equally accessible.
</p>
Revert to this revision