Accessibility & Technical SEO

Slide 1

Slide 1 text

Accessibility for people and bots: Compassion-led technical SEO Ashley Berman Hale // DeepCrawl SLIDESHARE.NET/ASHLEYBERMANHALE @BermanHale

Slide 2

Slide 2 text

I have big goals

Slide 3

Slide 3 text

I have big goals I have a limited view

Slide 4

Slide 4 text

I have big goals I have a limited view I talk too much

Slide 5

Slide 5 text

Crawlable Indexable Well-Ranked

Slide 6

Slide 6 text

Accessible Navigable Shareable

Slide 7

Slide 7 text

Visible

Slide 8

Slide 8 text

Visible Usable

Slide 9

Slide 9 text

Web Accessibility The inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Web Accessibility The inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality Access to information and communications technologies is defined as a basic human right in the United Nations Convention on the Rights of Persons with Disabilities (UN CRPD)

Slide 12

Slide 12 text

POUR Perceivable Operable Understandable Robust

Slide 13

Slide 13 text

Focus on the user and all else will follow

Slide 14

Slide 14 text

Impairment DIS·A·BIL·I·TY • Visual • Auditory • Speech • Motor

Slide 15

Slide 15 text

Societal Interactions Impairment DIS·A·BIL·I·TY + · · · ·

Slide 16

Slide 16 text

Societal Interactions Impairment Resulting Disadvantage DIS·A·BIL·I·TY + = · · · ·

Slide 17

Slide 17 text

Disabilities can be - Temporary Permanent Progressive

Slide 18

Slide 18 text

Disability Types* *A selective smattering

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Visual Impairments Low Vision

Slide 22

Slide 22 text

Visual Impairments Low Vision

Slide 23

Slide 23 text

Visual Impairments Low Vision Blindness

Slide 24

Slide 24 text

Visual Impairments Low Vision Blindness Color-blindness

Slide 25

Slide 25 text

Visual Impairments Low Vision Blindness Color-blindness

Slide 26

Slide 26 text

Visual Impairments Low Vision Blindness Color-blindness

Slide 27

Slide 27 text

Visual Recommendations • Contrast ≥ 4.5:1 https://contrast-ratio.com/

Slide 28

Slide 28 text

• Contrast ≥ 4.5:1 • Safe fonts HTML • Read Regular • Lexie Readable • Tiresias DEFAULT • Arial • Helvetica • Lucida Sans • Tahoma • Verdana PDFs • Times New Roman • Verdana • Arial • Tahoma • Helvetica • Calibri Visual Recommendations

Slide 29

Slide 29 text

• Contrast ≥ 4.5:1 • Safe fonts • Do not user color to convey meaning Visual Recommendations

Slide 30

Slide 30 text

• Contrast ≥ 4.5:1 • Safe fonts • Do not user color to convey meaning • Descriptive links ノಠ_ಠノ Visual Recommendations

Slide 31

Slide 31 text

• Contrast ≥ 4.5:1 • Safe fonts • Do not user color to convey meaning • Descriptive links • Graphics • No embedded text • Use alt text Visual Recommendations

Slide 32

Slide 32 text

• Contrast ≥ 4.5:1 • Safe fonts • Do not user color to convey meaning • Descriptive links • Graphics • No embedded text • Use alt text Savior of Modern Humanity

Visual Recommendations

Slide 33

Slide 33 text

• Contrast ≥ 4.5:1 • Safe fonts • Do not user color to convey meaning • Descriptive links • Graphics • Use alt text • No embedded text • Configurable text & layouts • Color, size • Percentages vs. absolute units (pixels) Visual Recommendations

Slide 34

Slide 34 text

• Don’t require the mouse or use onmouseover events Visual Recommendations

Slide 35

Slide 35 text

• Don’t require the mouse or use onmouseover events • Let users skip over long content/menus Visual Recommendations

Slide 36

Slide 36 text

• Don’t require the mouse or use onmouseover events • Let users skip over long content/menus • Don’t use for core content Visual Recommendations

Slide 37

Slide 37 text

• Don’t require the mouse or use onmouseover events • Let users skip over long content/menus • Don’t use for core content • Make tables friendly • Data tables • Layout tables Row by row Left to right Use headers Provide summaries Visual Recommendations

Slide 38

Slide 38 text

• Don’t require the mouse or use onmouseover events • Let users skip over long content/menus • Don’t use for core content • Make tables friendly • Data tables • Layout tables • Audio described videos Visual Recommendations

Slide 39

Slide 39 text

Black Holes & Irksome Bits • PDFs • Flash • Images • Captchas • Cookie Prompts

Slide 40

Slide 40 text

Visual Tests • Check contrast • https://contrast-ratio.com/ • 4.5:1

Slide 41

Slide 41 text

Visual Tests • Check contrast • https://contrast-ratio.com/ • 4.5:1 • Check screen magnifiers

Slide 42

Slide 42 text

Visual Tests • Check contrast • https://contrast-ratio.com/ • 4.5:1 • Check screen magnifiers • NVDA or accessibility settings

Slide 43

Slide 43 text

Visual Tools & Resources • OS Built-Ins • Chrome Extensions • Programmer & Designer Toolkits • Organizations & • Articles • Advocates to follow

Slide 44

Slide 44 text

Visual Accessibility Audience As of 2012 – • 285M visually impaired people WW • 39M are blind

Slide 45

Slide 45 text

Auditory Impairments Spectrum hearing loss Mild – 30db Moderate – 50db Severe – 80db Profound – 95db

Slide 46

Slide 46 text

Auditory Impairments Spectrum hearing loss Mild Moderate Severe Profound Tone deafness High tone Low tone

Slide 47

Slide 47 text

Meet Q

Slide 48

Slide 48 text

https://www.genderlessvoice.com

Slide 49

Slide 49 text

Auditory Recommendations • Subtitles

Slide 50

Slide 50 text

Auditory Recommendations • Subtitles • Closed captions

Slide 51

Slide 51 text

Auditory Recommendations • Subtitles • Closed captions • Transcripts

Slide 52

Slide 52 text

Auditory Recommendations • Subtitles • Closed captions • Transcripts • Visible and functional controls

Slide 53

Slide 53 text

Auditory Recommendations • Subtitles • Closed captions • Transcripts • Visible and functional controls • Alternative contact options

Slide 54

Slide 54 text

Auditory Tests • Turn the volume down

Slide 55

Slide 55 text

Auditory Tools • Use YouTube!

Slide 56

Slide 56 text

Auditory Accessibility Audience • YouTube • Auto-generated • Rewards! • Subtitles = Increase in watch time of 40% • Facebook • 85% of videos watched on mute >5% of people (446M) are hearing disabled By 2020: over 900M or 1 in 10

Slide 57

Slide 57 text

Speech Impairments Impediments Lisping Accents Dysarthria / Aphasia / Apraxia Muteness st-st-st

Slide 58

Slide 58 text

Speech Recommendations • Simple requirements • Alternative input Test: • Use a voice-generating computer device to simulate input

Slide 59

Slide 59 text

Speech Accessibility Audience • >1% of the total population stutter or stammer • Men are 4x’s likely • 10% of the population has a lisp • 18M US adults have a hard time using their voices in the last 12 months

Slide 60

Slide 60 text

Motor Impairments • Arthritis • Tremor • Parkinson’s • ALS • MS • Palsy • Quadriplegia

Slide 61

Slide 61 text

Motor Recommendations • Don’t require a mouse

Slide 62

Slide 62 text

Motor Recommendations • Don’t require a mouse • Use large link targets hyperlink

Slide 63

Slide 63 text

Motor Recommendations • Don’t require a mouse • Use large link targets • Use a focus state for links a:active, a:focus {background: yellow;}

Slide 64

Slide 64 text

Motor Recommendations • Don’t require a mouse • Use large link targets • Use a focus state for links • ‘Skip to Content’ a.hide { position: absolute; left: -9000px; top: 0; } a.hide:focus, a.hide:active { left: 0; }

Slide 65

Slide 65 text

Motor Recommendations • Don’t require a mouse • Use large link targets • Use a focus state for links • ‘Skip to Content’ • No auto-play audio/video

Slide 66

Slide 66 text

Motor Recommendations • Don’t require a mouse • Use large link targets • Use a focus state for links • ‘Skip to Content’ • No auto-play audio/video • Use default tabbing order

Slide 67

Slide 67 text

Motor Recommendations • Don’t require a mouse • Use large link targets • Use a focus state for links • ‘Skip to Content’ • No auto-play audio/video • Use default tabbing order • Don’t use shortcut keys

Slide 68

Slide 68 text

Slide 69

Slide 69 text

Motor Tools • Mouth stick • Head wand

Slide 70

Slide 70 text

Motor Tools • Mouth stick • Head wand • Single-switch access • Sip and puff switch

Slide 71

Slide 71 text

Motor Tools • Mouth stick • Head wand • Single-switch access • Sip and puff switch • Oversized trackball mouse • Adaptive keyboard

Slide 72

Slide 72 text

Motor Tools • Mouth stick • Head wand • Single-switch access • Sip and puff switch • Oversized trackball mouse • Adaptive keyboard • Eye-tracking • Voice recognition software

Slide 73

Slide 73 text

Motor Accessibility Audience • ~15% of adults have physical functioning difficulties • 10M adults with Parkinson’s • 350M people with arthritis • Stroke is the leading cause of long-term serious disability in the US