Images, SVG, and Canvas Flashcards
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
