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
