Accessible jQuery-ui Components Demonstration

Widgets Tabs

Slider

Single Slider

Range Slider

Price range:

How to use the Slider widget:

Each slider thumb takes up one stop in the tab order. The slider thumb's value can be changed using the following shortcuts:

  • Left Arrow: Descrease value by 1
  • Left Arrow: Inscrease value by 1
  • Page Down: Descrease value by larger increment
  • Page Up: Inscrease value by larger increment
  • Home: Set value to minimum
  • End: Set value to maximum
  • Tab: move focus between multiple thumbs

To be announced properly, the slider must be used with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode,

Accessibility Changes Made to the Original Slider:

  • Added ARIA markup so role, name & state information is exposed
  • Added keyboard support
  • Support for Double Slider labeling

Progressbar



How to use the Progress Bar widget:

Activate the button labeled "Trigger Progressbar". A progressbar will appear and automatically increase it's value up to a 100%. This takes about 12 seconds. While the progressbar is being shown, keyboard interaction is prohibited.

The Progressbar widget does not require any keyboard shortcuts.

To be announced properly, the an ARIA compliant screen reader must be used that will correctly announce progressbar updates.

Accessibility Changes Made to the Original Progressbar:

  • Added support for high contrast mode
  • Added ARIA markup for role & state information

Buttons

Repeat options

How to use the Button widget:

Each button is a separate stop in the tab order, except for button groups which take up only one stop.

Buttons are activated or toggled using the Space key. Button groups behave similar to radio button groups: The selcted button is changed by using the arrow keys.

For screen reader users, Toggle Buttons and Button Groups are announced as traditional checkboxes and radio button groups.

Accessibility Changes Made to the original Button / Buttongroup

  • Applied fixes for visual focus indications
  • Added support for high contrast mode

Dialog

Trigger Dialog

Please share something personal about yourself

Additional Information

These fields are optional

How to use the Dialog widget:

The demo dialog is activated by clicking on the "Trigger Dialog" button.

While the dialog contains focus, the tab order will wrap inside the dialog. If the dialog is modal, it is not possible to move focus to the main page until the dialog is closed.

If the dialog is movable or resizable, the dialog user interface will include buttons that allow these actions to be performed by keyboard. To do this. move focus to the button, and use the arrow keys to move or resize the dialog.

To close the dialog, press Escape.

Accessibility Changes Made to the Original Dialog:

  • Added support for high contrast mode
  • Added keyboard support for move and resize actions

Checkbox

How to use the Checkbox widget:

The checkbox can be checked or unchecked by pressing the Space key.

Accessibility Changes Made to the Original Checkbox:

  • Applied fixes for visual indication of focus

Accordion

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

  • List item one
  • List item two
  • List item three

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

How to use the Accordion widget:

The accordion takes up one tab stop in the tab order. It can be navigated with the following shortcuts:

  • Up or Left Arrow: Move focus to the previous accordion header
  • Down or Right Arrow: Move focus to the next accordion header
  • Space and Enter key: Expand the currently focused accordion header

The accordion is marked up as an ARIA tablist. To be announced properly by screen readers, the accordion must be used with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode.

Accessibility Changes Made to the Original Accordeon:

No changes were made.

Tree

How to use the Tree widget:

The tree takes up one tab stop in the tab order. It can be navigated with the following shortcuts:

  • Up Arrow: Move focus the the previous tree item
  • Down Arrow: Move focus the the next tree item
  • Right Arrow: Expand current branch or move focus into its first tree item
  • Left Arrow: Move focus to parent branch or collapse current branch

The tree is marked up as an ARIA tree widget. To be announced properly by screen readers, the accordion must be used with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode.

Accessibility Changes Made to the Original Tree:

  • Added ARIA tree markup so role, name & state information is exposed
  • Added high contrast support
  • Added fixes related to programmatic focus

Tabs

Dogs

The dog (Canis lupus familiaris,[1] is a domesticated form of the wolf, a member of the Canidae family of the order Carnivora. The term is used for both feral and pet varieties. The domestic dog has been one of the most widely kept working and companion animals in human history. The word "dog" may also mean the male of a canine species,[2] as opposed to the word "bitch" for the female of the species.[3]

The dog quickly became ubiquitous across culture across the world, and was extremely valuable to early human settlements. For instance, it is believed that the successful emigration across the Bering Strait might not have been possible without sled dogs.[4] Dogs perform many roles for people, such as hunting, herding, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This versatility, more than almost any other known animal, has given them the nickname "Man's best friend" in the western world. Currently, there are estimated to be 400 million dogs in the world.[5]

Over the 15,000 year span that the dog had been domesticated, it diverged into only a handful of landraces, groups of similar animals whose morphology and behavior have been shaped by environmental factors and functional roles. As the modern understanding of genetics developed, humans began to intentionally breed dogs for a wide range of specific traits. Through this process, the dog has developed into hundreds of varied breeds, and shows more behavioral and morphological variation than any other land mammal.[6] For example, height measured to the withers ranges from a few inches in the Chihuahua to a few feet in the Irish Wolfhound; color varies from white through grays (usually called "blue'") to black, and browns from light (tan) to dark ("red" or "chocolate") in a wide variation of patterns; coats can be short or long, coarse-haired to wool-like, straight, curly, or smooth.[7] It is common for most breeds to shed this coat.

Cats

The cat (Felis catus), also known as the domestic cat or housecat[5] to distinguish it from other felines and felids, is a small domesticated carnivorous mammal that is valued by humans for its companionship and its ability to hunt vermin and household pests. Cats have been associated with humans for at least 9,500 years,[6] and are currently the most popular pet in the world.[7] Due to their close association with humans, cats are now found almost everywhere on Earth. This extreme adaptability and their worrying impacts on native animals has led to them being classed as an invasive species. Most of these problems are caused by the large number of feral cats worldwide, with a population of up to 60 million of these animals in the United States alone.

Cats are similar in size and anatomy to the other Felids, with light, flexible bodies and teeth adapted to killing small prey. A skilled predator, the cat hunts over 1,000 species for food, using its excellent eyesight and hearing. Unusually, cats have lost the ability to taste sugar and in some breeds show hereditary deafness. Despite being solitary hunters, cats are a social species and use a variety of vocalizations, pheromones and types of body language for communication. These include meowing, purring, trilling, hissing, growling, and grunting.[8] They are also bred and shown as registered pedigree pets. This hobby is known as cat fancy.

As The New York Times wrote in 2007, "Until recently the cat was commonly believed to have been domesticated in ancient Egypt, where it was a cult animal."[9] A study that year found that the lines of descent of all house cats probably run through as few as five self-domesticating African Wildcats (Felis silvestris lybica) circa 8000 BC, in the Near East.[4] The earliest direct evidence of cat domestication is a kitten that was buried with its owner 9,500 years ago in Cyprus.[10]

Sheep

Domestic sheep are quadrupedal, ruminant mammals typically kept as livestock. Like all ruminants, sheep are members of the order Artiodactyla, the even-toed ungulates. Although the name "sheep" applies to many species, in everyday usage it almost always refers to Ovis aries. Numbering a little over 1 billion, domestic sheep are the most numerous species in their genus.

Sheep are most likely descended from the wild mouflon of Europe and Asia. One of the earliest animals to be domesticated for agricultural purposes, sheep are raised for fleece, meat (lamb, hogget or mutton) and milk. A sheep's wool is the most widely used of any animal, and is usually harvested by shearing. Ovine meat is called lamb when from younger animals and mutton when from older ones. Sheep continue to be important for wool and meat today, and are also occasionally raised for pelts, as dairy animals, or as model organisms for science.

How to use the Tabs widget:

The tablist takes up one tab stop in the tab order. It can be navigated with the following shortcuts:

  • Left or Up Arrow: Select the previous tab
  • Right or Down Arrow: Select the next tab
  • Home: Select the first tab
  • End: Select the last tab
  • Alt + Page Down (from anywhere inside the tab panel: Select the previous tab and move focus to the tablist
  • Alt + Page Up (from anywhere inside the tab panel: Select the next tab and move focus to the tablist

The tabs widget is marked up as an ARIA tablist widget. To be announced properly by screen readers, 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 Tabs

  • Added ARIA Tablist markup so role, name & state information is exposed
  • Added keyboard navigation for switching tabs using arrow keys

Tooltip

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.

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

Auto Complete

Autocomplete with Multiple Values

How to use the Autocomplete:

Typing into the text field will generate a dropdown list with auto-complete suggestions. The suggestions can be navigated using the arrow keys and selected using the Enter key.

The dropdown list is marked up as an ARIA menu, and autocomplete feedback is provided through an ARIA live region. 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 Autocomplete:

  • Added Screen reader support for autocomplete fields using multiple values
  • Added notification about number of results found

Datepicker

Popup Version:

Inline Version:

How to use the Datepicker widget:

The datepicker can be implemented as an inline datepicker or as a popup datepicker.

Inline datepickers have a separate tab stop for each control, and a single tab stop for the date grid itself. The grid can be navigated using the following shortcuts:

  • Arrow Keys: Move up, down, left or right in the grid. If the beginning or end of the month is reached, the grid will automatically change to the next or previous motnh
  • Enter Key: Select the currently focused day
  • Home: Move focus to first day of the month
  • End: Move focus to last day of the month
  • Page Up: Switch to previous month
  • Page Down: Switch to next month
  • Alt + Page Up: Switch to previous year
  • Alt + Page Down: Switch to next year

Popup date pickers have the same shortcuts as inline datepickers, plus the following shotcuts:

  • Down or Up Arrow key (when text field has focus): Move focus into the expanded date grid
  • Escape key (when text field has focus): Collapse the expanded date grid
  • Enter (when date grid has focus): Select currently focused date, collapse the date grid and move focus back to the text field
  • Escape (when date grid has focus): Collapse the date grid without making a selection and move focus back to the text field

Accessibility Changes Made to the Datepicker:

  • ARIA Implementation
  • Keyboard & Focus Handling

Source

Last updated:

Download the latest version of this demo as a zip file

Acknowledgements

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

  • Aegis
  • AOL