Aria Autopilot, Declarative accessibility
Aria Autopilot binds interactive behavior based on declarative rules.
It exposes a set of instructions often used when building interactive widgets.
Aria Autopilot is currently a work in progress
We can bind ARIA attributes using data-aria-autopilot attribute, Aria Autopilot will then automatically apply the attributes when loaded. Aria Autopilot uses MutationObserver to automatically expand attributes defined on dynamically inserted DOM elements.
Time to learn ES6?
Aria Autopilot is written in ES6.
If you want to learn how to write modern ES6 JavaScript as well, I highly recommend ES6 for Everyone by Wes Bos.
Installation
It's best if Aria Autopilot runs as quickly as possible after loading the DOM. If you put the script reference in the <head> and add a defer attribute to it the browser will load the script in parralel with your HTML and will automatically execute it once the DOM is ready.
Aria Autopilot Configuration
Instruction format
An @event happens, a relation is found, a sequence of actions is run.
@event: relation -> action
@event: relation -> action, action
@event: relation(parameter, paremeter, ...) -> action; relation -> action, action
Available events
| Event | Description |
|---|---|
activate |
Triggered on click or return key pressed |
expand |
Triggered when the aria-expanded attribute is switched to "true" |
collapse |
Triggered when the aria-expanded attribute is switched to "false" |
press |
Triggered when the aria-pressed attribute is switched to "true" |
release |
Triggered when the aria-pressed attribute is switched to "false" |
select |
Triggered when the aria-selected attribute is switched to "true" |
deselect |
Triggered when the aria-selected attribute is switched to "false" |
target |
Triggered when the element is the target of the location hash |
key_up |
Triggered on key up pressed |
key_down |
Triggered on key down pressed |
key_left |
Triggered on key left pressed |
key_right |
Triggered on key right pressed |
key_escape |
Triggered on escape key pressed |
key_enter |
Triggered on enter key pressed |
key_space |
Triggered on spacebar pressed |
key_tab |
Triggered on tab key pressed |
key_backspace |
Triggered on backspace pressed |
key_code |
Triggered on key press with given code |
Available relations
| Relation | Description |
|---|---|
origin(childSelector) |
the first element referencing this element |
target(childSelector) |
the element targetted by this element via href, aria-controls or if both are missing the next sibling |
context(childSelector) |
the current element |
siblings(childSelector, parentSelector) |
the siblings of this element |
next-sibling(childSelector, parentSelector) |
the next sibling of this element |
previous-sibling(childSelector, parentSelector) |
the previous sibling of this element |
last-sibling(childSelector, parentSelector) |
the last sibling of this element |
first-sibling(childSelector, parentSelector) |
the first sibling of this element |
Available actions
| Action | Description |
|---|---|
select |
Sets the aria-selected attribute to "true" and fires the select event |
deselect |
Sets the aria-selected attribute to "false" and fires the deselect event |
press |
Sets the aria-pressed attribute to "true" and fires the press event |
release |
Sets the aria-pressed attribute to "false" and fires the release event |
expand |
Sets the aria-expanded attribute to "true" and fires the expand event |
collapse |
Sets the aria-expanded attribute to "false" and fires the collapse event |
toggle |
Toggles the aria state on the element and fires the related event |
activate |
Sets the aria state on the element to "true" and fires the related event |
deactivate |
Sets the aria state on the element to "false" and fires the related event |
focus |
Moves focus to the selected element |
show |
Sets the hidden attribute to "false" on the element |
hide |
Sets the hidden attribute to "true" on the element |
show-target |
show the target element (the element reference by href, aria-controls or the next sibling) |
hide-target |
hide the target element (the element reference by href, aria-controls or the next sibling) |
set-focusable |
Sets the tabindex of the element to "0" allowing user focus |
set-script-focusable |
Sets the tabindex of the element to "-1" allowing script focus |
update-location |
Update window location hash with element id |
Versioning
Versioning follows Semver.
License
MIT