Pro Yearly is on sale from $80 to $50! »

Accessibility & Technical SEO

6b68737f9aacb94936b269f2592da891?s=47 DDavydoff
September 20, 2019

Accessibility & Technical SEO

6b68737f9aacb94936b269f2592da891?s=128

DDavydoff

September 20, 2019
Tweet

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

  19. None
  20. None
  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