Image, SVG, and Canvas Flashcards
How should informative text within the <svg> element be referenced?</svg>
All informative <text> elements inside <svg> elements MUST be referenced in the alternative text of the <svg> element, or in a long description. All informative text within the <svg> element should be referenced via aria-labelledby.</svg></svg></svg></text>
Why SHOULD SVG images include a base background color behind the important parts of the image, at a minimum?
SVG images will retain their colors when the user switches into Windows High Contrast Mode.
Which element should be used to animate svg images?
SVG animations SHOULD use JavaScript, rather than the <animate> element.</animate>
What are the SVG benefits?
Lightweight
Compatible across browsers
Can manipulate with CSS
What are SVGs?
Vector based graphics defined in XML format
They can be interactive and dynamic
How can you make svgs accessibile?
role=img
alt-text
aria-labelledby
aria-label
Inline SVGs are images that are embedded directly in HTML code. True or False?
True
How can you provide a long description for complex SVG images?
A short Alt-Text + Long description
- Put it directly in HTML Doc
- Use a button to collapsed /Expand region
- Use a button to open a dialog
- create a link
- Use the description attribute <desc> on the svg element (only for Screenreader Users</desc>
How can you provide a long description for SVG only for Screenreader Users
Use the description attribute <desc> on the svg element (only for Screenreader Users and must be programmaticly associated with aria-labelledby)</desc>
You can embed SVGs via iframe or object element. True or False?
False
should embed
- as SVG image source
- inline SVG within the HTML
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”.
Text in SVG images retains its crispness and legibility when magnified. True or False?
True
Which of the following ways to incorporate SVGs are considered bad for accessibility?
A. <object>
B. <svg>
C. <img></img>
D. <iframe>
E. All of the above are accessible
F. Both A and D</svg></object>
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?</svg></title>
A. aria-label
B. aria-describedby
C. aria-live
D. aria-labelledby
D. aria-labelledby
True or False: Interactive SVG objects must be fully keyboard accessible.
True
For which elements can users customize colors with accessibility utilities like Windows High Contrast Mode?
A) SVGs
B) Icon Fonts
B) Icon Fonts
Icons retain their original color(s) when font and background colors are changed in user preferences. True or False?
False
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 images.
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 an images.
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 span element
C. Add text to an alt attribute in the surrounding span element.
A. Add aria-label to the button or link
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
What must be done to the <canvas> element if it is used to present an image?</canvas>
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.
B. It must be assigned ARIA role=”img”.
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.</canvas>
True
Which of the following is NOT a way of providing alternative text for simple <canvas> elements?</canvas>
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.</canvas></canvas></canvas>
B. Using the alt attribute on the <canvas> element.</canvas>
True or false: To make a <canvas> element keyboard focusable, use tabindex="1" on the <canvas> element.</canvas></canvas>
False
True or false: Alternative text for <video> and <audio> elements can be provided using the alt attribute.</audio></video>
False
True or false: Providing documents in HTML format is preferred over non-HTML documents because of the accessibility features available in HTML.
True
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.
C. Audio descriptions describe important visual information that is not conveyed through a video’s audio track.
People who are deafblind access video and audio through:
A. Transcripts
B. Captions
C. Audio Description
D. None of the above
A. Transcripts
True or false: A PDF document must be untagged in order for screen reader users to access the document.
False
True or false: Using the accessibility API for Silverlight and Flash makes them accessible across all screen readers.
False
