Images, SVG, and Canvas Flashcards

1
Q

Which of following methods can be used to add programmatically discernible alternative text to an informative background image?

A. CSS visibility:hidden on <span>

B. CSS clip on <span>

C. CSS display:none on <span>

D. aria-label on <span>

A

B. CSS clip on <span>

Screen readers will not read text with styles display:none and visibility:hidden.

Aria-label doesn’t work consistently on non-interactive elements (span, p, div) across different browser/screen reader combinations.

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

True or false: Images of text are as accessible as regular text in a web page.

A

False

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

Why is it important that alternative text not exceed about 150 characters? (Select the best answer.)

A. Screen readers do not treat alternative text like they treat regular text in an HTML document.
B. Because all it takes is 150 characters to accurately describe an image.
C. If alternative text is longer than 150 characters, the user becomes bored listening to the image description.
D. It is not important. Alternative text can exceed 150 characters if that is needed to describe an image.

A

A. Screen readers do not treat alternative text like they treat regular text in an HTML document.

Note:

There is no technical limit nor policy restriction on the length of alt text, but alt text is not as usable as regular text for several reasons:

  • Screen reader users cannot resume where they left off if they pause while in the middle of reading alt text.
  • Screen reader users cannot navigate the text (e.g. by word, character, etc.).
  • Some older screen readers do not read the full length of the alt text.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

True or false: If the <area> elements of an image map have alternative text, then alternative text does not need to be provided for the main <img> element.

A

False

Both <img> and <area> tags must have alternative text.

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

The alternative text for an image used as a form input must:

A. Describe the location of the image.
B. Convey the functionality or end result of the form input.
C. Describe the look of the input.
D. An image used as an input is a decorative image, so it does not need a text alternative.

A

B. Convey the functionality or end result of the form input.

“The alternative text for form inputs with type=”image” MUST accurately convey the purpose or result of the input action.” It SHOULD also be concise, less than 150 characters.

Good: [input type=”image” name=”submit” src=”submit-button.png” alt=”Submit”]

Bad: [input type=”image” name=”submit” src=”submit-button.png” alt=”Submit. Click this button to submit your appointment request.”]

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

True or false: If a long description of a complex image is provided using the longdesc attribute, both sighted users and screen reader users can access the description.

A

False

… the longdesc method is only available to screen reader users.

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

All of the following accessibility techniques apply to an image (<img>) that is purely for visual decoration, except:

A. It can be given an empty, or null, alt attribute value.
B. The image can be assigned ARIA role=”presentation”.
C. The image can be described using the alt attribute as alt=”decorative”.
D. The image can be placed in the background using CSS.

A

C. The image can be described using the alt attribute as alt=”decorative”.

Images that do not convey content, are decorative, or are redundant to content that is already conveyed in text MUST be given null alternative text (alt=””), ARIA role=”presentation”, or implemented as CSS backgrounds.

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

True or false: The alt text for an image of a painting can direct users to a longer description of the painting.

A

True

…alt=”A painting by John Gast in 1872 titled American Progress as described below

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

Composing alternative text for images is based on: (Select the best answer.)

A. The visual characteristics of the image.
B. The file name of the image.
C. What the author intends to convey with the image.
D. It really is not based on anything.

A

C. What the author intends to convey with the image.

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

What is an effective way to provide alternative text for visual driving directions?

A. Describe visually where streets, roads, and bridges are in relation to one another.
B. Describe the colors of roads and different areas on the map.
C. There is no way to compose alternative text for driving directions.
D. Compose text-based directions that include street names, turns, exits, distance, etc.

A

D. Compose text-based directions that include street names, turns, exits, distance, etc.

Creating meaningful, well-written alternative text for all of the possible uses of a map is essentially impossible. Fortunately, the alternative text for some map uses can be automated by data and algorithms, such as the creation of driving directions.

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

What should be done to an <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> 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

All of the following can be used to provide alternative text for SVG <img> elements, except:

A. alt attribute
B. aria-owns attribute
C. aria-label attribute
D. aria-labelledby attribute

A

B. aria-owns attribute

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

Text in SVG images retains its crispness and legibility when magnified.

A

True

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

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

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

A

F. Both A and D

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

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

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
16
Q

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

A

True

17
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 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 images.

18
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 spanelement
C. Add text to an alt attribute in the surrounding span element.

A

A. Add aria-label to the button or link

19
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”.

20
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.

A

False

Add alternative text within the <canvas> element itself (and aria-labelledby).

21
Q

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

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”.

22
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.

A

True

23
Q

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

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.

A

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

24
Q

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

A

False

25
Q

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

A

False

The alt attribute is not allowed on <video> or <audio> elements to add alternative text to videos, but there are other ways of making video content accessible:

  • Synchronized captions
  • Text transcript
  • Audio descriptions
26
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

27
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.

Audio descriptions are an audio track played simultaneously with the original video, with a narrator describing the important visual information to blind users.

28
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

29
Q

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

A

False

The PDF format includes an accessibility API that is very similar to HTML. Content is wrapped in tags that designate semantic elements and structure. A PDF file must be in “tagged PDF” format to be accessible to screen readers.

30
Q

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

A

False

Not all screen readers and platforms support Silverlight and Flash. Support tends to be weak or non-existent on mobile platforms and on macOS. Basically, if the content is critical, you either must choose HTML instead of Silverlight or Flash, or you must supplement the Silverlight or Flash content with an HTML alternative.

Both Silverlight and Flash have an accessibility API that makes it possible to make the content accessible to screen readers under some conditions.