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 full-size slide

  2. I have big goals

    View full-size slide

  3. I have big goals
    I have a limited view

    View full-size slide

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

    View full-size slide

  5. Crawlable
    Indexable
    Well-Ranked

    View full-size slide

  6. Accessible
    Navigable
    Shareable

    View full-size slide

  7. Visible Usable

    View full-size slide

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

    View full-size slide

  9. 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 full-size 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
    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 full-size slide

  11. POUR
    Perceivable
    Operable
    Understandable
    Robust

    View full-size slide

  12. Focus on the user and all else will
    follow

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Disabilities can be -
    Temporary
    Permanent
    Progressive

    View full-size slide

  17. Disability Types*
    *A selective smattering

    View full-size slide

  18. Visual Impairments
    Low Vision

    View full-size slide

  19. Visual Impairments
    Low Vision

    View full-size slide

  20. Visual Impairments
    Low Vision
    Blindness

    View full-size slide

  21. Visual Impairments
    Low Vision
    Blindness
    Color-blindness

    View full-size slide

  22. Visual Impairments
    Low Vision
    Blindness
    Color-blindness

    View full-size slide

  23. Visual Impairments
    Low Vision
    Blindness
    Color-blindness

    View full-size slide

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

    View full-size slide

  25. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  28. • 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 full-size slide

  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

    View full-size slide

  30. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  33. • 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 full-size slide

  34. • 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 full-size slide

  35. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. https://www.genderlessvoice.com

    View full-size slide

  45. Auditory Recommendations
    • Subtitles

    View full-size slide

  46. Auditory Recommendations
    • Subtitles
    • Closed captions

    View full-size slide

  47. Auditory Recommendations
    • Subtitles
    • Closed captions
    • Transcripts

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. Auditory Tests
    • Turn the volume down

    View full-size slide

  51. Auditory Tools
    • Use YouTube!

    View full-size slide

  52. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  55. 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 full-size slide

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

    View full-size slide

  57. Motor Recommendations
    • Don’t require a mouse

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. 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 full-size slide

  61. 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 full-size slide

  62. 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 full-size slide

  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
    • Use default tabbing order
    • Don’t use shortcut keys

    View full-size slide

  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
    • Don’t use shortcut keys
    • Extend session timeouts

    View full-size slide

  65. Motor Tools
    • Mouth stick
    • Head wand

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. 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 full-size slide