Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

WAS Exam > Coding for Accessibility > Flashcards

Coding for Accessibility Flashcards

1
Q

What aria property sets a form field as required?

A

aria-required

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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

A

<header>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

<aside>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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

A

<footer>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

<nav>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are the 8 landmark WAI-ARIA roles?

A
  1. banner
  2. complementary
  3. contentinfo
  4. form
  5. main
  6. navigation
  7. region
  8. search
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

<section aria-label>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Which semantic element displays a hand pointer on hover state?

A

Link

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

Click events

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the minimum recommended touch target size?

A

44 x 44 px

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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

A

SHOULD

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What aria attribute tracks paginated views for screen readers?

A

aria-current

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

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

A

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>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

aria-hidden

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

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

A

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

19
Q

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

A

aria-label and aria-labelledby

20
Q

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

A

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

21
Q

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

A

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.

22
Q

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

A

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

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

23
Q

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

A
  1. Role=presentation
  2. Implement as CSS backgrounds
24
Q

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

A

150

25
Q

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

A
  1. Role=img (SHOULD)
  2. aria-label or aria-labelledby (MUST)

Use aria-hidden if there is visible redundant text

26
Q

What tags should NOT be used to embed an SVG?

A
  1. <object>
  2. <iframe>
27
Q

What are the downsides of using an <img> tag with an SVG src?

A
  1. Javascript and CSS can’t be directly applied to the SVG for animations/manipulations.
  2. The SVG is not directly available in the DOM if the image is complex
28
Q

What are the downsides of embedding an inline <svg> tag?

A
  • The increased embedded code will also result in an increased file size.
  • The inline SVG cannot be cached.
  • If the image is used in multiple places, maintaining inline SVG code becomes more complicated.
29
Q

What element MUST be added for <svg> alternative text and then programmatically associated for screenreaders?

A

<title>

Screen readers won’t always recognize it without role=img

30
Q

What element can be added to a complex <svg> to include a longer description?

A

<desc>

31
Q

What is the recommended method of including a long description for a complex <svg>?

A

Provide a long description in the HTML content itself, either on that page or another page (linked). Using the <desc> tag will only announce to screen readers and not be available to sighted users.

32
Q

What method should be used to animate an <svg>?

A

Use Javascript instead of the <animate> element.

33
Q

What 4 keyboard features are not disabled by role=application?

A
  • The Tab key to go to focusable elements.
  • The Enter or Return key
  • The space bar
  • The arrow keys
34
Q

What 3 ARIA roles automatically trigger application mode?

A
  1. role=”dialog”
  2. role=”alertdialog”
  3. role=”tablist”
35
Q

What ARIA property will suppress announcements while a region is updating,

A

aria-busy

36
Q

When using an SVG image, when MUST role=img be added for accessibility?

A

When embedding inline with the <svg tag

37
Q

When using an SVG image, when SHOULD role=img be added for accessibility, but is not necessary?

A

When setting an svg src for an <img> tag

38
Q

What 2 properties must be set on an informative icon font to make it accessible?

A
  1. role=”img”
  2. aria-label
39
Q

A good way to set alt text for CSS background images is with CSS visually-hidden text. What type of image should this method not be used on?

A

Icon fonts

40
Q

Better for accessibility: SVG or <canvas?

A

SVG

41
Q

What is the main thing that will make a PDF accessible?

A

Tagging the file as a PDF

42
Q

What is the maximum time a transiton effect should run?

A

5 seconds

43
Q

SHOULD lazy loading content be announced as it loads?

A

No

There should only be a placeholder in the content area, but not a live a

WAS Exam (7 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions