Images, SVG, and Canvas Flashcards
(40 cards)
True or false: alt text should include words that identify the element as a graphic or image.
False
Though not a technical limit, what is the recommended maximum image alt text character count?
About 150 characters
What are three ways to handle images that are purely decorative or redundant to content (i.e. not meant to be read by a screen reader)?
- Give them null alt text (alt=””)
- Add ARIA role=”presentation”
- Implement the image as a CSS background
True or false: if an image does not have an alt attribute, a screen reader will not read it.
False. A screen reader will often read the source attribute (the file name) if no alt attribute is on the element.
True or false: all actionable images (e.g., links, buttons, controls) must have alternative text.
True
True or false: you should include text like ‘Link to’ in the alt text of an image that is also a link.
False. Screen readers announce that a linked image is a link graphic, so writing that out in the alt text is redundant.
Under what two conditions must you provide a method to pause, stop, or hide prerecorded video?
- Content begins playing automatically
2. Content lasts more than 5 seconds
Animated images may trigger seizures in some users if they flash or flicker how many times per second?
More than three times per second
When alt text alone is not descriptive enough, what are five ways to provide long descriptions for complex images?
- Provide the long description in the context of the HTML document itself.
- Provide a button that expands a collapsed region that contains the long description.
- Provide a button to open a dialog that contains the long description.
- Provide a link to a long description on another page via a normal link text.
- Provide a link to a long description on another page via the longdesc attribute.
True or false: if a complex image or graphic needs a long description in addition to alt text, it is not necessary to make that description accessible to sighted users.
False. The long description (or a link or button to access the long description) SHOULD be visible to sighted users because some complex images may be too complex for sighted users.
True or false: if an image has a description that is set with the longdesc attribute, that description is accessible to all users.
False. The longdesc attribute is only accessible to users with screen readers.
Which aria- attribute is used to indicate the IDs of the elements that describe an object?
aria-describedby
src: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
True or false: an image must not include informative text if an equivalent visual presentation of the text can be rendered using real text.
True.
Exception: WCAG allows for the use of text in images when the image itself is decorative in nature or the text in the image is essential. A typical example of this is a company logo. Text in an image is permissible when it is part of a logo. Remember to include alt text that states the text in the logo.
Though it’s not recommended, if you must use CSS images for informative or actionable images, what are two ways to provide alt text?
- Put aria-label on the element
- Use the ‘clipped method’: add visually hidden text within the link element.
< a href=”link-to-thing.com” class=”icon” >
< span class=”visually-hidden” > Description of image < / span >< / a >
// css
. icon {
background-image: url('icon.png');
}
. visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
True or false: you can use a class with visibility:hidden to hide something on the page while keeping it accessible to screen reader users.
False. visibility:hidden will cause the text to be ignored by screen readers.
True or false: all < area >s in a map image must have their own alt text.
True
True or false: Images of text are as accessible as regular text in a web page.
False
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
Why is it important that alternative text not exceed about 150 characters?
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.
Composing alternative text for images is based on:
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.
True or false: The alt text for an image of a painting can direct users to a longer description of the painting.
True
True or false: All SVG < img > elements SHOULD be set to role=”img”.
True
What are three ways to provide meaningful, concise alternative text for SVG < img > elements?
- Use alt text
- Use aria-label
- Use aria-labelledby with a separate caption
