Web accessibility isn’t just about helping people with permanent disabilities such as blindness. It’s about providing a good and reliable experience for everyone that uses the web. This includes mobile users, the aging population who is increasingly growing in size, people using old technologies or slower bandwidths and even users with temporary injuries such as a broken finger.
Whatever the reasons may be, there is growing evidence that websites that adhere to accessibility guidelines can enjoy a vast array of benefits, such as:
- Improve SEO by having better search results
- Reduce maintenance costs
- Reach a wider audience
- Reduce legal risk
- Demonstrate corporate social responsibility
- Increase customer loyalty
- Benefit people with low bandwidth connections and or people using old technologies
- Enhance the experience of mobile users; especially if images are turned off to reduce bandwidth
Accessibility is becoming more important as the web increasingly becomes an essential resource that many of us rely on every day for work, a source of entertainment and education, to shop and as a social medium to connect with others. With the increase in channels by which we access the web, accessibility is also a little harder to manage as we build for different platforms, browsers and devices.
Unfortunately, the web still hosts a vast number of websites that don’t even adhere to even the most basic accessibility guidelines set out by the W3C Web Accessibility Initiative.. Why, you ask? A variety of reasons. Some organisations only follow accessibility guidelines if part of their target audience has a disability, is a government department or happen to have a passionate stakeholder who is well versed in accessibility compliance. Many organisations don’t realise that the benefits reach further than just providing a good experience for disabled users.
Out of the hundreds of websites that I’ve created throughout my 17 year career as a web designer, I can honestly say that I’ve only been involved in a handful of projects that mandated strict adherence to the web accessibility guidelines.
As a UX designer who always strives to create the best user experience possible, accessibility is something that I always take into consideration, whether the client has outlined it as a requirement or not. Whilst I won’t strictly follow each and every one of the guidelines, there are a few that I aim to include into every project that I work on.
Simple accessibility guidelines
Some accessibility guidelines can take a week to get your head around. So, to reduce time and help fellow web creators comply with some basic accessibility guidelines I’ve listed below my simple guidelines to help improve the accessibility of your next project:
Text
- Make all text readable and understandable by taking into consideration size, coloured backgrounds, contrast and text colour.
- Make links visually distinct.
- Align text to the left for languages that are written left to right. Avoid centrally aligned text and fully justified text to avoid poor spacing between words.
- Allow users to control text sizes for content areas up to 200%. Do not set a fixed size in the code. Captions and images of text are exempt.
- Type that is smaller than 14 points should adhere to lower contrast ratio colours for AA compliance. Click here to access an online Colour Contrast Checker.
- Avoid images of text unless it’s for decorative reasons.
Colour
- Do not use colour as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. Colour blindness affects 1 in 12 men and 1 in 200 women.
- Text colour should be clear. For example: avoid pastels on white backgrounds, avoid large blocks of text on dark colours or textured backgrounds.
- Clearly distinguish link colours from text and titles.
- Use the colour contrast checker.
Navigation
- Display global navigation prominently to make it easy for users to navigate, find information and determine where they are within your website.
- Ensure that all links are visually distinctive.
- Provide descriptive and meaningful titles on web pages.
- Consistent navigation should be used on pages that feature repeated navigation structures across multiple pages.
Images and text alternatives
- Use alternative text for images, commonly known as ‘Alt text’. Alt text should always be provided for images in the code.This allows people who cannot see and who are using screen readers to understand the type of information that is on the page. The benefits of Alt text also extend to mobile users who may have turned off images to lower bandwidth charges and also for search engines which rely primarily on scanning text and not images.
- Do not rely on icons alone to inform visual clues. Always use supporting text to represent icons.
- Avoid content that flashes three times per second, it could cause seizures.
Adaptability
Create content that can be presented in different ways and simple layouts without jeopardising information or structure, across desktop, tablet and mobile devices. Page speed can be an issue for users with slow connections. Page load time can be influenced by the efficiency of the code as well as file sizes of image and content.
Keyboard Accessibility
Make all functionality available via a keyboard, don’t rely on a mouse and avoid techniques that are mouse dependant.
Error identification
- Errors in form fields should be clearly identified to the user, by clearly highlighting or visually emphasising errors.
- Provide descriptive text to identify required fields or incorrect input.
What next?
If you need an expert evaluation of your project’s accessibility please get in touch with us. We can help you review and evaluate a project, as well as provide you with a list of compliance risks and prioritisations. DiUS can also help you build a business case based on your business requirements and target user needs.
Further accessibility information
Online tools, tips and resources
- Web Content Accessibility Guidelines 2.0 (WCAG)
- HTML Validator
- CSS validator
- Form and image validator
- Switch CSS off to check the semantic structure of your page
- Technical compliance error checker
- Check screen reader compatibility with an emulator such as Fangs
- Page load speed performance tool
- Authoring tools that support accessibility
- Planning and implementing Accessibility guidelines