Successfully reported this slideshow.
Your SlideShare is downloading. ×

Brighton SEO - Sep 2019 - Accessibility & Technical SEO

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 77 Ad
Advertisement

More Related Content

Slideshows for you (15)

Similar to Brighton SEO - Sep 2019 - Accessibility & Technical SEO (20)

Advertisement

Recently uploaded (20)

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

Editor's Notes

  • My goal is come to a common definition/understanding of core accessibility issues, layout useful tests and tools, highlight actions you can take ASAP, and put you down a path to learn more and to build ongoing compassion.

  • I’m not the expert – either in professional practice or my personal life
    But I’m striving and I think it’s important and worth everyone’s time and effort

    But I’ll be including many resources and links to people in our community and beyond that are already consulting on best practices, advocating, testing, and living this life. I hope you follow them and continue to learn from them.
  • I will be tweeting out resources + a link to an open Google doc with all of the links referenced in the presentation

  • In technical SEO, beyond being the most curious and tinkering sort, we want to make sure that content and apps:
    Can be crawled fully and efficiently
    Can be properly understood and indexed
    And to rank – because we want the site/app/etc. to get in front of as many people as possible
  • In technical SEO, beyond being the most curious and tinkering sort, we want to make sure that content and apps:
    In addition to bots, people of various abilities can get to the site and consume information
    In addition to bots, users can get around to the content that they should be able to access
    And going further than just getting the website in front of people, we want to put it into people’s hands
  • When I ask Technical SEOs to focus more on accessibility I’m asking them to make websites not just visible, but usable. I’m asking them to be more human.
    And this is at the core of web accessibility
  • When I ask Technical SEOs to focus more on accessibility I’m asking them to make websites not just visible, but usable. I’m asking them to be more human.
    And this is at the core of web accessibility
  • Per https://en.m.wikipedia.org/wiki/Web_accessibility
    Inclusive – including all disabilities
    If we do our job and make amazing sites – everyone should have access (we’re used to talking about this with CSR and SSR, but this goes beyond bots)
  • Per https://en.m.wikipedia.org/wiki/Web_accessibility
    Inclusive – including all disabilities
    If we do our job and make amazing sites – everyone should have access (we’re used to talking about this with CSR and SSR, but this goes beyond bots)
  • Per https://en.m.wikipedia.org/wiki/Web_accessibility
    Inclusive – including all disabilities
    If we do our job and make amazing sites – everyone should have access (we’re used to talking about this with CSR and SSR, but this goes beyond bots)
  • G has been saying it all along –
    But this allows you to truly follow REAL users, including potential friends, family, and self

    Having a disability places you in the world's largest minority group. Currently around 10% of the world's population, or roughly 650 million people, live with a disability
  • First we need to understand what I mean when I talk about disability
    Can be a lot of things but we’re going to focus on visual, speech, Auditory, motor function
    It’s not just a health problem – it’s the interaction with the impaired and the features of the society that they live in.

  • First we need to understand what I mean when I talk about disability
    Can be a lot of things but we’re going to focus on visual, speech, Auditory, motor function
    It’s not just a health problem – it’s the interaction with the impaired and the features of the society that they live in.

  • First we need to understand what I mean when I talk about disability
    Can be a lot of things but we’re going to focus on visual, speech, Auditory, motor function
    It’s not just a health problem – it’s the interaction with the impaired and the features of the society that they live in.

  • But first – how many of you use assistive technology on a regular bases?
    Ok, how many of you wear glasses or contacts?
    Do you use lined paper? Pencil grips?
    Hearing aids
    Closed captioning
    Ergonomic keyboards/mouse
    Voice search
  • All of these are assistive technology
  • 20/30 to 20/60, this is considered mild vision loss, or near-normal vision
    20/70 to 20/160, this is considered moderate visual impairment, or moderate low vision
    20/200 or worse, this is considered severe visual impairment, or severe low vision
    20/500 to 20/1000, this is considered profound visual impairment or profound low vision
    Less than 20/1000, this is considered near-total visual impairment or near total low vision
    No light perception, this is considered total visual impairment, or total blindness

  • The four leading causes of legal blindness in the United States are:
    Age-related macular degeneration (AMD or ARMD)
    Cataracts
    Diabetic retinopathy
    Glaucoma
  • If you're unable to read the top line on an eye chart, you've got 20/200 vision, which makes you legally blind in the US.
  • Read Regular, Lexie Readable, and Tiresias > fonts that have been created with readers with dyslexia or visual impairments in mind.
    https://www.fontsquirrel.com/fonts/list/foundry/the-royal-national-institute-for-the-blind
  • Red and green are the two most problematic issues for people who have different types of color blindness
  • Frames can’t be seen at once with the site – they needed to be visited separately
  • Data tables, with properly labeled columns and rows, are generally not the issue. Layout tables often have no or illogical headers and are difficult for those using screen readers
    Note with layout tables PROPER H tag use, etc. - not just for text styling
  • https://www.youtube.com/watch?v=ELjffBeZsoQ
  • Sunil described a wonderful Twitter account where he is able to copy and paste CAPTCHA images to, a sighted user replies with the word, so he is able to overcome the barriers he faces. This felt to me rather an unfortunate work around. CAPTCHAs featuring text based logic questions “what is 1+2” or “what is today’s date” he described as much more accessible solutions.
    https://medium.com/@pdjohnson/using-the-internet-as-a-blind-person-fc4e09e294f0
  • ZoomText
    MAGic
  • NVDA – NonVisual Desktop Access – non-profit from Australia and it’s an awesome resource for developers to experience their website the way a visually impaired person would.

    Screen for twitter on how to turn on Accessibility features for Android and iOS phones
  • https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg
    http://chromelens.xyz/ > filters, scanners & audits, and trackers to see the flow of tab-shift-tab navigation through the site
    https://chrome.google.com/webstore/detail/color-enhancer/ipkjmjaledkapilfdigkgfmpekpfnkih
    Narrator is basic and not great, JAWS is best but NVAccess is free
    Apple’s is awesome and is even enhanced to handle interactive gestures
    Vinux is a Linux distro that combines these technologies for an easy-to-set-up accessible computer. Released by the UK Vision Strategy, the distro is an Ubuntu variant.
    What Vinux provides is a pre-configured accessible environment. This makes it much easier to set up and configure a new PC for a visually impaired user than existing Linux distros.
  • Note that 90% of the blind people live in developing countries
  • https://www.noisehelp.com/noise-level-chart.html
    https://www.audicus.com/noise-levels-of-everyday-sounds/
  • You can change the voice of your Google Assistant – but only in the US
    Google & Siri have a male and female voice for SOME languages
    Alexa only has a male voice for English
    https://www.npr.org/2019/03/21/705395100/meet-q-the-gender-neutral-voice-assistant
  • Conversation Starter
  • Conversation Starter
  • Just dialog
    Often translated language

    Explain that bad subtitles or captions create cognitive dissonance
  • CC goes beyond the dialog to explain who is talking and other noises in the scene
  • Transcripts offer a text-reliant output for media that has audible elements
  • Don’t be clever
    Don’t hide controls
    And TEST all of your controls to make sure they work (across devices/browsers)
  • Don’t be clever
    Don’t hide controls
    And TEST all of your controls to make sure they work (across devices/browsers)
  • https://support.google.com/youtube/topic/9257536
  • YouTube has a CC button that indicates whether or not a video has captions available — and the platform rewards content-uploaders for providing closed captions by increasing the video’s rank in search queries.
    For example, although YouTube has an auto-generated captions option, they still need to be reviewed and edited for accuracy. Yan estimated 85% of Facebook videos are watched on mute. So, who benefits from these tools? In short, everyone.
  • Estimated that 3M Americans stutter
    Estimated 1M Americans have some form of Aphasia
    Dysarthria/Aphasia often related to palsy, stroke or autism
    64% of kids with autism suffer from speech Apraxia
  • (many are using augmentative or alternative communication (AAC)
  • By a strict classification,[citation needed] only 5% to 10% of the population has a completely normal manner of speaking (with respect to all parameters) and healthy voice; all others suffer from one disorder or another.
    Marilyn Monroe & Jimmy Stuart stuttered
    James Earl Jones was mute for 8 years of his childhood due to severe stutter
  • Head wands, mouth sticks, adaptive keyboards, can’t use a mouse, voice recognition software
    Shaking, slow, jerky, stiffness, lack of fine motor control

    TRY THIS: https://webaim.org/articles/motor/assistive
  • Make sure that functions emulate a keyboard and that a mechanism to undo or abort an action is provided.
    https://www.webcredible.com/blog/improving-accessibility-motor-impaired-users/
    https://theweco.com/designing-websites-for-motor-skill-disabilities/
    https://www.interactiveaccessibility.com/blog/5-tips-improve-web-mobilitydexterity-disabilities#.XXcMFZNKhZI
    https://accessibility.huit.harvard.edu/disabilities/motor-impairment
    https://accessibility.huit.harvard.edu/disabilities/motor-impairment
  • Convert inline elements to block By assigning the CSS command display: block to each link in a vertical list, the full width of the column becomes clickable (as opposed to just the text itself). 
    Use JS to increase the link target area
  • Assigning a background colour to focused links is probably the most important thing you can do for keyboard-only users tabbing through web pages. When users tab on to any one link this background colour will display, clearly highlighting where the user is.
  • Provide a visible 'skip to content' link
    'Skip to content' links have historically targeted screen reader users, yet are also useful for motor impaired users. A skip link is an invisible link that allows screen reader users to jump over the navigation on each page and get straight to the main content.
    Skip links are very useful for keyboard-only users but only if they're made visible when focused on(otherwise how will they know the link exists?). If the link is assigned class="hide" then the following CSS code can be used to hide the link but then make it appear when users tab on to it:
  • If pages on your website start to play audio without users knowing about this in advance then this can severely conflict with the voice recognition software.
  • Don't change the tab order (unless you have a very good reason to do so)
    Keyboard-only users tab through links and form items in the order in which they're placed in the HTML source code.

    The tabindex attribute can be used to change the on-page tabbing order but is rarely necessary. Items with the tabindex attribute assigned to them get tabbed to first in order of hierarchy, regardless of their position in the HTML source code.
    The only logical reason to change the tab order is if 95%+ of users go straight to one particular item on the page (e.g. a search form).
  • The problem with access keys is there's no convention so the few sites that use them do so in whichever way they choose. Site visitors are unlikely to spend the time getting accustomed to your website's particular access keys and access keys can also override keyboard shortcuts for screen readers.
  • It can take longer for those with motor impairments to complete actions so be careful with short session times
  • U.S. Physical Impairment Statistics
    Non-institutionalized adults 18 years and older: Difficulties in physical functioning:
    Number of adults unable (or very difficult) to walk a quarter mile: 17.2 million
    Percent of adults unable (or very difficult) to walk a quarter mile: 7.3%
    Number of adults with any physical functioning difficulty: 35.2 million
    Percent of adults with any physical functioning difficulty: 15.0%
    Non-institutionalized adults 18 years and older: Basic or complex activity limitations:
    Number of adults with at least one basic actions difficulty or complex activity limitation: 73.5 million (2012)
    Percent of adults with at least one basic actions difficulty or complex activity limitation: 31.9% (2012)
    Non-institutionalized adults 65 years and older: Need help with personal care:
    Percent of adults 65-74 years who need help with personal care from other persons: 3.3%
    Percent of adults 75 years and over who need help with personal care from other persons: 10.5%
  • Do it to be compassionate
    T be a good human and a good world citizen
  • More than 280 million people worldwide are visually impaired. That means that 1 in 26 people who surf your website will not be able to see it as you do. >>> add more info on how many people you’d potentially be excluding
  • Legal repercussions are serious and more of them are coming
  • Accessibility FOR OUR FUTURE SELVES
    In the US, approximately 13% (nearly 55M in the US) of the population has a disability per the CDC

    I’ll be tweeting out lists of communities to join or read
    https://support.google.com/accessibility/answer/9248846
    https://docs.google.com/forms/d/e/1FAIpQLSfcb-l0mCZ__09SSyFAuI_k2WBLR05URYbR_Stv9N42u7GTiw/viewform

×