Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Brighton SEO - Sep 2019 - Accessibility & Technical SEO

3,683 views

Published on

Compassion-led programming

Published in: Technology
  • Be the first to comment

Brighton SEO - Sep 2019 - Accessibility & Technical SEO

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

×