On the weekend of July 21st-22nd, I attended WordCamp Sydney, a gathering of over 200 likeminded people to discuss all things WordPress. This series of posts is an attempt to provide a brief summary of some of what I learned there. The slide sets for all the presentations are available on Slideshare.
One in five Australians have some kid of disability, and inclusive (or accessible) design is generally understood as ensuring that your websites are accessible to all visitors, including those with various kinds of disabilities. Joe points out that this accessibility is not just for those with permanent disabilities, but also temporary conditions such as sprains, or those accessing the web in less than ideal environments, with impediments of noise, lighting, crowds, slow connections, etc.
It’s not just your site visitors that benefit from inclusive design; you benefit through:
- Improved search engine optimisation and usability
- Happier users are more likely to comment and share your content
- More visitors to your site.
Inclusive design is not just the ‘right’ thing to do, it’s also the law, as several large companies have discovered after high profile legal actions taken against them by people unable to access their services.
A few things to check include:
- How does the site look with CSS turned off? Is it still usable and understandable?
- Does it have a logical reading order?
- Are the correct tags used in your markup?
- Does it have a “skip to content” link? This helps users with screen readers get to the important part of the page without having to listen to the whole navigation menu each time they land on a new page.
Images
Getting images right is one of the most important things you can do for web accessibility. In HTML coding, images have a thing called an ‘alt tag’ which allows you to describe the image for people or devices that can’t see it. A few notes on images:
- Is it content? Then describe it!
- Don’t just repeat the caption. The alt tag should give enough of a description so that someone who can’t see the image can understand what it is.
- If the image is functional (such as a “Buy” button, or a “Search” button), describe what it does.
- Leave the alt tag empty if the image is simply decorative, or does not convey additional meaning, such as your logo, or a cheesy handshake photo.
Fonts
- Avoid ALL CAPITALS – apart from being rude, some screen readers will read all capitals text as if it was an acronym – very annoying for the person listening.
- Use font sizes that can scale – use em, en or %, not pixels or points.
- Scale your containers with your content. If enlarged text breaks out of its container it may become illegible.
Colour and Contrast
Don’t rely on colour alone to convey meaning – 8-10% of males are colourblind.
Videos
People with low vision or hearing deserve easy access to your content, so include alternative formats:
- Accurate text equivalents
- Captions
- Audio descriptions
Forms
- Ensure forms are navigable by keyboard, including keyboard access to error messages.
- Ensure all form fields have meaningful labels before the field.
- Consider using textCAPTCHA rather than CAPTCHA for filtering out spambots.
- Gravity Forms is one of the better WordPress form plugins for accessibility.
Links
Make sure your link text is meaningful and says what the link is – don’t just have “click here”.
The Basics – Summary
- Check your HTML is well formed.
- Make sure your content is well structured.
- Use alt tags correctly for all images.
- Avoid text displayed as images.
- Watch your font size, format, case & weight.
- Check your colours don’t impede readability.
- Ensure forms are usable by keyboard.
- Make sure your link text is meaningful.
Resources
Web Accessibility Toolbar for Internet Explorer
Fangs screenreader emulator (Firefox extension)
ZoomText screen magnifier
WAVE accessibility evaluation tool
Juicy Studio colour contrast checker (Firefox extension)
Headings Map (Firefox extension)
You can find the slides from Joe’s presentation on Slideshare.
See also my other WordCamp Sydney notes.