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