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>
