Accessible jQuery-ui Components Demonstration

Instructions for Screen Reader Users:

This page contains some interactive controls that you would normally only find in desktop applications. Examples of such controls are tab lists, menu bars, sliders, and tree views. These controls are often operated using the arrow keys, which means your screen reader must temporarily switch off virtual navigation mode in order to interact with them. Some screen readers will automatically switch between modes depending on the control's type, while others require you to manually turn virtual mode off. The list below shows how to switch between modes on some popular screen readers:

JAWS
JAWS KEY + Z, use twice to make switch permanent
NVDA
NVDA KEY + SPACE
WindowEyes
Ctrl + Shift + A

Widgets Tabs

About the Tooltips Widget

How to use the Tooltip widget:

A tooltip appears when focusing the trigger element by keyboard or hovering over it with the mouse. For focusable elements, the tooltip can be hidden by pressing the Esc key

The tooltips are made available to screen readers using the aria-describedby property. To be announced properly, it must be used with an ARIA compliant browser and a screen reader that runs in (auto) forms mode or application mode.

Accessibility Changes Made to the Original Tooltip:

  • Added keyboard support for tooltips on static content

Demo: Sample Tooltips

Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

Tooltip's are also useful for form elements, to show some additional information in the context of each field.

Click the field to see the tooltip; when you tab out of the field, it gets hidden.

My Favorite Flower
The man who doesn't relax and hoot a few hoots voluntarily, now and then, is in great danger of hooting hoots and standing on his head for the edification of the pathologist and trained nurse, a little later on.

Source

Last updated: 9 October 2013

Download the latest version of this demo as a zip file

For questions or feedback regarding this demo, please contact Hans Hillen

Acknowledgements

Accessibility work on these widgets was implemented by The Paciello Group (TPG) and funded by AOL and AEGIS.

  • Aegis
  • AOL