Accessible SVG Masterclass

Slide 1

Accessible SVG MASTERCLASS

Slide 2

Carie FISHER

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

Slide 3

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?

Slide 4

FORMAT SHOWDOWN

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

Slide 5

Format Showdown TYPES

Slide 6

Format Showdown RESIZE RESOLUTION

Slide 7

Format Showdown COMPRESSION

Slide 8

Format Showdown PALETTE COLORS

Slide 9

Format Showdown TRANSPARENCY

Slide 10

Format Showdown ANIMATION

Slide 11

Format Showdown INLINE EDITING

Slide 12

Format Showdown ACCESSIBILITY

Slide 13

Showdown COMPARISON

Slide 14

PATTERNS

Which SVG patterns are the most inclusive for AT users?

Slide 15

SVG PATTERNS

Slide 16

SVG Pattern COMPARISON

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

Slide 17

<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]”

Slide 18

<img> Basic Alt Patterns - DESKTOP

Slide 19

<img> Basic Alt Patterns - MOBILE

Slide 20

<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]”

Slide 21

<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]”

Slide 22

<svg> Basic Alt Patterns - DESKTOP

Slide 23

<svg> Basic Alt Patterns - MOBILE

Slide 24

<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>

Slide 25

<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]”

Slide 26

<svg> Extended Alt Patterns - DESKTOP

Slide 27

<svg> Extended Alt Patterns - MOBILE

Slide 28

<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]”

Slide 29

COLOR & CONTRAST

How do we evaluate color and contrast in SVGs?

Slide 30

SVG Color & CONTRAST

Slide 31

SVG Color & CONTRAST

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

Slide 32

Dark Mode Code EXAMPLE

Slide 33

Demos!

Slide 34

ANIMATION

What rules apply when we consider movement in SVGs?

Slide 35

SVG ANIMATION

Slide 36

Reduced Motion CSS OPTIONS

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

Slide 37

Reduced Motion Code EXAMPLE

Slide 38

Demos!

Slide 39

Quote

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

Slide 40

THANKS!

@cariefisher cariefisher.com