WAI-ARIA 1.1 Attributes Flashcards
aria-activedescendant
Property. Identifies the currently-active element when DOM focus is on a composite
widget, textbox
, group
, or application
, providing an alternative method of managing focus for elements that may contain multiple focusable descendants.
- MUST either refer to an element that is a structural or logical (using aria-owns
) descendant, OR, if used on a textbox
, refer to a structural or logical descendant of an element referenced with aria-controls
.
- Active descendant referenced SHOULD be visible and in view when focused
- Value: ID reference
aria-atomic
Property. Indicates to ATs the scope with which to communicate to the user a change in a live region.
- When a live region changes, UAs SHOULD traverse the tree to find the nearest ancestor with aria-atomic="true"
to establish the scope of change, or communicate only the changed node itself when aria-atomic
is set to false
or not explicitly set on any ancestor.
- false
(default): ATs will present only the changed node(s).
- true
: ATs will present the entire changed region as a whole
aria-autocomplete
Property. Describes the type of interaction model a textbox
, searchbox
, or combobox
employs when dynamically helping users complete text input.
- SHOULD NOT dynamically change its value to communicate the presence of a suggestion
- inline
: Text suggesting one way to complete the input is dynamically inserted (SHOULD be as selected text) after the caret
- list
: An element containing a collection of values that could complete the provided input is displayed. MUST be used together with aria-controls
to refer tot he element containing the suggestions. MUST (itself or a containing combobox
) set aria-haspopup
to the same role as the element containing the suggestions. SHOULD use aria-expanded
to communicate the display of the element containing the suggestions.
- both
: matched requirements and behaviour of both inline
and list
- none
(default): no suggestion on how the input could be completed is displayed
aria-busy
State. Indicates that an element is being modified and ATs MAY want to wait until the modifications are complete before exposing them to the user.
- MAY cover a single change or multiple changes
- MUST be set if changes to a widget
would create a state where it is missing required owned elements
- false
(default): no expected updates
- true
: element is being updated
aria-checked
State. Indicates current “checked” state of checkboxes, raido buttons, and other widget
s
- false
: supports checking but is unchecked
- true
: checked
- mixed
: represents a group of elements that have a mixture of checked and unchecked values (on checkbox
or menuitemcheckbox
)
- undefined (default): does not support being checked.
aria-colcount
Property. Defines the total # of columns in a table
, grid
, or treegrid
; only useful if only a subset of columns is present in the DOM at a given moment.
- Value: integer. MUST be -1
if the total is unknown and should not be calculated by the UA.
aria-colindex
Property. Defines an element’s column index or position with respect to the total # of columns within a table
, grid
, or treegrid
; only useful if only a subset of columns is present in the DOM at a given moment.
- MUST be set to an integer >=1, > the aria-colindex
of preceding elements in the same row, and <= the number of columns in the table.
- MUST be set to the start of the span, for cells spanning multiple columns
- MAY be placed on the row
if the displayed columns are contiguous and no cells span multiple columns.
aria-colspan
Property. Defines the # of columns spanned by a cell within a table
, grid
, or treegrid
, when not contained in a native table.
- MUST be set to an integer >=1 and < the value which would cause the cell to overlap the next cell in the same row.
aria-controls
Property. Identifies the element(s) whose content or presence are controlled nby the current element.
- Value: ID reference list
aria-current
State. Indicates the element that represents the current item within a set of related elements, to correspond with its visual styling indicating the same.
- SHOULD only be applied to one element in the set
- SHOULD NOT be used as a substitute for aria-selected
in widgets where it has the same meaning
- page
: represents the current page within a set
- step
: the current step within a process
- location
: location within an environment or context
- date
: current date within collection (e.g. calendar)
- time
: current time (e.g. within a schedule)
- true
: current item in a set; fallback for any value that does not match above tokens
- false
(default): not the current item; fallback for any empty string or undefined
value
aria-describedby
Property. Identifies the element(s) that describe(s) the object.
- More verbose than aria-labelledby
- Value: ID reference list
aria-details
Property. Identifies the element that provides a detailed, extended description of the object.
- More verbose than aria-describedby
- Referenced element SHOULD be visible to all users.
- Not used in accessible name or description computations, not flattened to a string when presented to AT users
- Takes precedence over aria-describedby
where UAs don’t support multiple references
Value: ID reference
aria-disabled
State. Indicates that the element is perceivable but disabled, thus not editable or operable.
- Might not receive focus in the tab order
- Might prevent navigation to descendants for some elements
- SHOULD also be styled to visually indicate disabled state
- false
(default): element is enabled
- true
: element and all focusable descendants are disabled and value cannot be changed by user
aria-dropeffect
[deprecated in 1.1]
Property. Indicates what functions can be performed when a dragged object is released on the drop target, enabling AT to convey these options before an object is grabbed to drag it.
- Value: token list
- copy
: a duplicate of the source will be dropped
- execute
: a function supported by the drop target is executed, using the drag source as an input
- link
: A reference or shortcut to the dragged object will be created
- move
: source object will be moved from its current location
- none
(default): no operation performed, canceling the drag if the item is dropped (ignored if combined with another token)
- popup
: a popup menu or dialog is shown allowing the user to choose an action
aria-errormessage
Property. Identifies the element that provides an error message for the object.
- MUST use aria-invalid
as well, and set it to true
when the error message is displayed
- Error message element MUST be visible when pertinent
- MAY be referring to a live region
- Value: ID reference
aria-expanded
State. Indicates whether the element is currently expanded or collapsed.
- If the element with this attribute controls another grouping container not “owned by” it, it SHOULD reference that element with aria-controls
- false
: the element is collapsed
- true
: the element is expanded
- undefined
(default): neither expandable or collapsible
aria-flowto
Property. Identifies the next element(s) in an alternate reading order, permitting the user to override the general default of reading in the document source order.
- When multiple references are give, ATs SHOULD present the user the choices (path names come from the name of the target elements)
- Value: ID reference list
aria-grabbed
[deprecated in 1.1]
State. Indicates an element’s “grabbed” state in a drag-and-drop operation.
- SHOULD have a corresponding change to aria-dropeffect
on any drop targets with each change.
- false
: Element supports being dragged, but is not currently selected for dragging
- true
: Element is currently selected for dragging
- undefined
(default): Element does not support being dragged
aria-haspopup
Property. Indicates the availability and type of interactive popup element that can be triggered.
- Container for the popup content MUST be menu
, listbox
, tree
, grid
, or dialog
, and aria-haspopup
value MUST match the role.
- Container SHOULD manage focus within
- Element that triggers the popup SHOULD be focusable and have a keyboard operation to open the popup
- Value: token (true
, false
, menu
, listbox
, tree
, grid
, dialog
)
- true
== menu
- false
(default): Element does not have a popup; fallback for any non-matching or empty value