WAI-ARIA basics Flashcards
What are the five rules of ARIA?
1: If you can use semantic HTML rather than ARIA, do it. (aka Don’t use ARIA)
2: Do not change native semantics, unless you really have to
3: All interactive ARIA controls (widgets) must be usable with the keyboard
4: Do not use role=”presentation” or aria-hidden=”true” on a focusable element
5: All interactive elements must have an accessible name
What are some reasons you might not be able to use a semantic element?
- The feature is not currently available in HTML.
- The feature is available in HTML but it is not supported in browsers; or is not accessibly supported.
- The visual design constraints rule out the use of a particular native element, because the element cannot be styled as required.
Which of these is the right way to build a heading that is also a tab, and why?
A. < h2 role=”tab” >heading tab< /h2 >
B. < div role=”tab” >< h2 >heading tab< /h2 >< /div >
B. why? because A is overriding the native semantics (it will no longer be a header, just a tab)
In calculating an accessible name, what is the order of precedence for the list below?
a. fallback content (like “title”)
b. host-language specific attributes (alt, value, label, etc)
c. aria-label
d. aria-labelledby
e. child content (if supported)
- d. aria-labelledby
- c. aria-label
- b. host-language specific attributes (alt, value, label, etc)
- e. child content (if supported)
- a. fallback content (like “title”)
What are two examples of elements that will NOT walk through all of their descendant nodes when calculating names from child content?
treeitem and menuitem
- What would adding role=”presentation” or role=”none” do if added to a table element?
- What would it do to the cells (td) inside the table?
- What would it do to a link (a) nested inside a table cell?
- Removes the native semantics, essentially, makes the table only a layout mechanism.
- The cells would also have their semantics removed (because they are required children of the table)
- The link would keep its native semantics (because it is not a required child of the table)
Will aria-labelledby used on a paragraph work?
No, it will be ignored.
A paragraph contains a description, and is hidden with CSS - display: none;
an input uses aria-desribedby to reference that description - will it work?
Yes - hidden content still contributes to the accessible name calculation.
Also applies to visibility: hidden or the HTML hidden attribute.
What is a good way to link an error message to a form field?
aria-describedby
can also use role=”alert” or aria-live region
What is the native element version of role=”slider”
input type=”range”
What language/modeling is the ARIA role taxonomy provided in?
Web Ontology Language (OWL) which is expressed in Resource Description Framework (RDF)
- Web Ontology Language: designed for use by applications that need to process the content of information instead of just presenting information to humans.
- The Resource Description Framework: general-purpose language for representing information in the Web.
What is “managed state?”
Give an example.
States that are controlled by the user agent. Some can be overridden by the author (like aria-posinset and aria-setsize).
Examples are keyboard focus or selection - they often have corresponding CSS pseudo-classes, such as :focus, or psuedo-elements, such as ::selection.
What are the three types of semantics WAI-ARIA covers?
roles, states, and properties
Give some examples of roles where the author must manage focus.
No semantic equivalent exists - combobox - grid - menu - menubar - tree - treegrid - tablist If not using semantic elements: - listbox - radiogroup
Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.
Role
Dynamic property expressing characteristics of an object that may change in response to user action or automated processes.
State
- Attributes that are essential to the nature of a given object, or that represent a data value associated with the object.
- Changing one may significantly impact the meaning or presentation of an object.
- Less likely to change than states, but note that the frequency of change difference is not a rule.
Property
Role types: A region on a page to which the user may want quick access, relevant to a specific user purpose, such as navigating, searching, perusing the primary content, etc.
Landmark roles
The meaning of something as understood by a human, defined in a way that computers can process a representation of an object, such as elements and attributes, and reliably represent the object in a way that various humans will achieve a mutually consistent understanding of the object.
Semantics
Role type: Discrete user interface object with which the user can interact.
They range from simple objects that have one value or operation, to complex objects that contain many managed sub-objects.
Widget role
A hierarchical definition of how the characteristics of various classes relate to each other, in which classes inherit the properties of superclasses in the hierarchy.
Taxonomy
Role types - General role concepts used for the ontology. Authors MUST NOT use in content.
Abstract roles
Role type: Typically updated as a result of an external event when user focus may be elsewhere, not always as a result of a user interaction. Often announced by AT.
Live Region
Role type: structures that organize content in a page. Not usually interactive.
Document Structure
Role type: Act as windows within the browser or application.
Window roles
These two things are both attributes that are added to elements, prefixed with aria-
States and properties
