Image, SVG, and Canvas Flashcards

1
Q

How should informative text within the <svg> element be referenced?</svg>

A

All informative <text> elements inside <svg> elements MUST be referenced in the alternative text of the <svg> element, or in a long description. All informative text within the <svg> element should be referenced via aria-labelledby.</svg></svg></svg></text>

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

Why SHOULD SVG images include a base background color behind the important parts of the image, at a minimum?

A

SVG images will retain their colors when the user switches into Windows High Contrast Mode.

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

Which element should be used to animate svg images?

A

SVG animations SHOULD use JavaScript, rather than the <animate> element.</animate>

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

What are the SVG benefits?

A

Lightweight
Compatible across browsers
Can manipulate with CSS

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

What are SVGs?

A

Vector based graphics defined in XML format
They can be interactive and dynamic

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

How can you make svgs accessibile?

A

role=img
alt-text
aria-labelledby
aria-label

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

Inline SVGs are images that are embedded directly in HTML code. True or False?

A

True

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

How can you provide a long description for complex SVG images?

A

A short Alt-Text + Long description

  1. Put it directly in HTML Doc
  2. Use a button to collapsed /Expand region
  3. Use a button to open a dialog
  4. create a link
  5. Use the description attribute <desc> on the svg element (only for Screenreader Users</desc>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How can you provide a long description for SVG only for Screenreader Users

A

Use the description attribute <desc> on the svg element (only for Screenreader Users and must be programmaticly associated with aria-labelledby)</desc>

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

You can embed SVGs via iframe or object element. True or False?

A

False
should embed
- as SVG image source
- inline SVG within the HTML

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

What should be done to an <img></img> element to increase screen reader compatibility when an SVG is used as its source?

A. It should be assigned role=”img”.
B. It should be assigned role=”region”.
C. It should be assigned role=”presentation”.
D. Nothing should be done to the <img></img> element.

A

A. It should be assigned role=”img”.

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

Text in SVG images retains its crispness and legibility when magnified. True or False?

A

True

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

Which of the following ways to incorporate SVGs are considered bad for accessibility?

A. <object>
B. <svg>
C. <img></img>
D. <iframe>
E. All of the above are accessible
F. Both A and D</svg></object>

A

F. Both A and D

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

What is the best way to link the <title> in an <svg> so that screen readers will recognize it as the alternative text?</svg></title>

A. aria-label
B. aria-describedby
C. aria-live
D. aria-labelledby

A

D. aria-labelledby

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

True or False: Interactive SVG objects must be fully keyboard accessible.

A

True

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

For which elements can users customize colors with accessibility utilities like Windows High Contrast Mode?

A) SVGs
B) Icon Fonts

A

B) Icon Fonts

17
Q

Icons retain their original color(s) when font and background colors are changed in user preferences. True or False?

A

False

18
Q

Why should role=”img” be assigned to informative and actionable icon fonts?

A. It should be assigned so that screen readers will ignore icon fonts.
B. It should be assigned so that icon fonts receive visual focus.
C. It should be assigned so that screen readers will recognize icon fonts as an images.
D. Icon fonts aren’t images, so they don’t need to be assigned the role=”img”.

A

C. It should be assigned so that screen readers will recognize icon fonts as an images.

19
Q

When assigning alternative text to actionable icon fonts (buttons or links), which technique is most effective?

A. Add aria-label to the button or link
B. Add hidden text within the button or link using CSS clip assigned to the surrounding span element
C. Add text to an alt attribute in the surrounding span element.

A

A. Add aria-label to the button or link

20
Q

Which of the following methods is recommended for decorative or redundant icon fonts?

A. Decorative or redundant icon fonts should be described using aria-label.
B. Decorative or redundant icon fonts should be assigned role=”img”.
C. Decorative or redundant icon fonts should be assigned an empty, or null, alt attribute.
D. Decorative or redundant icon fonts should be set to aria-hidden=”true”.

A

D. Decorative or redundant icon fonts should be set to aria-hidden=”true”.

21
Q

True or False: Adding text within a <canvas> element or in an alt attribute on the element are both ways of adding alternative text to <canvas> elements.</canvas></canvas>

A

False

22
Q

What must be done to the <canvas> element if it is used to present an image?</canvas>

A. It must be assigned ARIA role=”presentation”.
B. It must be assigned ARIA role=”img”.
C. Nothing needs to be done to the element.
D. It must have an alt attribute.

A

B. It must be assigned ARIA role=”img”.

23
Q

True or false: If a <canvas> element does not specify the background color, when a user enters into Windows High Contrast Mode, the background color of the image will change along with the color of the web page as a whole.</canvas>

A

True

24
Q

Which of the following is NOT a way of providing alternative text for simple <canvas> elements?</canvas>

A. Using the aria-label attribute on the <canvas> element.
B. Using the alt attribute on the <canvas> element.
C. Providing a description within the <canvas> element and referencing it using the aria-labelledby attribute.</canvas></canvas></canvas>

A

B. Using the alt attribute on the <canvas> element.</canvas>

25
Q

True or false: To make a <canvas> element keyboard focusable, use tabindex="1" on the <canvas> element.</canvas></canvas>

A

False

26
Q

True or false: Alternative text for <video> and <audio> elements can be provided using the alt attribute.</audio></video>

A

False

27
Q

True or false: Providing documents in HTML format is preferred over non-HTML documents because of the accessibility features available in HTML.

A

True

28
Q

Which of the following is true about audio descriptions?

A. Audio descriptions describe important visual information through synchronized captions.
B. Audio descriptions are not required if there is no audio content.
C. Audio descriptions describe important visual information that is not conveyed through a video’s audio track.
D. Audio descriptions describe important visual information through a transcript.

A

C. Audio descriptions describe important visual information that is not conveyed through a video’s audio track.

29
Q

People who are deafblind access video and audio through:

A. Transcripts
B. Captions
C. Audio Description
D. None of the above

A

A. Transcripts

30
Q

True or false: A PDF document must be untagged in order for screen reader users to access the document.

A

False

31
Q

True or false: Using the accessibility API for Silverlight and Flash makes them accessible across all screen readers.

A

False