Intro to Web Accessibility
Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
We are here for you!
Every question is important
Help each other
Tell us about yourself.
Who are you?
What do you hope to get out of the class?
What is your favorite 80's song?
What is accessibility?
Accessibility is about making your sites useful to as many people as possible.
Accessibility is about overcoming barriers.
Accessibility is about helping your users.
Why make your sites accessible?
Expand your potential audience! 54 million people in the US have a disability, 1.8 million are unable to see printed words, and 16.1 million have a cognitive or mental illness that impedes daily functioning (
source). opens in a new window Be in compliance with legal guidelines, like Section 504/508 and WCAG 2.0.
potential lawsuits opens in a new window. Do the right thing.
Useful stats from the Census Bureau:
54 million people have a disability--19 percent of the civilian noninstitutionalized population. This increases with age:
5 percent of children 5 to 17 have disabilities.
10 percent of people 18 to 64 have disabilities.
38 percent of adults 65 and older have disabilities.
1.8 million people 15 and older are unable to see printed words.
1 million people 15 and older are unable to hear conversations.
2.5 million have difficulty having their speech understood.
16.1 million have limitations in cognitive functioning or who have a mental or emotional illness.
Legal issues: Some sites, like Target, have been sued under the Americans with Disabilities Act (ADA)
Accessibility is for everyone!
Sylvia Pellicore cc opens in a new window
Ask if people recognize curb cut, then point out that while wheelchairs use them, so do strollers, people with luggage, etc. Mention how accessibility can help the non-disabled as well.
Benefits of Accessibility
Curb cuts were designed for wheelchairs, but others use them. Similarly, accessibility features end up helping everyone.
Many times, good design practices create accessibility as a side effect.
Accessibility features, like good alt text, can improve your search engine placement.
Types of Disability
Visual disabilities: blind or low-sight, color blind
Hearing disabilities: deaf or hard-of-hearing
Physical disabilities: MS, paraplegic/quadriplegic, epilepsy
Cognitive disabilities: dyslexia, low literacy, learning disabilities
Accessibility is a continuum, not a checkbox
Matt Carman opens in a new window cc opens in a new window
Accessibility checkers can help, but they are not a full subsititute for manual testing.
You don't have to be perfect to be helping. No site will be perfectly accessible for everyone in the world.
What assitive technology do people use?
High contrast displays
Low vision is very common
Even people who are legally blind may have some residual vision
Screen readers are also useful for people with print disabilities, like dyslexia
Choose a site with a complex nav menu, and show how long it takes to get through with a screen reader. I used CNN.com and NVDA for this demo, but any common screen reader will work.
Let's try it
Screen reader simulation opens in a new window
Have students try the screenreader demo at http://webaim.org/simulations/screenreader-sim.htm. (With headphones!) You may have to help people install the Shockwave plugin. Time limit to ten minutes, and cut it short if students seem bored or frustrated.
If available, demo VoiceOver on the iPhone/iPad or Talkback on Android.
Alternate text describes pictorial content in words.
Pay attention to context.
function, not the content. If an image is purely decorative, use
alt="" to instruct a screen reader to skip it.
Instead of using "longdesc," provide a caption or link. Consider HTML5
<img src="location.jpg" alt="brief description">
Let's try it
Provide alt text for the images on your handout.
Other tips for screen readers
Headings skip-nav links and landmark roles give users a way to navigate through a page.
Content is more than just visual.
External link indicators prevent unexpected page changes.
Tables can be hard to navigate, so only use them for tabular data.
Many users are switching to touch-screen based readers like
VoiceOver on iOS. opens in a new window
More on visual disabilities
If you use color to indicate something, also use another indicator. For example, underline links on hover or mark a required field with an asterisk.
Red/green color blindness is the most common, so avoid green on red.
Include color names in product descriptions and show examples (
article) opens in a new window Have a
minimum of contrast ratio of 4.5:1 for normal text and 3:1 for large text. ( Checker) opens in a new window Try zooming in on your designs, to see how they look when enlarged. It is a good idea to use ems and percentages instead of pixels when you can.
No, automatic captions don't count
Credit: Sylvia Pellicore, from YouTube
Most deaf or hard-of-hearing people have limited difficulty with web accessibility.
Provide captions or transcripts for multimedia elements.
Don't rely on sounds to convey information, like an "alert" noise. Even hearing users often have their computers muted.
Be especially careful if your site targets older users, as hearing loss is common.
Paid captioning services are relatively inexpensive, about $1.50 to $2.50 a minute.
Many users with limited mobility interact with the screen via keyboard.
Other users use a mouse, but have trouble with fine motor control.
Make clickable elements large, and put space between them.
Avoid clickable page elements that move.
Animations with rapid flickers are not only annoying, they can trigger epileptic seizures.
These guidelines also help children and touchscreen users!
Dealing with cognitive disabilities
This is a less-researched area of web accessibility. Here is a
Cognitive 101. Minimize cognitive load--don't overwhelm the user.
Use common icons to mark important tasks and consider text labels.
If you have timed content (forms, image galleries, etc.) provide controls or allow users to extend time.
CAPTCHAs aren't blind-friendly, are very difficult for users with learning disabilities like dyslexia, and annoy everyone. Consider
an alternative method. opens in a new window
Let's try it
Visit a site you use frequently. Identify one accessibility feature that is part of the site and one feature you would change.
Students can do this activity alone or in pairs, depending on the size of the class. If people get stuck, recommend:
Depending on time, you can have each group present on what they found.