Coding for Accessibility

Question 1

What aria property sets a form field as required?

Answer 1

aria-required

Question 2

What is the HTML tag equivalent of landmark role=banner?

Answer 2

<header>

Question 3

What is the HTML tag equivalent of landmark role=complementary?

Answer 3

<aside>

Question 4

What is the HTML tag equivalent of landmark role=contentinfo?

Answer 4

<footer>

Question 5

What is the HTML tag equivalent of landmark role=navigation?

Answer 5

<nav>

Question 6

What are the 8 landmark WAI-ARIA roles?

Answer 6

1. banner
2. complementary
3. contentinfo
4. form
5. main
6. navigation
7. region
8. search

Question 7

What is the HTML tag equivalent of landmark role=region?

Answer 7

<section aria-label>

Question 8

Which semantic element displays a hand pointer on hover state?

Answer 8

Link

Question 9

Is touch functionality covered by support for click events or keyboard events?

Answer 9

Click events

Question 10

What is the minimum recommended touch target size?

Answer 10

44 x 44 px

Question 11

What is the effect of role=presentation on screen readers?

Answer 11

It removes the default semantics and implicit ARIA from the accessibility tree. For example, and <h2> will be treated as a <div>

Question 12

Is keeping headings in hierarchal order a MUST or a SHOULD for AA conformance.

Answer 12

SHOULD

Question 13

What aria attribute tracks paginated views for screen readers?

Answer 13

aria-current

Question 14

What is the main thing to add when coding an accessible iframe (MUST exist for AA conformance)

Answer 14

a non-element title attribute
Example:

<iframe 
  title="Video: Specify the Language" 
  width="560" height="315" 
  src="https://www.youtube.com/embed/qyjDrUV_el8" 
  frameborder="0" allowfullscreen>
</iframe>

Question 15

What would be considered the best practice when choosing the title attribute for an iframe?

Answer 15

It should match the <title> element of the enclosed document.

Question 16

How do the headings of an iframe relate to the headings of the main page?

Answer 16

The iframe headings are part of the main page accessibility tree and SHOULD be designed to fit into the main page hierarchy if possible.

Question 17

What aria attribute should be added to an iframe without meaningful content

Answer 17

aria-hidden

Question 18

What 2 properties will disable pinch-to-zoom when set on the meta viewport element?

Answer 18

user-scalable=no and maximum-scale=1.0.

Question 19

What attributes will override the alt attribute text on an img element

Answer 19

aria-label and aria-labelledby

Question 20

How should an image be coded in order to be ignored by a screen reader?

Answer 20

Have an empty alt attribute and no aria-label or aria-labelledby attribute

Question 21

What is the difference between role=application and role=presentation?

Answer 21

Role=application causes the element and all of it’s descendants are part of an application that doesn’t conform to default ARIA specifications and where the web developer has implicated their own keyboard shortcuts.

Role=presentation removes all the default semantics and implicit ARIA from the accessibility tree and leaves only content available to screen readers.

Question 22

What is the difference between role=alert and role=alertdialog?

Answer 22

Role=alert announces but doesn’t require user interaction or focus.

Role=alertdialog requires user interation and therefore also requires focus.

Question 23

What are 2 other ways to hide images from screen readers aside from empty alt text?

Answer 23

1. Role=presentation
2. Implement as CSS backgrounds

Question 24

What is the max number of characters that SHOULD be used in alt text?

Answer 24

150

Question 25

What SHOULD be included and what MUST be included when coding informative icon fonts without visible redundant text?

Answer 25

1. Role=img (SHOULD) 2. aria-label or aria-labelledby (MUST) | Use aria-hidden if there is visible redundant text

Question 26

What tags should NOT be used to embed an SVG?

Answer 26

1. `