Accessibility & Technical SEO

Transcript

1. Accessibility for people and bots: Compassion-led technical SEO Ashley Berman Hale // DeepCrawl SLIDESHARE.NET/ASHLEYBERMANHALE @BermanHale
2. I have big goals
3. I have big goals I have a limited view
4. I have big goals I have a limited view I talk too much
5. Crawlable Indexable Well-Ranked
6. Accessible Navigable Shareable
7. Visible
8. Visible Usable
9. Web Accessibility The inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites
10. 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
11. 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)
12. POUR Perceivable Operable Understandable Robust
13. Focus on the user and all else will follow
14. Impairment DIS·A·BIL·I·TY • Visual • Auditory • Speech • Motor
15. Societal Interactions Impairment DIS·A·BIL·I·TY + · · · ·
16. Societal Interactions Impairment Resulting Disadvantage DIS·A·BIL·I·TY + = · · · ·
17. Disabilities can be - Temporary Permanent Progressive
18. Disability Types* *A selective smattering
21. Visual Impairments Low Vision
22. Visual Impairments Low Vision
23. Visual Impairments Low Vision Blindness
24. Visual Impairments Low Vision Blindness Color-blindness
25. Visual Impairments Low Vision Blindness Color-blindness
26. Visual Impairments Low Vision Blindness Color-blindness
27. Visual Recommendations • Contrast ≥ 4.5:1 https://contrast-ratio.com/
28. • 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
29. • Contrast ≥ 4.5:1 • Safe fonts • Do not user color to convey meaning Visual Recommendations
30. • Contrast ≥ 4.5:1 • Safe fonts • Do not user color to convey meaning • Descriptive links ノಠ_ಠノ Visual Recommendations
31. • Contrast ≥ 4.5:1 • Safe fonts • Do not user color to convey meaning • Descriptive links • Graphics • No embedded text • Use alt text Visual Recommendations
32. • Contrast ≥ 4.5:1 • Safe fonts • Do not user color to convey meaning • Descriptive links • Graphics • No embedded text • Use alt text <img src="/lizzo.jpg" alt="Savior of Modern Humanity"> Visual Recommendations
33. • 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
34. • Don’t require the mouse or use onmouseover events Visual Recommendations
35. • Don’t require the mouse or use onmouseover events • Let users skip over long content/menus Visual Recommendations
36. • Don’t require the mouse or use onmouseover events • Let users skip over long content/menus • Don’t use <iframes> for core content Visual Recommendations
37. • Don’t require the mouse or use onmouseover events • Let users skip over long content/menus • Don’t use <iframes> for core content • Make tables friendly • Data tables • Layout tables Row by row Left to right Use headers Provide summaries Visual Recommendations
38. • Don’t require the mouse or use onmouseover events • Let users skip over long content/menus • Don’t use <iframes> for core content • Make tables friendly • Data tables • Layout tables • Audio described videos Visual Recommendations
39. Black Holes & Irksome Bits • PDFs • Flash • Images • Captchas • Cookie Prompts
40. Visual Tests • Check contrast • https://contrast-ratio.com/ • 4.5:1
41. Visual Tests • Check contrast • https://contrast-ratio.com/ • 4.5:1 • Check screen magnifiers
42. Visual Tests • Check contrast • https://contrast-ratio.com/ • 4.5:1 • Check screen magnifiers • NVDA or accessibility settings
43. Visual Tools & Resources • OS Built-Ins • Chrome Extensions • Programmer & Designer Toolkits • Organizations & • Articles • Advocates to follow
44. Visual Accessibility Audience As of 2012 – • 285M visually impaired people WW • 39M are blind
45. Auditory Impairments Spectrum hearing loss Mild – 30db Moderate – 50db Severe – 80db Profound – 95db
46. Auditory Impairments Spectrum hearing loss Mild Moderate Severe Profound Tone deafness High tone Low tone
47. Meet Q
48. https://www.genderlessvoice.com
49. Auditory Recommendations • Subtitles
50. Auditory Recommendations • Subtitles • Closed captions
51. Auditory Recommendations • Subtitles • Closed captions • Transcripts
52. Auditory Recommendations • Subtitles • Closed captions • Transcripts • Visible and functional controls
53. Auditory Recommendations • Subtitles • Closed captions • Transcripts • Visible and functional controls • Alternative contact options
54. Auditory Tests • Turn the volume down
55. Auditory Tools • Use YouTube!
56. 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
57. Speech Impairments Impediments Lisping Accents Dysarthria / Aphasia / Apraxia Muteness st-st-st
58. Speech Recommendations • Simple requirements • Alternative input Test: • Use a voice-generating computer device to simulate input
59. 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
60. Motor Impairments • Arthritis • Tremor • Parkinson’s • ALS • MS • Palsy • Quadriplegia
61. Motor Recommendations • Don’t require a mouse
62. Motor Recommendations • Don’t require a mouse • Use large link targets hyperlink
63. Motor Recommendations • Don’t require a mouse • Use large link targets • Use a focus state for links a:active, a:focus {background: yellow;}
64. 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; }
65. 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
66. 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
67. 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
68. 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 • Extend session timeouts
69. Motor Tools • Mouth stick • Head wand
70. Motor Tools • Mouth stick • Head wand • Single-switch access • Sip and puff switch
71. Motor Tools • Mouth stick • Head wand • Single-switch access • Sip and puff switch • Oversized trackball mouse • Adaptive keyboard
72. Motor Tools • Mouth stick • Head wand • Single-switch access • Sip and puff switch • Oversized trackball mouse • Adaptive keyboard • Eye-tracking • Voice recognition software
73. 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
74. The Why
75. The Why
76. The Why
77. @BermanHale