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 widgets
- 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
aria-hidden
State. Indicates whether the element is exposed to the accessibility API.
- false: exposed to accessibility API as if it was rendered; known to work inconsistently in browsers
- true: hidden from accessibility API
- undefined (default): hidden state determined by UA based on whether it is rendered
aria-invalid
State. Indicates the input value does not conform to the expected format.
- SHOULD be true if invalid or out-of-range
- UAs SHOULD inform users of the error and authors SHOULD provide suggestions for corrections
- SHOULD NOT be set on required inputs or widgets before a user has entered data.
- grammar: a grammatical error was detected
- spelling: a spelling error was detected
- false (default): no errors detected; fallback for empty value
- true: the provided value has failed validation; fallback for any non-recognized, non-empty value
aria-keyshortcuts
Property. Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
- Value: string (space-delimited list of keyboard shortcuts)
- MUST be written with modifier keys first in any shortcut
- Authors MUST handle scripted events that respond to keyboard shortcuts and SHOULD provide a way for users to discover them
- Shortcuts MUST be unavailable on any disabled elements
- SHOULD not interfere with OS, AU, or AT shortcuts
aria-label
Property. Defines a label for the current element, to be used as a recognizable, accessible name for the object.
- SHOULD NOT be used if the label text is visible on the screen (use aria-labelledby)
aria-labelledby
Property. Identifies the element(s) that provide a concise label for the current element, to be used as a recognizable, accessible name for the object.
