Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility & Technical SEO

DDavydoff
September 20, 2019

Accessibility & Technical SEO

DDavydoff

September 20, 2019
Tweet

More Decks by DDavydoff

Other Decks in Technology

Transcript

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

    View Slide

  2. I have big goals

    View Slide

  3. I have big goals
    I have a limited view

    View Slide

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

    View Slide

  5. Crawlable
    Indexable
    Well-Ranked

    View Slide

  6. Accessible
    Navigable
    Shareable

    View Slide

  7. Visible

    View Slide

  8. Visible Usable

    View Slide

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

    View Slide

  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

    View Slide

  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)

    View Slide

  12. POUR
    Perceivable
    Operable
    Understandable
    Robust

    View Slide

  13. Focus on the user and all else will
    follow

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. Disabilities can be -
    Temporary
    Permanent
    Progressive

    View Slide

  18. Disability Types*
    *A selective smattering

    View Slide

  19. View Slide

  20. View Slide

  21. Visual Impairments
    Low Vision

    View Slide

  22. Visual Impairments
    Low Vision

    View Slide

  23. Visual Impairments
    Low Vision
    Blindness

    View Slide

  24. Visual Impairments
    Low Vision
    Blindness
    Color-blindness

    View Slide

  25. Visual Impairments
    Low Vision
    Blindness
    Color-blindness

    View Slide

  26. Visual Impairments
    Low Vision
    Blindness
    Color-blindness

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    Visual Recommendations

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. • 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

    View Slide

  38. • 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  47. Meet Q

    View Slide

  48. https://www.genderlessvoice.com

    View Slide

  49. Auditory Recommendations
    • Subtitles

    View Slide

  50. Auditory Recommendations
    • Subtitles
    • Closed captions

    View Slide

  51. Auditory Recommendations
    • Subtitles
    • Closed captions
    • Transcripts

    View Slide

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

    View Slide

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

    View Slide

  54. Auditory Tests
    • Turn the volume down

    View Slide

  55. Auditory Tools
    • Use YouTube!

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  61. Motor Recommendations
    • Don’t require a mouse

    View Slide

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

    View Slide

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

    View Slide

  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;
    }

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  69. Motor Tools
    • Mouth stick
    • Head wand

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  74. The Why

    View Slide

  75. The Why

    View Slide

  76. The Why

    View Slide

  77. @BermanHale

    View Slide