1.5 Create Interactive Controls and Widgets

Question 1

Designers love to push the limits of HTML/CSS. How can they help make these sites accessible?

Answer 1

Design with accessibility in mind.

Question 2

Explain this statement: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger

Answer 2

Aria can override the original semantics.

Aria can add meaning to the native code
Example

Question 3

Give an example of how ARIA can override native semantics

Answer 3

using role overrides the HTML element type

using aria-label to override the element’s text content

Question 4

Give an example of how ARIA can enhance native semantics

Answer 4

ARIA can describe state.
aria-pressed
aria-expanded
aria-checked

Question 5

What is a “keyboard interaction pattern”?

Answer 5

The rules of how keyboard key strokes are used and interpreted for different aria widgets.

Question 6

What is the keyboard interaction pattern for an Accordion widget?

Answer 6

All element that are visible are tabbable.

Arrow keys go to next/previous section header, NOT to the next item in the open section

Question 7

What is the most common widget keyboard interaction pattern?

Answer 7

Tab to the widget
Enter opens widget
arrow keys navigate inside the widget
tab takes you out of wiget

Question 8

Why is it important to pay attention when adding roles to elements?

Answer 8

Some roles require specific parent roles
some require specific child roles
some require certain attributes

Question 9

Give an example of an aria role that has a required parent?

Answer 9

Tab must be child of tablist

Question 10

Give an example of when an ARIA role must have a specific child?

Answer 10

Radiogroup must have children with role radio

Tablist must have children with role tab

Question 11

What ARIA attribute links parent roles to their children when the children cannot be inside the parent?

Answer 11

aria-owns

aria-owns=”tab-1 tab-2 tab-3”

Question 12

Give an example of an aria role that has required attributes?

Answer 12

role = heading requires ‘aria-level’

Question 13

Forgetting to add a role requited attribute negates the role.
True or False?

Answer 13

False, the role will still be announced but may not function as expected

Question 14

What are the eight ARIA landmark roles?

Answer 14

banner 
navigation
main
complementary
contentinfo
search
form

Question 15

When should we use role = region?

Answer 15

When we want aid navigation and no other role fits

Question 16

Name the ARIA attribute used to define a region with updating content we want announced?

Answer 16

aria-live
aria-live = polite
aria-live = assertive

Question 17

Name ARIA roles with implicit live region attributes (6)

Answer 17

log
status
alert
progressbar
marque
timer

Question 18

What ARIA attribute tells the SR which actions within a live region to announce? What is its default setting?

Answer 18

aria-relevant
can be made to announce a combo of:
additions, removals, text, all
default is text

Question 19

Why should we avoid using role = application

Answer 19

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.

Question 20

Give some examples of common ARIA widgets

Answer 20

Accordion
Button
Carousel
Checkbox
Dialog
Live Region
Radio group
Predictitve Text
Slider
Tabpanel
Tooltip
there are more