Accessible SVG Masterclass

A presentation at ID24 by Carie Fisher

Accessible SVG MASTERCLASS

Carie FISHER — Carie FISHER
Sr. Accessibility Consultant & Trainer @ Deque HCI Ph.D. student @ Iowa State University

Presentation AGENDA — Presentation AGENDA
FORMAT SHOWDOWN Which format is the best choice for my environment & user needs? PATTERNS Which SVG patterns are the most inclusive for AT users? COLOR & CONTRAST How do we evaluate color and contrast in SVGs? ANIMATION What rules apply when we consider movement in SVGs?

FORMAT SHOWDOWN — FORMAT SHOWDOWN
Which format is the best choice for my environment & user needs?

Format Showdown TYPES

Format Showdown RESIZE RESOLUTION

Format Showdown COMPRESSION

Format Showdown PALETTE COLORS

Format Showdown TRANSPARENCY

Format Showdown ANIMATION

Format Showdown INLINE EDITING

Format Showdown ACCESSIBILITY

Showdown COMPARISON

PATTERNS — PATTERNS
Which SVG patterns are the most inclusive for AT users?

SVG PATTERNS

SVG Pattern COMPARISON — SVG Pattern COMPARISON
https://codepen.io/ cariefisher/pen/QWpjded

<img> Basic Alternative DESCRIPTIONS — <img> Basic Alternative DESCRIPTIONS
#1: <img> + alt=”[words]” #2: <img> + role=”img” alt=”[words]” #3: <img> + role=”img” + aria-label=”[words]” #4: <img> + role=”img” + aria-labelledby=”[ID]”

<img> Basic Alt Patterns - DESKTOP

<img> Basic Alt Patterns - MOBILE

<img> Basic Alt PATTERNS — <img> Basic Alt PATTERNS
Best in SHOW #2: <img> + role=”img” alt=”[words]” #3: <img> + role=”img” + aria-label=”[words]” Use with CAUTION #4: <img> + role=”img” + aria-labelledby=”[ID]” Possibly AVOID #1: <img> + alt=”[words]”

<svg> Basic Alternative PATTERNS — <svg> Basic Alternative PATTERNS
#5: <svg> + role=”img” + <title> #6: <svg> + role=”img” + <text> #7: <svg> + role=”img” + <title> + aria-describedby=”[ID]” #8:<svg> + role=”img” + <title> + aria-labelledby=”[ID]”

<svg> Basic Alt Patterns - DESKTOP

<svg> Basic Alt Patterns - MOBILE

<svg> Basic Alt PATTERNS — <svg> Basic Alt PATTERNS
Best in SHOW #5: <svg> + role=”img” + <title> #8:<svg> + role=”img” + <title> + aria-labelledby=”[ID]” Use with CAUTION #7: <svg> + role=”img” + <title> + aria-describedby=”[ID]” Possibly AVOID #6: <svg> + role=”img” + <text>

<svg> Extended Alternative PATTERNS — <svg> Extended Alternative PATTERNS
#9: <svg> + role=”img” + <title> + <text> #10: <svg> + role=”img” + <title> + <desc> #11: <svg> + role=”img” + <title> + <desc> + aria-labelledby=”[ID]” #12: <svg> + role=”img” + <title> + <desc> + aria-describedby=”[ID]”

<svg> Extended Alt Patterns - DESKTOP

<svg> Extended Alt Patterns - MOBILE

<svg> Extended Alt PATTERNS — <svg> Extended Alt PATTERNS
Best in SHOW #11: <svg> + role=”img” + <title> + <desc> + aria-labelledby=”[ID]” Use with CAUTION #10: <svg> + role=”img” + <title> + <desc> Possibly AVOID #9: <svg> + role=”img” + <title> + <text> #12: <svg> + role=”img” + <title> + <desc> + aria-describedby=”[ID]”

COLOR & CONTRAST — COLOR & CONTRAST
How do we evaluate color and contrast in SVGs?

SVG Color & CONTRAST

SVG Color & CONTRAST — SVG Color & CONTRAST
@media (prefers-color-scheme: dark) @media (prefers-color-scheme: light) The “no-preference” option only supported by 18% of browsers

Dark Mode Code EXAMPLE

Demos!

ANIMATION — ANIMATION
What rules apply when we consider movement in SVGs?

SVG ANIMATION

Reduced Motion CSS OPTIONS — Reduced Motion CSS OPTIONS
@media (prefers-reduced-motion: reduce) @media (prefers-reduced-motion: no-preference)

Reduced Motion Code EXAMPLE

Demos!

Quote — Quote
“For people without disabilities, technology makes things EASIER. For people with disabilities, technology makes things POSSIBLE.” — IBM Training Manual, 1991

THANKS! — THANKS!
@cariefisher cariefisher.com

Carie Fisher
@cariefisher

1 / 40

Today we have many robust patterns and techniques to help us optimize SVG accessibility, this is true regardless of if you are creating icons, simple images, or more complex infographics. But which patterns are the best to use for your particular situation and targeted WCAG conformance level? And what other factors should we consider when designing and developing accessible SVGs?

Join me to learn more about:

Inclusive SVG patterns for web and mobile
SVG color and contrast guidelines, tools, and @prefers-color-scheme
SVG animation guidelines, tools, and @prefers-reduced-motion

Video