WAI-ARIA 1.1 Attributes Flashcards

1
Q

aria-activedescendant

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

aria-atomic

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

aria-autocomplete

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

aria-busy

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

aria-checked

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

aria-colcount

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

aria-colindex

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

aria-colspan

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

aria-controls

A

Property. Identifies the element(s) whose content or presence are controlled nby the current element.
- Value: ID reference list

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

aria-current

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

aria-describedby

A

Property. Identifies the element(s) that describe(s) the object.
- More verbose than aria-labelledby
- Value: ID reference list

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

aria-details

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

aria-disabled

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

aria-dropeffect
[deprecated in 1.1]

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

aria-errormessage

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

aria-expanded

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

aria-flowto

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

aria-grabbed
[deprecated in 1.1]

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

aria-haspopup

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

aria-hidden

A

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

21
Q

aria-invalid

A

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

22
Q

aria-keyshortcuts

A

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

23
Q

aria-label

A

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)

24
Q

aria-labelledby

A

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.

25
Q

aria-level

A

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

26
Q

aria-live

A

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

27
Q

aria-modal

A

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)

28
Q

aria-multiline

A

Property. Indicates whether a text box accepts multiple lines of input.
- Value: true/false (default)

29
Q

aria-multiselectable

A

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)

30
Q

aria-orientation

A

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)

31
Q

aria-owns

A

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

32
Q

aria-placeholder

A

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

33
Q

aria-posinset

A

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

34
Q

aria-pressed

A

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

35
Q

aria-readonly

A

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)

36
Q

aria-relevant

A

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

37
Q

aria-required

A

Property. Indicates that user input is required on the element to successfully submit a form.
- Value: true/false (default)

38
Q

aria-roledescription

A

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

39
Q

aria-rowcount

A

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.

40
Q

aria-rowindex

A

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

41
Q

aria-rowspan

A

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

42
Q

aria-selected

A

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

43
Q

aria-setsize

A

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

44
Q

aria-sort

A

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

45
Q

aria-valuemax

A

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

46
Q

aria-valuemin

A

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

47
Q

aria-valuenow

A

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

48
Q

aria-valuetext

A

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