Custom JavaScript / ARIA Widget Flashcards
What exactly is ARIA?
ARIA (Accessible Rich Internet Application) is the acronym for Accessible Rich Internet Application.
In other words:
ARIA has no procedural logic or interactivity on its own. To create a interactive widget, you need to use JavaScript to give the content functionality, and you use ARIA to label things appropriately with names, roles, states, properties, and relationships.
ARIA is essentially an API for communicating this information to screen readers.
What can ARIA do?
labels or names for items (e.g. using aria-label or aria-labelledby or similar)
roles, role=”navigation”, role=”main” etc.
states of dynamic/interactive components (e.g. aria-selected=”true”, aria-expanded=”true”, aria-hidden=”true”)
properties of items (e.g. aria-haspopup=”true”)
relationships between items (e.g. aria-owns, aria-controls, both of which describe a kind of parent-child relationship where one item owns or controls another)
live announcements in real-time that are passed on to screen readers
True or False
If there is an aria-labelledby attribute, the text it refers to will override all other name and label methods.
True
In practice, screen reader support for aria-label and aria-labelledby is best on which elements?
Focusable elements (<a>, <input></input>, etc.). Support is not as good on non-focusable elements (<p>, <div>, <span>, <h1>, etc.).</span></a>
Elements with semantic meaning, as opposed to the elements that do not have semantic meaning (like <div> and <span>).</span>
Application regions (role=”application”). But be very careful with application regions, because they disable most of the screen reader’s regular keyboard shortcuts.
on elements inside an application region (e.g. <div role="application">)
What landmark regions do you know?
What native HTML Landmarks?
Available landmark regions include:
application
banner
complementary
contentinfo
form
main
navigation
search
HTML 5 defines landmarks as well, with such tags as:
<header> (equivalent to role="banner")
<nav> (equivalent to role="navigation")
<main> (equivalent to role="main")
<aside> (equivalent to role="complementary")
<footer> (equivalent to role="contentinfo")
</footer></aside></main></nav></header>
What are the most important ARIA Roles?
alert
alertdialog
application
dialog
group
log
marquee
menu
menubar
menuitem
menuitemcheckbox
menuitemradio
progressbar
separator
slider
spinbutton
status
tab
tablist
tabpanel
timer
toolbar
tooltip
tree
treegrid
treeitem
pseudo-HTML roles
button
checkbox
columnheader
combobox
contentinfo
form
grid
gridcell
heading
img
link
listbox
listitem
option
radio
radiogroup
row
rowgroup
rowheader
scrollbar
textbox
All of the following are ways to communicate the names of elements, EXCEPT:
A. aria-labelledby
B. <label>
C. role=”name”
D. aria-label</label>
C. role=”name”
True or False: aria-label and aria-labelledby consistently work for labelling non-semantic elements such as <div> and <span>.</span>
false
The purpose of ARIA roles is to:
A. Provide the name of the element.
B. Define what the element is.
C. Identify the state of the element.
D. None of the above.
B. Define what the element is.
Which type of ARIA roles are used to convey the layout of a web page?
A. Landmark roles
B. Abstract roles
C. Pseudo HTML roles.
D. Widget roles
A. Landmark roles
True or False: It is best to use actual HTML elements instead of pseudo HTML roles so developers don’t always have to create functionality for elements by using JavaScript.
-true
True or False: Assigning role=”application” to a region disables most screen reader keystrokes within the region to allow developers to create custom keystrokes.
True
Which role should be assigned within an application region to give screen readers access to regular text in the region?
A. Presentation role
B. Main role
C. Note role
D. Document role
D. Document role
ARIA attributes like aria-expanded, aria-checked, and aria-busy convey what information to screen reader users?
A. The names of elements.
B. The states of elements.
C. The roles of elements.
D. None of the above.
B. The states of elements.
Which ARIA attribute is used to provide additional information about an element?
A. aria-labelledby
B. aria-describedby
C. role=”description”
D. aria-label
B. aria-describedby