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)
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
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
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
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
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
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
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