Images and Multimedia Flashcards
True or false: good alt text should include all the visual content of an image.
false
alt text should convey the purpose of the image for non-sighted users
(a search icon should have alt text of ‘search’, not ‘magnifying glass’)
True or false: decorative images don’t need alt text
false
decorative images should have alt=”” or be added as css background images, otherwise screenreaders will read out the file name
What are four ways to add alternative text to images?
-
aria-labelledby— will override all other values. -
aria-label— will override all other values exceptaria-lablledby -
alt— This is the standard method of providing alternative text -
title— Some screen readers (e.g. VoiceOver on macOS) treat the title attribute as an additional description for the image and will read both the accessible name AND the title. Others (e.g. NVDA, JAWS) will not read the title if an accessible name is available through other methods. All screen readers read the title text if no other alternative text is provided.
True or False: Complex images should use a long description instead of alt text.
False
Complex images MUST be briefly described using alt text AND MUST have a more complete long description
How should you programmatically associate an image with its long description?
use aria-describedby
Which of the 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></span></span></span></span>
B. CSS clip on <span></span>
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.
All of the following accessibility techniques apply to an image (<img></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”.
How should you add alternative text to an inline SVG element?
use aria-labelledby associated with the title element
`<svg></svg>
<title>Total Widgets Purchased during 2016</title>
`
True or false: If an SVG contains text that must be spoken by a screen reader and is not already included in the <title> or <desc> elements, it must be associated with the <svg> element using `aria-labelledby`.</svg></desc></title>
True
All text within the image that needs to be spoken by a screen reader MUST be associated with the <svg> element using `aria-labelledby`.</svg>
Of the three ways to add SVG to a webpage, which is LEAST accessible?
A. Utilize the <img></img> tag and reference the SVG file as the source B. Embed the SVG directly (inline) into your existing HTML code, using the <svg> element.
C. Embed the SVG in an <iframe> or <embed></embed> tag, or referenced as the data attribute through an <object>.</object></svg>
C. Embed the SVG in an <iframe> or <embed></embed> tag, or referenced as the data attribute through an <object>.</object>
the results of using <iframe> or <object> elements are very poorly supported by assistive technologies</object>
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. It should be assigned role=”img”.
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 image.
D. Icon fonts aren’t images, so they don’t need to be assigned the role=”img”.
C. It should be assigned so that screen readers will recognize icon fonts as images.
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”.
D. Decorative or redundant icon fonts should be set to aria-hidden=”true”.
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>
False
Use ARIA role="img" and aria-label or aria-labelledby on the <canvas> element.
Or add fallback text within <canvas>
