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.
aria-level
Property. Defines the hierarchical level of an element within a structure (e.g. trees, headings, nested grids or tablists, etc.).
- Applied to leaf nodes of a structure, so multiple elements in a set may have the same level.
- Value: integer >=1, increasing with depth
- Used in: grid, heading, listitem, row, tablist
- Inherited: treegrid, treeitem
aria-live
Property. Indicates that an element will be updated and describes the types of updates the UA, ATs, and user can expect.
- Values are suggestions, and may be modified by user actions and settings in some cases
- If a value is not set on a live region, the value will be taken from the nearest ancestor where it is set, or the default value provided by the role, if available
- assertive: Updates have highest priority and SHOULD be presented to the user immediately
- polite: Updates have lower priority and SHOULD be presented at the next graceful opportunity
- off (default): Updates should not be presented to the user unless the region is currently focused
aria-modal
Property. Indicates whether an element is modal (precluding usage of other content on the page) when displayed.
- When displayed, ATs SHOULD navigate to the element, unless focus is explicitly set elsewhere
- When displayed, ATs MAY limit navigation to its contents, unless focus moves to an outside element
- When displayed, interface MUST be controllable by its descendants (e.g. a close button)
- When displayed, all other content SHOULD be marked inert, if the host language enables this
- Value: true/false (default)
aria-multiline
Property. Indicates whether a text box accepts multiple lines of input.
- Value: true/false (default)
aria-multiselectable
Property. Indicates that the user may select >1 item from the current selectable descendants
- Authors SHOULD ensure that aria-elected is correctly set on descendants.
- Value: true/false (default)
aria-orientation
Property. Indicates the element’s orientation.
- Implicit defaults are set on some roles but remain unidentified on roles where a default is ambiguous.
- Value: horizontal, vertical, undefined(default)
aria-owns
Property. Identifies element(s) in order to identify a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
- If an element has both DOM children and aria-owns, they are interpreted in that order.
- SHOULD NOT be used to replace or duplicate DOM hierarchy
- MUST reference only ids that are not owned by any other element
- Value: ID reference list
aria-placeholder
Property. Defines a short hint to aid the user with data entry.
- SHOULD NOT be used in lieu of a label, whose purpose is different
- SHOULD be present whenever the input value is an empty string
aria-posinset
Property. Defines an element’s position in the current set of listitems or treeitems, if all elements in the set are not present in the DOM.
- SHOULD also have aria-setsize
- In a menu, SHOULD consider the total number of items, excluding any separators
- Value: integer >= 1 and <= size of the set
aria-pressed
State. Indicates the current “pressed” state of toggle buttons, which require a full press-and-release cycle to change their value.
- Used on: button
- true: element is pressed
- false: element supports being pressed but is not currently pressed
- mixed: values of more than one item controlled bu the button do not share the same value
- undefined (default): element does not support being pressed
aria-readonly
Property. Indicates that the element is not editable, but is otherwise operable.
- Navigation SHOULD NOT be restricted tot he element or its focusable descendants
- Value: true/false (default)
aria-relevant
Property. Indicates what notifications the UA will trigger when the accessibility tree within a live region is modified, helping to identify semantically meaningful changes, rather than presentational ones.
- Attribute provides a suggestion to ATs, but presenting them is optional
- When not defined, a value is inherited from the nearest ancestor on on which it is set (this is not additive)
- When value is or includes text, UA MUST monitor descendant node changes
- additions: elements are added to the the accessibility tree within the live region
- removals: text content or node is removed from the live region
- text: text content or alternative is added to any descendant of the live region
- additions text: additions and text
- all:additions, removals, and text
aria-required
Property. Indicates that user input is required on the element to successfully submit a form.
- Value: true/false (default)
aria-roledescription
Property. Defines a human-readable, author-localized description for the role of an element, giving authors the ability to override how ATs localize and express the name of the role.
- SHOULD be limited to clarifying the purpose on non-interactive container roles like ‘group’, or to providing more descriptive descriptions of certain widgets.
- Element SHOULD have a valid WAI-ARIA role
aria-rowcount
Property. Defines the total # of rows in a table, grid, or treegrid; only useful if only a subset of rows 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-rowindex
Property. Defines an element’s row index or position with respect to the total # of rows within a table, grid, or treegrid; only useful if only a subset of rows is present in the DOM at a given moment.
- Value: MUST be set to an integer >=1, > the aria-rowindex of preceding rows, and <= the number of rows in the table.
- MUST be set to the start of the span, for cells spanning multiple rows
- SHOULD be placed on each row and MAY be placed on all children or owned elements of the row
aria-rowspan
Property. Defines the # of rows spanned by a cell within a table, grid, or treegrid, when not contained in a native table.
- Value: MUST be an integer >= 1 and < the value which would cause the cell to overlap the next cell in the same column. 0 indicates that the cell spans all remaining rows in the row group
aria-selected
State. Indicates the current “selected” state of various widgets (in single-selection containers where where the currently-focused item is not selected, and multi-select containers).
- MUST be set on all selectable descendants in any aria-multiselectable container
- Takes precedence over implicit selection based on focus
- true: element is selected
- false: element is not selected
- undefined (default): element is not selectable
aria-setsize
Property. Defines the number of items in the current set (of listitems or treeitems), if not all items in the set are present in the DOM.
- Marked on all members of the set, not the container.
- Value: MUST be an integer equal to the number of items in the set, and SHOULD be -1 if unknown
- In a menu, SHOULD consider the total number of items, excluding any separators
aria-sort
Property. Indicates if items in a table or grid are sorted in ascending or descending order.
- SHOULD only be applied to table or grid headers
- SHOULD only be applied to one header at a time
- ascending: items sorted in ascending order by values in this column
- descending: items sorted in descending order by values in this column
- none (default): no sorting has been applied to this column
- other: items sorted using some algorithm other than ascending/descending
aria-valuemax
Property. Defines the maximum value allowed for a range widget.
- SHOULD be provided if aria-valuenow has a known maximum
- Value: number, MUST be >= aria-valuemin
aria-valuemin
Property, Defines the minimum value allowed for a range widget.
- SHOULD be provided if aria-valuenow has a known minimum
- Value: number, MUST be <= aria-valuemax
aria-valuenow
Property. Defines the current value for a range widget.
- SHOULD NOT be set if unknown
- Value: number, within range if aria-valuemin and aria-valuemax are set
- For progressbar and scrollbar elements, ATs SHOULD convey the value as a percent within the range (if defined) or the value with a percent sign
- When the value cannot be accurately represented by a number, aria-valuetext SHOULD be used as well
aria-valuetext
Property. Defines the human-readable text alternative of aria-valuenow for a range widget
- SHOULD also set aria-valuenow (if not unknown)
- SHOULD only set if aria-valuenow cannot be meaningfully represented as a number
