Accessible SVG MASTERCLASS

Carie FISHER

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

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

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

Which SVG patterns are the most inclusive for AT users?

SVG PATTERNS

SVG Pattern COMPARISON

https://codepen.io/ cariefisher/pen/QWpjded

<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

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

#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

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

#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

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

How do we evaluate color and contrast in SVGs?

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

What rules apply when we consider movement in SVGs?

SVG ANIMATION

Reduced Motion CSS OPTIONS

@media (prefers-reduced-motion: reduce) @media (prefers-reduced-motion: no-preference)

Reduced Motion Code EXAMPLE

Demos!

Quote

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

THANKS!

@cariefisher cariefisher.com