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.
Accessibility for people and
bots: Compassion-led
technical SEO
Ashley Berman Hale // DeepCrawl
SLIDESHARE.NET/ASHLEYBERMA...
I have big goals
I have big goals
I have a limited view
I have big goals
I have a limited view
I talk too much
Crawlable
Indexable
Well-Ranked
Accessible
Navigable
Shareable
Visible
Visible Usable
Web Accessibility
The inclusive practice of ensuring there are no barriers that prevent interaction
with, or access to, we...
Web Accessibility
The inclusive practice of ensuring there are no barriers that prevent interaction
with, or access to, we...
Web Accessibility
The inclusive practice of ensuring there are no barriers that prevent interaction
with, or access to, we...
POUR
Perceivable
Operable
Understandable
Robust
Focus on the user and all else will
follow
Impairment
DIS·A·BIL·I·TY
• Visual
• Auditory
• Speech
• Motor
Societal InteractionsImpairment
DIS·A·BIL·I·TY
+
·
·
·
·
Societal InteractionsImpairment
Resulting
Disadvantage
DIS·A·BIL·I·TY
+ =
·
·
·
·
Disabilities can be -
Temporary
Permanent
Progressive
Disability Types*
*A selective smattering
Visual Impairments
Low Vision
Visual Impairments
Low Vision
Visual Impairments
Low Vision
Blindness
Visual Impairments
Low Vision
Blindness
Color-blindness
Visual Impairments
Low Vision
Blindness
Color-blindness
Visual Impairments
Low Vision
Blindness
Color-blindness
Visual Recommendations
• Contrast ≥ 4.5:1
https://contrast-ratio.com/
• Contrast ≥ 4.5:1
• Safe fonts
HTML
• Read
Regular
• Lexie
Readable
• Tiresias
DEFAULT
• Arial
• Helvetica
• Lucida Sans
...
• Contrast ≥ 4.5:1
• Safe fonts
• Do not user color to convey meaning
Visual Recommendations
• Contrast ≥ 4.5:1
• Safe fonts
• Do not user color to convey meaning
• Descriptive links
ノಠ_ಠノ
Visual Recommendations
• Contrast ≥ 4.5:1
• Safe fonts
• Do not user color to convey meaning
• Descriptive links
• Graphics
• No embedded text
• ...
• Contrast ≥ 4.5:1
• Safe fonts
• Do not user color to convey meaning
• Descriptive links
• Graphics
• No embedded text
• ...
• Contrast ≥ 4.5:1
• Safe fonts
• Do not user color to convey meaning
• Descriptive links
• Graphics
• Use alt text
• No e...
• Don’t require the mouse or use onmouseover events
Visual Recommendations
• Don’t require the mouse or use onmouseover events
• Let users skip over long content/menus
Visual Recommendations
• Don’t require the mouse or use onmouseover events
• Let users skip over long content/menus
• Don’t use <iframes> for cor...
• Don’t require the mouse or use onmouseover events
• Let users skip over long content/menus
• Don’t use <iframes> for cor...
• Don’t require the mouse or use onmouseover events
• Let users skip over long content/menus
• Don’t use <iframes> for cor...
Black Holes & Irksome Bits
• PDFs
• Flash
• Images
• Captchas
• Cookie Prompts
Visual Tests
• Check contrast
• https://contrast-ratio.com/
• 4.5:1
Visual Tests
• Check contrast
• https://contrast-ratio.com/
• 4.5:1
• Check screen magnifiers
Visual Tests
• Check contrast
• https://contrast-ratio.com/
• 4.5:1
• Check screen magnifiers
• NVDA or accessibility sett...
Visual Tools & Resources
• OS Built-Ins
• Chrome Extensions
• Programmer & Designer Toolkits
• Organizations
&
• Articles
...
Visual Accessibility Audience
As of 2012 –
• 285M visually impaired people WW
• 39M are blind
Auditory Impairments
Spectrum hearing loss
Mild – 30db
Moderate – 50db
Severe – 80db
Profound – 95db
Auditory Impairments
Spectrum hearing loss
Mild
Moderate
Severe
Profound
Tone deafness
High tone
Low tone
Meet Q
https://www.genderlessvoice.com
Auditory Recommendations
• Subtitles
Auditory Recommendations
• Subtitles
• Closed captions
Auditory Recommendations
• Subtitles
• Closed captions
• Transcripts
Auditory Recommendations
• Subtitles
• Closed captions
• Transcripts
• Visible and functional controls
Auditory Recommendations
• Subtitles
• Closed captions
• Transcripts
• Visible and functional controls
• Alternative conta...
Auditory Tests
• Turn the volume down
Auditory Tools
• Use YouTube!
Auditory Accessibility Audience
• YouTube
• Auto-generated
• Rewards!
• Subtitles = Increase in watch time of 40%
• Facebo...
Speech Impairments
Impediments
Lisping
Accents
Dysarthria / Aphasia / Apraxia
Muteness
st-st-st
Speech Recommendations
• Simple requirements
• Alternative input
Test:
• Use a voice-generating computer device to simulat...
Speech Accessibility Audience
• >1% of the total population stutter or stammer
• Men are 4x’s likely
• 10% of the populati...
Motor Impairments
• Arthritis
• Tremor
• Parkinson’s
• ALS
• MS
• Palsy
• Quadriplegia
Motor Recommendations
• Don’t require a mouse
Motor Recommendations
• Don’t require a mouse
• Use large link targets
hyperlink
Motor Recommendations
• Don’t require a mouse
• Use large link targets
• Use a focus state for links
a:active, a:focus {ba...
Motor Recommendations
• Don’t require a mouse
• Use large link targets
• Use a focus state for links
• ‘Skip to Content’
a...
Motor Recommendations
• Don’t require a mouse
• Use large link targets
• Use a focus state for links
• ‘Skip to Content’
•...
Motor Recommendations
• Don’t require a mouse
• Use large link targets
• Use a focus state for links
• ‘Skip to Content’
•...
Motor Recommendations
• Don’t require a mouse
• Use large link targets
• Use a focus state for links
• ‘Skip to Content’
•...
Motor Recommendations
• Don’t require a mouse
• Use large link targets
• Use a focus state for links
• ‘Skip to Content’
•...
Motor Tools
• Mouth stick
• Head wand
Motor Tools
• Mouth stick
• Head wand
• Single-switch access
• Sip and puff switch
Motor Tools
• Mouth stick
• Head wand
• Single-switch access
• Sip and puff switch
• Oversized trackball mouse
• Adaptive ...
Motor Tools
• Mouth stick
• Head wand
• Single-switch access
• Sip and puff switch
• Oversized trackball mouse
• Adaptive ...
Motor Accessibility Audience
• ~15% of adults have physical functioning difficulties
• 10M adults with Parkinson’s
• 350M ...
The Why
The Why
The Why
@BermanHale
Brighton SEO - Sep 2019 - Accessibility & Technical SEO
Brighton SEO - Sep 2019 - Accessibility & Technical SEO
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Brighton SEO - Sep 2019 - Accessibility & Technical SEO

Download to read offline

Compassion-led programming

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • autoschieber

    Oct. 20, 2019
  • cre8pc

    Sep. 30, 2019
  • jonhenshaw

    Sep. 30, 2019
  • ManuelPrietoHinojosa

    Sep. 26, 2019
  • TonyHudson11

    Sep. 23, 2019
  • YanivGoldenberg

    Sep. 19, 2019
  • carralon

    Sep. 19, 2019
  • ChristopherRegan1

    Sep. 18, 2019
  • matijazajsek3

    Sep. 17, 2019
  • SvetlanaWilson

    Sep. 17, 2019
  • ChristosMargaritis2

    Sep. 16, 2019

Compassion-led programming

Views

Total views

7,505

On Slideshare

0

From embeds

0

Number of embeds

5,525

Actions

Downloads

74

Shares

0

Comments

0

Likes

11

×