Images, SVG, and Canvas Flashcards
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>
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.
True or false: Images of text are as accessible as regular text in a web page.
False
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. 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.
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.
False
Both <img> and <area> tags must have alternative text.
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.
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.”]
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.
False
… the longdesc method is only available to screen reader users.
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.
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.
True or false: The alt text for an image of a painting can direct users to a longer description of the painting.
True
…alt=”A painting by John Gast in 1872 titled American Progress as described below”
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.
C. What the author intends to convey with the image.
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.
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.
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. It should be assigned role=”img”.
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
B. aria-owns attribute
Text in SVG images retains its crispness and legibility when magnified.
True
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
F. Both A and D
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
D. aria-labelledby
