Intro to Web Accessibility
Class 1
Welcome!
Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
Some "rules"
- We are here for you!
- Every question is important
- Help each other
- Have fun
Introductions
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.
- Avoid potential lawsuits opens in a new window.
- Do the right thing.
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
Let's try it
Use a Screenreader
Alt text
- Alternate text describes pictorial content in words.
- Pay attention to context.
- Describe the function, not the content.
- If an image is purely decorative, use
alt=""
to instruct a screen reader to skip it.
- Consider providing a caption or link with HTML5
figure
and figcaption
.
<img src="location.jpg" alt="brief description">
<figure>
<img src="location.jpg">
<figcaption>brief description</figcaption>
</figure>
Other tips for screen readers
- Headings, skip links and landmark roles provide different ways to navigate through a page.
- Think of your HTML page as an information hierarchy.
- 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 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.
Hearing Disabilities
- Most deaf or hard-of-hearing people have limited difficulty with web accessibility.
- Provide captions or transcripts for multimedia elements. This includes podcasts and videos!
- 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.
Return to Table of Contents
Physical Disabilities
- 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!
Return to Table of Contents
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.
Return to Table of Contents