1.5 Create Interactive Controls and Widgets Flashcards
Designers love to push the limits of HTML/CSS. How can they help make these sites accessible?
Design with accessibility in mind.
Explain this statement: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger
Aria can override the original semantics.
Aria can add meaning to the native code
Example
Give an example of how ARIA can override native semantics
using role overrides the HTML element type
using aria-label to override the element’s text content
Give an example of how ARIA can enhance native semantics
ARIA can describe state.
aria-pressed
aria-expanded
aria-checked
What is a “keyboard interaction pattern”?
The rules of how keyboard key strokes are used and interpreted for different aria widgets.
What is the keyboard interaction pattern for an Accordion widget?
All element that are visible are tabbable.
Arrow keys go to next/previous section header, NOT to the next item in the open section
What is the most common widget keyboard interaction pattern?
Tab to the widget
Enter opens widget
arrow keys navigate inside the widget
tab takes you out of wiget
Why is it important to pay attention when adding roles to elements?
Some roles require specific parent roles
some require specific child roles
some require certain attributes
Give an example of an aria role that has a required parent?
Tab must be child of tablist
Give an example of when an ARIA role must have a specific child?
Radiogroup must have children with role radio
Tablist must have children with role tab
What ARIA attribute links parent roles to their children when the children cannot be inside the parent?
aria-owns
aria-owns=”tab-1 tab-2 tab-3”
Give an example of an aria role that has required attributes?
role = heading requires ‘aria-level’
Forgetting to add a role requited attribute negates the role.
True or False?
False, the role will still be announced but may not function as expected
What are the eight ARIA landmark roles?
banner navigation main complementary contentinfo search form
When should we use role = region?
When we want aid navigation and no other role fits
Name the ARIA attribute used to define a region with updating content we want announced?
aria-live
aria-live = polite
aria-live = assertive
Name ARIA roles with implicit live region attributes (6)
log status alert progressbar marque timer
What ARIA attribute tells the SR which actions within a live region to announce? What is its default setting?
aria-relevant
can be made to announce a combo of:
additions, removals, text, all
default is text
Why should we avoid using role = application
because it overrides many
assistive technology keystrokes, such as the keystrokes that allow screen reader
users to navigate by semantic elements such as headings, landmarks, tables,
etc.
Give some examples of common ARIA widgets
Accordion Button Carousel Checkbox Dialog Live Region Radio group Predictitve Text Slider Tabpanel Tooltip there are more
