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 Menu Bar Widget

How to use the Menubar widget:

The menubar takes up one stop in the tab order, can can be navigated with the following keyboard shortcuts:

  • Left Arrow: Collapse currently focused expanded submenu, or move focus to the to left adjacent submenu in the menubar
  • Right Arrow: Expand currently focused collapsed menu item, or move focus to the right adjacent submenu in the menubar
  • Up Arrow: move focus up in the currently expanded submenu, or wrap focus to its last item
  • Down Arrow: move focus down in the currently expanded submenu, or wrap focus to its first item
  • Escape: Collapse the currently focused submenu without activating a menu item
  • Enter: Activate the currently focused menu item, or expand it if it has a submenu
  • Any letter key: Perform a first letter search the the currently expanded submenu

Accessibility Changes Made to the Menubar (no original version):

  • Added ARIA markup so role, name & state information is exposed
  • Added keyboard navigation support
  • Added high contrast mode support