A11y - Accessibility a11y accessibility bit.ly/a11y-numeronym - - PowerPoint PPT Presentation

▶
a11y accessibility a11y accessibility
SMART_READER_LITE
LIVE PREVIEW

A11y - Accessibility a11y accessibility bit.ly/a11y-numeronym - - PowerPoint PPT Presentation

May 18, 2023 208 likes •956 views

A11y - Accessibility a11y accessibility bit.ly/a11y-numeronym a11y bit.ly/a11y-numeronym accessibility degree to which an environment is usable by as many people as possible web accessibility degree to which a website is usable by as many

slide-1
SLIDE 1

A11y - Accessibility

slide-2
SLIDE 2

a11y

slide-3
SLIDE 3

accessibility

bit.ly/a11y-numeronym

slide-4
SLIDE 4

a11y

bit.ly/a11y-numeronym

slide-5
SLIDE 5

web accessibility

accessibility

degree to which an environment is usable by as many people as possible

degree to which a website is usable by as many people as possible

bit.ly/a11yfore

slide-6
SLIDE 6

1,000,000,000

World Health Organization

bit.ly/who-at

slide-7
SLIDE 7

How people interact with the web

slide-8
SLIDE 8

Assistive technology

slide-9
SLIDE 9

Screen readers

  • JAWS - job access

with speech


  • Apple’s VoiceOver

  • Microsoft’s Narrator
slide-10
SLIDE 10
slide-11
SLIDE 11

Keyboard navigation

  • Tab

  • Shift + Tab

  • Enter
slide-12
SLIDE 12

bit.ly/shopify-dp

slide-13
SLIDE 13

Navigation hardware

  • Touchscreens

  • Mouth sticks 

  • Foot-operated mice
slide-14
SLIDE 14

Switch inputs

  • Mechanical buttons 

  • Foot plates 

  • Electronic sensors
slide-15
SLIDE 15

Trackers

  • Eye

  • Head 

  • Dwell Control
slide-16
SLIDE 16

Accessibility can be intimidating

slide-17
SLIDE 17

Dave Rupert, The A11y Project

bit.ly/a11y-myths

“Accessibility is often viewed as making your site work on screen readers. In reality, web accessibility is a subset of UX focused on making your websites usable by the widest range of people possible, including those who have disabilities.”

slide-18
SLIDE 18
  • Visual

  • Auditory

  • Motor

  • Cognitive

bit.ly/a11y-myths

slide-19
SLIDE 19

There's also a business case for a11y

bit.ly/w3-bcase

slide-20
SLIDE 20

Structure and hierarchy

slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23

HTML - HyperText Markup Language

bit.ly/a11yfore

slide-24
SLIDE 24
  • h1

  • nav

  • aside

  • ul / ol
slide-25
SLIDE 25

bit.ly/react-gs

slide-26
SLIDE 26

bit.ly/react-gs

slide-27
SLIDE 27

Avoid <div> and <span> elements when possible

slide-28
SLIDE 28

Focus indicators

slide-29
SLIDE 29

bit.ly/stripe-connect

slide-30
SLIDE 30
  • Links

  • Form fields 

  • Widgets

  • Buttons 

  • Menu items
slide-31
SLIDE 31

gov.uk

slide-32
SLIDE 32
  • Can I tab through the page without

getting lost? 


  • Do all focusable elements have

focus states? 


  • Can I operate menus, forms,

buttons, etc with just my keyboard?

slide-33
SLIDE 33

Images

slide-34
SLIDE 34

alt tags

slide-35
SLIDE 35

bit.ly/robothugs-tweet

slide-36
SLIDE 36

Forecast for Toronto temperatures, showing -18 C today improving to -1 C by Tuesday.

bit.ly/robothugs-tweet

slide-37
SLIDE 37

bit.ly/robothugs-tweet

slide-38
SLIDE 38

8 headshots of featured conference speakers that are all white and male.

bit.ly/robothugs-tweet

slide-39
SLIDE 39
  • Don’t say ‘Image of’ or ‘Photo of’ 

  • Describe what the image is conveying

  • Keep it short

  • Any description is better than no

description

bit.ly/robothugs-tweet

slide-40
SLIDE 40

isthereuber.in

slide-41
SLIDE 41

isthereuber.in

slide-42
SLIDE 42

918e15484df8b5806ef5 612f985260e9.svg

slide-43
SLIDE 43

<img alt=“” src=“globe.svg”>

slide-44
SLIDE 44

Colors

slide-45
SLIDE 45
slide-46
SLIDE 46

trello.com

slide-47
SLIDE 47
slide-48
SLIDE 48
slide-49
SLIDE 49

Inclusive writing

slide-50
SLIDE 50

Plain language

slide-51
SLIDE 51
slide-52
SLIDE 52

“No one has ever complained that something was too easy to read”

Ashley Bischoff, copy editor at The Paciello Group

bit.ly/ashley-fronteers

slide-53
SLIDE 53

Testing for accessibility

slide-54
SLIDE 54

Most assistive technologies are free or inexpensive

slide-55
SLIDE 55
slide-56
SLIDE 56
slide-57
SLIDE 57

Free extensions and validators

slide-58
SLIDE 58
slide-59
SLIDE 59

Use a checklist

slide-60
SLIDE 60
slide-61
SLIDE 61

Terms to know

slide-62
SLIDE 62

WCAG - Web Content Accessibility Guidelines

slide-63
SLIDE 63
slide-64
SLIDE 64

ARIA - Accessible Rich Internet Applications

slide-65
SLIDE 65

<div role=“status"> Your changes were automatically saved. </div>

ARIA example

slide-66
SLIDE 66

A11y community

slide-67
SLIDE 67

Follow Joschi Kuphal @jkphl

slide-68
SLIDE 68

accessibility-club.org

slide-69
SLIDE 69

Monday, August 26 - FREE

slide-70
SLIDE 70

Make accessibility a priority

slide-71
SLIDE 71

Browse the web from a different perspective

slide-72
SLIDE 72
slide-73
SLIDE 73

Final thoughts

slide-74
SLIDE 74

This is for everyone

bit.ly/govuk-dp