AEGIStextEUist logo7e-inclusion

Accessible Mootools Widget Demo

Accessible Mootools Widgets

This is the offical demo website for accessible Mootools widgets developed within the AEGIS Project.

It shows the results we made in the research and development progress of open web application component sets for accessible rich web applications.
The aim of this work package is to increase the accessibility of component sets for building accessible rich internet applications. By doing this the situation for web developers and for end users with disabilities is improved at the same time.

All widget demos provide download information, short instruction, information about changes that were necessary for accessibility and a demo video to show the functionality when using a screenreader.

Planned widgets:

Please find other widgets for jQuery and Fluid Infusion on the corresponding sites:

Slider

The Slider-Plugin allows you to drag&drop a knob inside an element to set a value within a certain range.




This is a test!



How to use the Slider widget

Use the slider's knob to change the font size.

  • Tab: Focuses the Knob
  • Right Arrow / Up Arrow: Increase value by 1
  • Left Arrow / Down Arrow: Decrease value by 1
  • Page Up: Increase value by 10
  • Page Down: Decrease value by 10
  • Home: Set value to minimum
  • End: Set value to maximum

Accessibility Changes made

  • Original Slider
  • Download accessible Slider
  • Added WAI ARIA role "slider" and WAI ARIA properties "aria-valuenow", "aria-valuemax" and "aria-valuemin"
  • Added keyboard navigation support
  • Added high visual contrast indicator.
  • Compatible with TouchDevices

Screen Reader Video

Accordion

The Accordion gives you a fancy way to only show the really needed content.


History

Common ancestor

The first suggestion that all organisms may have had a common ancestor and diverged through random variation and natural selection was made in 1745 by the French mathematician and scientist Pierre-Louis Moreau de Maupertuis (1698-1759) in his work Venus physique. Specifically:

"Could one not say that, in the fortuitous combinations of the productions of nature, as there must be some characterized by a certain relation of fitness which are able to subsist, it is not to be wondered at that this fitness is present in all the species that are currently in existence? Chance, one would say, produced an innumerable multitude of individuals; a small number found themselves constructed in such a manner that the parts of the animal were able to satisfy its needs; in another infinitely greater number, there was neither fitness nor order: all of these latter have perished. Animals lacking a mouth could not live; others lacking reproductive organs could not perpetuate themselves... The species we see today are but the smallest part of what blind destiny has produced..."


Evidence of universal common descent

Common biochemistry and genetic code

All known forms of life are based on the same fundamental biochemical organization: genetic information encoded in DNA, transcribed into RNA, through the effect of protein- and RNA-enzymes, then translated into proteins by (highly similar) ribosomes, with ATP, NADH and others as energy currencies, etc. Furthermore, the genetic code (the "translation table" according to which DNA information is translated into proteins) is nearly identical for all known lifeforms, from bacteria to humans, with minor local differences. The universality of this code is generally regarded by biologists as definitive evidence in favor of the theory of universal common descent. Analysis of the small differences in the genetic code has also provided support for universal common descent.



Examples of common descent

Artificial selection

Artificial selection offers remarkable examples of the amount of diversity that can exist between individuals sharing a late common ancestor. To perform artificial selection, one begins with a particular species (following examples include wolves and wild cabbage) and then, at every generation, only allow certain individuals to reproduce, based on the degree to which they exhibit certain desirable characteristics. In time, it is expected that these characteristics become increasingly well-developed in successive generations. Many examples of artificial selection, like the ones below, occurred without the guidance of modern scientific insight.





How to use the Accordion widget

An accordion component is a collection of expandable panels.

  • Tab: When focus is on an accordion header, pressing the Tab key moves focus in the following manner:
    1. If interactive glyphs or menus are present in the accordion header, focus moves to each in order.
    2. When the corresponding panel is expanded, then focus moves to the first focusable element in the panel.
    3. If the panel is collapsed, OR, when the last interactive element of a panel is reached, the next Tab key press moves focus as follows:
      • If a subsequent accordion panel is already expanded, focus moves to the first focusable element in this subsequent panel.
      • If no subsequent accordion panel is expanded, focus moves to the first focusable element outside the accordion component.
  • Shift+Tab: Generally the reverse of Tab.
  • Left Arrow / Up Arrow: When focus is on the accordion header, a press of up/left arrow keys moves focus to the previous logical accordion header. When focus reaches the first header, further up/left arrow key presses wrap to the last header.
  • Right Arrow / Down Arrow: When focus is on the accordion header, a press of down/right moves focus to the next logical accordion header. When focus reaches the last header, further down/right arrow key presses wrap to the first header
  • Ctrl+Up Arrow: Moves focus from anywhere in the accordion content to its associated accordion header or tab respectively.
  • End: When focus is on the accordion header, an End key press moves focus to the last accordion header.
  • Home: When focus is on the accordion header, a Home key press moves focus to the first accordion header.
  • Enter/Space: When focus is on an accordion header, pressing Enter/Space toggles the expansion of the corresponding panel.

Accessibility Changes made

  • Original Accordion
  • Download accessible Accordion
  • Added WAI ARIA roles "tablist", "tab", "tabpanel" and WAI ARIA properties "aria-labelledby", "aria-expanded", "aria-selected" and "aria-hidden"
  • Added keyboard navigation support
  • Added high visual contrast indicator.

Screen Reader Video

TabPanel

This is a classical tabpanel presenting content on different areas, one at a time.



  • Apple
  • Banana
  • Clementine
  • Orange
The apple is the pomaceous fruit of the apple tree, species Malus domestica in the rose family (Rosaceae), and is a perennial. It is one of the most widely cultivated tree fruits, and the most widely known of the many members of genus Malus that are used by humans.
Banana is the common name for herbaceous plants of the genus Musa and for the fruit they produce. Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red. In popular culture and commerce, "banana" usually refers to soft, sweet "dessert" bananas. By contrast, Musa cultivars with firmer, starchier fruit are called plantains. Many varieties of bananas are perennial. Refer to the Musa article for a list of the varieties of bananas and plantains.
A clementine is a hesperidium (type of berry), of a variety of mandarin orange (Citrus reticulata) so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines separate easily into seven to fourteen moderately-juicy segments. They are very easy to peel, like a tangerine, but are almost always seedless. Clementines are, thus, also known as seedless tangerines. They are typically juicy and sweet, with less acid than oranges.
Oranges originated in Southeast Asia. The fruit of Citrus sinensis is called sweet orange to distinguish it from Citrus aurantium, the bitter orange. The name is thought to ultimately derive from the Sanskrit for the orange tree, with its final form developing after passing through numerous intermediate languages.



How to use the Tabpanel widget

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

  • Left Arrow / Up Arrow: Selects the previous tab
  • Right Arrow / Down Arrow: Selects the next tab
  • Home: Selects the first tab
  • End: Selects the last tab
  • Alt+Del: Deletes the current tab

Accessibility Changes made

  • original TabPanel
  • Download accessible TabPanel
  • Added WAI ARIA roles "tabpanel", "tablist", "tab" and WAI ARIA properties "aria-selected", "aria-labelledby" and "aria-hidden"
  • Added keyboard navigation support
  • Added high visual contrast indicator.

Screen Reader Video

Mootools Drop Menu

This is a simple yet powerful drop menu class. You can create an unlimited nested menu, build by the HTML tags ul and li .






How to use the Drop Menu widget

If a menu bar item has focus and the menu is not open, then:

  • Enter / Space / Up Arrow / Down Arrow: Opens the menu and places focus on the first menu item in the opened menu
  • Left Arrow / Right Arrow: Moves focus to the adjacent menu bar item

When a menu is open and focus is on a menu item in that open menu, then:

  • Enter / Space: Invokes that menu action (which may be to open a submenu)
  • Up Arrow / Down Arrow: Cycles focus through the items in that menu.
  • Left Arrow / Esc: Closes the open menu or submenu and returns focus to the parent menu item
  • Right Arrow / Enter / Space: Opens the submenu and puts focus on the first submenu item

Accessibility Changes Made

  • original DropMenu
  • Download accessible DropMenu
  • Added WAI ARIA roles "menubar", "menu", "menuitem", "presentation" and WAI ARIA property "aria-haspopup" and "aria-activedescendant"
  • Added keyboard navigation support
  • Added high visual contrast indicator.

Screen Reader Video

Dialog

This is a modal confirmation dialog.







How to use the Dialog widget

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.

  • Tab / Shift+Tab: Moves the focus inside the dialog
  • Space / Enter: Activates button
  • Esc: Closes the dialog (Same as activating the Cancel button)

Accessibility Changes made

  • Internal development
  • Download accessible Dialog
  • Added WAI ARIA role "dialog" and "group" and WAI ARIA property "aria-label" and "aria-describedby"
  • Added keyboard navigation support (behavior of modal dialog)
  • Added high visual contrast indicator.

Screen Reader Video

Tooltips

These are tooltips on different elements.



Aegis Logo




How to use the Tooltip widget

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

Accessibility changes made

  • Original Tooltip
  • Download accessible Tooltip
  • Added WAI ARIA role "tooltip" and WAI ARIA property "aria-describedby" and "aria-hidden".
  • Added keyboard navigation support
  • Removed table used to present the dialog frame
  • Added high visual contrast indicator.

Screen Reader Video

Tree

This is a tree view.






How to use the Tree widget

  • Up Arrow / Down Arrow: Moves between visible nodes
  • Left Arrow on an expanded node: Closes the node
  • Left Arrow on a closed or end node: Moves focus to the node's parent
  • Right Arrow: Expands a closed node, moves to the first child of an open node, or does nothing on an end node
  • Enter: Performs the default action on end nodes
  • Typing a letter key moves focus to the next instance of a visible node whose title begins with that letter
  • Home: Moves to the top node in the tree view
  • End: Moves to the last visible node in the tree view
  • Ctrl+Arrow (Left, Right, Up, Down): Same as above but without selecting the item. Previous selections are maintained, provided that the Ctrl key is not released or that some other keyboard function is not performed
  • Ctrl+Space: Toggles the selection of the item
  • Shift+Up Arrow: Extends selection up one node
  • Shift+Down Arrow: Extends selection down one node
  • Shift+Home: Extends selection up to the top-most node
  • Shift+PageDown: Extends selection down to the last node
  • *(asterisk) on keypad: Expands all nodes

Accessibility changes made

  • Original Tree
  • Download accessible Tree
  • Added WAI ARIA role "tree", "treeitem" and "presentation" and WAI ARIA properties "aria-selected" and "aria-expanded"
  • Added full keyboard navigation support.
  • Simplified the drawing up.
  • Added structure lines.
  • Added high visual contrast indicator.

Screen Reader Video

Grid

Accessible Grid





How to use the Grid widget

Navigation Mode (Read-Only) is the default mode, and allows quick and intuitive navigation around the grid.

  • The first Tab into the grid moves focus to the first cell of the first row.
  • The second Tab leaves the grid and moves focus to the next tabbable item on the page.
  • Subsequent Tab: Once focus has been moved inside the grid, subsequent tab presses that re-enter the grid return focus to the cell that last held focus.
  • Left Arrow / Right Arrow: Navigates through the columns. There is no wrap at the end or beginning of columns.
  • Up Arrow / Down Arrow:Navigates through the rows. There is no wrap at the first or last rows.
  • Home: Moves the focus to the first cell of the current row.
  • End: Moves the focus to the last cell in the current row.
  • Page Up: Moves the focus to the first cell in the current column.
  • Page Down: Moves the focus to the last cell in the current column.
  • Selecting Cells
    • Ctrl+Space: Selects the current column.
    • Shift+Space: Selects the current row.
    • Ctrl+A: Selects the entire grid.
    • Shift+Arrow: Selects contiguous cells.
    • Shift+F8: Allows additional cells to be added to a previous selection to accomplish non-contiguous selection.

Actionable Mode (Interactive) allows the interaction with other objects that might be found in the grid cells such as edit fields, links, etc.

  • Enter / F2: Pressed while focus is on an actionable item will enter Actionable Mode. Focus will remain on the actionable item that has focus.
  • Using grid as an example, by default, pressing Esc anywhere inside the grid will mean exiting Actionable mode (by which the user may enter text or perform an action to complete a operation) and a return to Navigation Mode (where the user is allowed to move focus among elements). If a widget is in the current grid cell that also uses the Esc key, then it should cancel the event propagation. A subsequent press of the Esc key will return focus to the parent widget.
  • Tab: Moves to the next actionable (tabbable) item in the grid and stay within the grid wrapping at the bottom. In this mode each tabbable object in each cell of the grid can be reached with the tab key. If multiple tabbable items are located inside a single grid cell, the tab will stop at each one. When the last tabbable item in a cell is reached the next tab will move to the next tabbable item in the grid, wrapping at the last tabbable item in the grid.
  • Shift+Tab: Moves to the previous actionable (tabbable) item in the grid and stays within the grid, wrapping at the top.

Accessibility changes made

  • New widget based on Mootools HtmlTable.
  • Download accessible Grid
  • Added WAI ARIA role "application", "grid", "row", "gridcell" and "columnheader" and WAI ARIA properties "aria-describedby", "aria-sort" and "aria-selected"
  • Added full keyboard navigation support.
  • Added high visual contrast indicator.

Screen Reader Video

Spinbutton

A spin button is a control equipped with two buttons it allows the user to navigate through a range of values.






How to use the Spinbutton widget

  • Right Arrow / Up Arrow: Increases the value
  • Left Arrow / Down Arrow: Decreases the value
  • Home / End: Moves to the maximum or minimum values
  • Page Up / Page Down: Incrementally increases or decreases the value

Accessibility changes

  • Internal development
  • Download accessible Spinbutton
  • Added WAI ARIA role "spinbutton" and "presentation" and WAI ARIA properties "aria-valuemin", "aria-valuemax" and "aria-valuenow"
  • Added full keyboard navigation support.
  • Added high visual contrast indicator.

Screen Reader Video

Autocomplete

A textbox and an associated drop-down list of choices where the choices offered are filtered based on the information typed into the box.



 

 



How to use the Autocomplete widget

  • Up arrow / Down arrow: Navigates through the choices
  • Enter: Confirms entry and closes the list
  • Esc: Closes the list

Accessibility changes

Screen Reader Video

Sortable List (Drag and Drop)

Allows elements to be grabbed, moved and drop at specific regions.







How to use the Sortable List widget

  • Up arrow / Down arrow: Navigates through the items
  • Shift + Up arrow / Shift + Down arrow: Moves the current item up / down

Accessibility changes

Screen Reader Video

Button

Provides a class that makes an input button accessible or tranfers it to a accessible toggle button



Simple Button

Trigger the button by pressing space or enter.



Toggle Button

Toggle the button by pressing space or enter.





How to use the Button widget

  • Space / Enter: Activates or respectively toggles the button

Accessibility changes

  • New widget
  • Download accessible Button
  • Added WAI ARIA role "button"
  • Added WAI ARIA attribute "aria-describedby"
  • Added WAI ARIA attribute "aria-pressed"
  • Added high visual contrast indicator

Screen Reader Video

Checkbox

Provides a class that makes checkboxes accessible




Apple
Banana
Orange
Pineapple
Melon




How to use the Checkbox widget

  • Space / Enter: Toggles the checkbox

Accessibility changes

Screen Reader Video

Radiobutton

Provides a class that makes a group of radiobuttons accessible




Apple
Banana
Orange
Pineapple
Melon




How to use the Radiobutton widget

  • Space / Enter: Toggles the radiobutton
  • Up arrow / Down arrow: Activates previous / next radiobutton

Accessibility changes

Screen Reader Video

For any feedback or questions write to Fraunhofer AEGIS Group