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:
Datepicker
Window splitter
Wizard
Please find other widgets for jQuery and Fluid Infusion on the corresponding sites:
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
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:
If interactive glyphs or menus are present in the accordion header, focus moves to each in order.
When the corresponding panel is expanded, then focus moves to the first focusable element in the panel.
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.
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.
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:
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.
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)
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.
Tree
This is a tree view.
Tree Structure
Bark
Periderm
Cork
Cork Cambium
Living Phloem
Sapwood
Vascular Cambium
Radial Section
Heartwood
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
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.
Grid
Accessible Grid
Bodydata
Name
Firstname
Sex
Height (cm)
Weight (kg)
Porter
Oliver
male
172
87
Cooper
Jack
male
145
56
Brown
Ruby
female
189
110
Bush
Alfie
male
175
75
Fletcher
Jessica
female
112
45
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.
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.
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
