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 Slider Widget

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

Demo: Example sliders for choosing a price

Choose the price slider

Choose the min and max price double slider

Price range:

About the Progress Bar Widget

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

Demo: Example Progress Bar Simulating a Download Process



About the Button Widget

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

Demo: Sample Buttons of a Media Player

About the Dialog Widget

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

Demo: Sample Dialog Containing a Sample Form

Trigger Dialog

Please share something personal about yourself

Additional Information

These fields are optional



About the Checkbox Widget

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

Demo: Sample Checkboxes for Choosing Animals

Choose your favorite Animals

About the Accordion Widget

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.

Demo: Sample Accordion Widgets Containing Animal Information

Dogs

The dog (Canis lupus familiaris, 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, as opposed to the word "bitch" for the female of the species.

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. 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.

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. 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. It is common for most breeds to shed this coat.

More information about Dogs on Wikipedia

Cats

The cat (Felis catus), also known as the domestic cat or housecat 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, and are currently the most popular pet in the world. 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. 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." 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. The earliest direct evidence of cat domestication is a kitten that was buried with its owner 9,500 years ago in Cyprus.

More information about Cats on Wikipedia

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.

More information about Sheep on Wikipedia

Fish

A fish is any member of a paraphyletic group of organisms that consist of all gill-bearing aquatic craniate animals that lack limbs with digits. Included in this definition are the living hagfish, lampreys, and cartilaginous and bony fish, as well as various extinct related groups. Most fish are ectothermic ("cold-blooded"), allowing their body temperatures to vary as ambient temperatures change, though some of the large active swimmers like white shark and tuna can hold a higher core temperature. Fish are abundant in most bodies of water. They can be found in nearly all aquatic environments, from high mountain streams (e.g., char and gudgeon) to the abyssal and even hadal depths of the deepest oceans (e.g., gulpers and anglerfish). At 32,000 species, fish exhibit greater species diversity than any other group of vertebrates.

Fish are an important resource worldwide, especially as food. Commercial and subsistence fishers hunt fish in wild fisheries (see fishing) or farm them in ponds or in cages in the ocean (see aquaculture). They are also caught by recreational fishers, kept as pets, raised by fishkeepers, and exhibited in public aquaria. Fish have had a role in culture through the ages, serving as deities, religious symbols, and as the subjects of art, books and movies.

Because the term "fish" is defined negatively, and excludes the tetrapods (i.e., the amphibians, reptiles, birds and mammals) which descend from within the same ancestry, it is paraphyletic, and is not considered a proper grouping in systematic biology. The traditional term pisces (also ichthyes) is considered a typological, but not a phylogenetic classification.

The earliest organisms that can be classified as fish were soft-bodied chordates that first appeared during the Cambrian period. Although they lacked a true spine, they possessed notochords which allowed them to be more agile than their invertebrate counterparts. Fish would continue to evolve through the Paleozoic era, diversifying into a wide variety of forms. Many fish of the Paleozoic developed external armor that protected them from predators. The first fish with jaws appeared in the Silurian period, after which many (such as sharks) became formidable marine predators rather than just the prey of arthropods.

More information about Fish on Wikipedia

Lizards

Lizards are a widespread group of squamate reptiles, with more than 5600 species , ranging across all continents except Antarctica as well as most oceanic island chains. The group, traditionally recognized as the suborder Lacertilia, is defined as all extant members of the Lepidosauria (reptiles with overlapping scales), which are neither sphenodonts (i.e., tuatara) nor snakes – they form an evolutionary grade. While the snakes are recognized as falling phylogenetically within the Toxicofera clade from which they evolved, the Sphenodonts are the sister group to the Squamates, the larger monophyletic group, which includes both the lizards and the snakes.

Lizards typically have feet and external ears, while snakes lack both of these characteristics. However, because they are defined negatively as excluding snakes, lizards have no unique distinguishing characteristic as a group. Lizards and snakes share a movable quadrate bone, distinguishing them from the sphenodonts, which have a more primitive and solid diapsid skull. Many lizards can detach their tails to escape from predators, an act called autotomy, but this ability is not shared by all lizards. Vision, including color vision, is particularly well developed in most lizards, and most communicate with body language or bright colors on their bodies as well as with pheromones.

The adult length of species within the suborder ranges from a few cm for chameleons like Brookesia micra and geckos like Sphaerodactylus ariasae to nearly 3 m (9.8 ft) in the case of the largest living varanid lizard, the Komodo Dragon. Some extinct varanids reached great size. The extinct aquatic mosasaurs reached 17 m (56 ft), and the giant monitor Megalania prisca is estimated to have reached perhaps 7 m (23 ft).

More information about Lizards on Wikipedia

About the Tree Widget

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

Demo: Tree View Containing Sample Documents

My Documents

About the Tabs Widget

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

Demo: Sample Tab List Containing Information about Animals

Dogs

The dog (Canis lupus familiaris, 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, as opposed to the word "bitch" for the female of the species.

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. 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.

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. 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. It is common for most breeds to shed this coat.

More information about Dogs on Wikipedia

Cats

The cat (Felis catus), also known as the domestic cat or housecat 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, and are currently the most popular pet in the world. 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. 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." 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. The earliest direct evidence of cat domestication is a kitten that was buried with its owner 9,500 years ago in Cyprus.

More information about Cats on Wikipedia

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.

More information about Sheep on Wikipedia

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.

About the Autocomplete Widget

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.

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

Demo: Sample Auto Complete Field Listing Countries

About the Date Picker Widget

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

Demo: Sample Datepickers

Popup Version:

Inline Version:

Source

Last updated:

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