Last week, as I dug deep into the depths of the Internet on the prowl for nifty and unique reCAPTCHA alternatives, I was reminded about the issues of web accessibility (and how CAPTCHAs are pretty much the worst thing ever - even for people without visual impairments). I decided to find out how I can make Meta Q more accessible, and in turn, help our awesome readers make their equally awesome sites accessible too.
A few basics:
- Use alt tags and title tags for all images and videos
- Give captions to photos so that the vision-impaired know what they're looking at
- Don't use "click here" for links; provide context like "Download the ebook here"
- Don't set link targets (i.e. opening in a new window), in order to let users choose their own target
- Differentiate links with colors and/or underlining
- Use legible body text and stylesheets that permit variable font sizes
- Make clickable areas big enough (i.e. links and forms) without being too close to each other
According to Glenda Watson Hyatt of blogaccessibility.com, there are approximately 54 million Americans (about one in five) with a disability. Disabilities may range from varying degrees of "auditory, cognitive, neurological, physical, speech, and visual disabilities."
While a major website redesign may not always be in the cards, there are always things that you can do on the content side of things to help make sure that more users can access your site.
What is web accessibility?
Web accessibility standards take several different factors into consideration.
These factors include content (like text, images, and media), user agents (like browsers and plug-ins) and authoring tools (content management systems, database scripts and code editors).
How can you make your website more accessible?
1. Content is easy to see (and hear). Your text should first and foremost be readable. That means sufficient contrast and a decent text size. Make sure that your text can be resized up to 200% without losing information. Images of text should be avoided and replaced with actual text.
Who this helps: People who use assistive technologies, and people with color blindness.
2. Multimedia should be inclusive. This may seem a bit obvious, but multimedia should not cause seizures. Also, don't use those pop-up ads. Not only are they annoying, but users with mobility issues may have trouble closing them. Provide a summary for videos and podcasts. If possible, provide a transcript. This will also help with your SEO, since search engines don't crawl videos - but they will pick up on the text.
Who this helps: Everyone, potentially.
3. User interfaces should be designed for different types of browsing. Many users rely on their keyboards, rather than a mouse to interact with the Web, so it's important to keep functionality in mind when designing form controls and other interface components.
Who this helps: All keyboard users (including ergonomic layouts) and people using voice recognition/speech input to operate websites.
4. Well-organized content helps everyone. But it becomes even more important to help users with disabilities navigate by creating consistent and descriptive websites. Some people may be seeing your content; others may only be hearing it. Some may be doing both at the same time. Some users may be using only a mouse or a keyboard, or possibly some combination of the two.
To help users orient themselves and navigate accordingly, make sure to:
- Use clear page titles and descriptive section headings
- Allow readers to control whether or not a hyperlink opens in a new window
- Provide more than one way to find relevant pages
- Inform users of their current location within a set of related pages
- Provide purposeful links (not "click here")
- Provide descriptive instructions and error messages
- Give opportunities to review and correct submissions
Who this helps: People who do not see or hear the content, users who have a difficulty recognizing certain relationships, sequences or cues.
5. Make sure that your code is not a mess. Keep it clean and valid so that it can be reliably interpreted by assistive technologies. When using non-standard interface components, be sure to provide a name, role and value. If your markup is used improperly and say, the controls aren't discoverable/actionable by keyboard, then no assistive technology/service/device/product will work.
Who this helps: Everyone. Because no one likes messy code.
How can you get tested?
There are a few ways to find out if your site is accessible. Read on, dear readers.
1. Find out how accessible your website is. WAVE is a free web accessibility tool that shows the original web page with icons and indicators that show possible errors. You can also upload files or paste HTML.
2. Analyze your images. Juicystudio.com offers a service to test images on web pages to check for any accessibility issues.
3. Check your color contrast. AccessColor examines the difference between foreground and background colors for text elements. The color combinations should provide a clear enough contrast for users with low vision or color blindness.
We are currently working to make Meta Q more accessible. If you have any thoughts, tips or tools on web accessibility, do share!
Photo credit: amslerPIX
What others are saying
No one has commented on this entry yet.