Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (15)
Similaire à Brighton SEO - Sep 2019 - Accessibility & Technical SEO
Similaire à Brighton SEO - Sep 2019 - Accessibility & Technical SEO (20)
Dernier
Dernier (20)
Brighton SEO - Sep 2019 - Accessibility & Technical SEO
- 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
- 7. Visible
- 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)
- 13. Focus on the user and all else will follow
- 14. Impairment DIS·A·BIL·I·TY • Visual • Auditory • Speech • Motor
- 17. Disabilities can be - Temporary Permanent Progressive
- 18. Disability Types* *A selective smattering
- 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
- 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
Notes de l'éditeur
- 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