18 March 15 Be a web accessibility boss: 7 design tips to get you started.
Web accessibility makes it easier for people to use the web. It creates a better user experience for a wider audience. It’s not just targeted towards people with disabilities.
The recent media coverage on web accessibility got us thinking about the way we use accessibility on our projects here at August.
Imagine you, the designer, are at your next project kick-off. The project manager and client start discussing accessibility, government requirements and WCAG 2.0 AA.
Are you puzzled, overwhelmed and bewildered? Or, do you know what you have to do but are wondering how you should tackle the design? You may have read the guidelines, or perhaps attended a WCAG seminar or event. But if you’ve never applied those learnings to your designs, where do you start?
Have no fear! We have seven easy tips that you can use when designing your next website. But first let’s look at why web accessibility is important and a tool to help guide you, not restrain you.
Why is web accessibility important?
Web accessibility does not just apply to people with disabilities – it’s for people of all abilities. Focusing on accessibility makes it easier for everyone to use the web.
Everyone needs to be able to use the web in a way that is consistent and accessible, regardless of their technical background.
The world is slowly becoming paperless. Common day-to-day tasks, such as banking, applying for passports and sending parcels, have all moved online. Accessibility is becoming more and more important to consider for every business which services customers.
A website that is well-considered from an accessibility perspective creates a better experience for a wider user base. That’s because the design, navigation and content of these sites is inherently easier to use.
A recent article by Anne Gibson at A List Apart offers a refreshing outlook on web accessibility. As Anne says:
“Web accessibility means that people can use the web. Not ‘people with disabilities’. Not ‘blind people and deaf people’. Not ‘people who have cognitive disabilities’ or ‘men who are colour blind’. People who are using the web. People who are using what you’re building.”
Gian Wild director of Accessibility Oz, and author of the Victorian eGovernment Resource Centre Web Accessibility Toolkit also agrees:
“When it comes to making web sites accessible to people with disabilities, there are a huge range of issues that a designer, developer or content author needs to think about.”
It is not just making a website accessible to a screen reader; it is much more complicated than that. Sometimes, the needs of one group (for example, dyslexics who like low colour contrast) directly contradict the needs of another group (for example, people with mild visual impairments who like high colour contrast). WCAG is about meeting the needs of all these groups.
The tool to help you get there – WCAG.
‘WCAG’ stands for Web Content Accessibility Guidelines. The guidelines were published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). The guidelines help designers and developers create accessible content for web users.
WCAG is separated into three conformance levels:
1. Level A – some impact on design
2. Level AA – medium impact on design
3. Level AAA – high / extreme impact on design
Set success criteria are listed below each level. They are requirements that should be met in order for your website to be accessible. Guidance techniques are outlined for each criterion. They are reliable ways to meet the success criteria. This includes colour contrast, font size and layout.
The Australian Government implemented a four-year plan to have all government websites at least WCAG 2.0 Level AA by December 2014. Level AA covers a broad range of recommendations to improve accessibility. If a website solely follows Level A, it is almost certain that disabled users will struggle to use the website. You know you can do better then that.
Many organisations do not reach Level AA across all aspects. WCAG exists to guide you in making the right decisions about accessibility for your design. It is your responsibility when designing an accessible site to do everything you can to ensure that the design does not limit users in any way.
7 quick web accessibility tips to design for WCAG
To save you wading through the accessibility guidelines, here are some useful tips for you to consider on your next WCAG-friendly design.
1. Use consistent hyperlink and button styles.
The success criteria: “The intent of this Success Criterion is to ensure consistent identification of functional components that appear repeatedly within a set of Web pages.”
Consistency means it’s easy to identify what is a link, what is a button, what is an icon and what is body copy. It gives the user confidence in your website. It educates them to expect the same experience time and time again, across the whole site. This leads to repeat visitation as people become ‘trained’ in using the site.
This example demonstrates a great way to keep hyperlinks and button styles the same. Choose a consistent colour for your hyperlinks. We suggest a colour, such as blue, that no other element on the page is using.
It is also good practice to keep dexterity in mind for those individuals with issues such as hand tremors. Being able to increase the height of buttons and text size goes towards making your website WCAG 2.0 compliant. It is also easier for people with disabilities to click, select or tab to the button.
2. Design forms with labels.
The success criteria: “The intent of this Success Criterion is not to clutter the page with unnecessary information but to provide important cues and instructions that will benefit people with disabilities.”
A screen reader only recognises fields in a form when a label is included. Not including a label in a form causes confusion for users and we mean everyone here, not just those people using screen readers.
The above example shows how to label form fields appropriately.
3. Provide enough colour contrast.
The success criteria: “Ensure your website has enough colour contrast. It helps people who are colour blind, have low vision or are legally blind, but the right contrast in colour is visually appealing for all people.”
Despite a few exceptions, the practical application of contrast means “the visual presentation of text and images of text has a contrast ratio of at least 4.5:1”.
The example above demonstrates the same text contrasted differently. Text colour can significantly affect readability, depending on the chosen background colour.
1.0 The black text on a white background (on the left) is really easy to read with a contrast ratio of 21:1, which passes the contrast ratio with flying colours (pardon the pun).
2.0 The red text on a purple background (on the right) is very hard to read. The contrast ratio is 2:02:1.
Choose colours wisely as they can greatly impact the readability of words.
To quickly test the contrast of your chosen palette, Colorable is a helpful resource.
4. Structure your website and the content in a logical way.
The success criteria: “Content that is organised logically renders in a meaningful way for screen readers.”
Even if CSS is disabled, all elements of the website (such as navigation or text) still flows using a coherent structure. For people using screen readers, it gives the user the information in the order intended.
The example above demonstrates how to structure the content for screen readers. When CSS is disabled, the content will stack underneath each other – navigation, content, then image.
5. Be predictable.
The success criteria: “The intent of this Success Criterion is to encourage the use of consistent presentation and layout for users who interact with repeated content within a set of web pages and need to locate specific information or functionality more than once.”
Web conventions exist for a reason. It means you can recognise and navigate the web in a way that becomes familiar to you – no matter who you are, or what your skill level is.
Innovate by all means, but avoid breaking established conventions. Do not place the main navigation in different areas on each page just for the sake of it.
Position elements on a page so they are consistent across many pages. It reduces confusion when the user navigates through the website. It also creates a user-friendly and accessible experience.
6. Provide a breadcrumb trail.
The success criteria: “A breadcrumb trail helps the user to visualise how content has been structured and how to navigate back to previous web pages, and may identify the current location within a series of web pages.”
Breadcrumbs help the user know how the content is structured within the context of the website. They allow the user to easily navigate back to previously viewed pages and it lets them know where they are on a site. It gives the user constant reinforcement that they are in the right place.
The breadcrumb example above demonstrates that a user is three levels deep into the website – Home / About Us / Our History.
7. And one more…
It’s not quite a tip, but here’s an extra point worth mentioning. Slideshows can be a barrier for users with screen readers.
One way to get around this is to use play and pause buttons to allow users to stop a slideshow at any point. Another is to provide text captions on the slideshow to assist the user. It could mean the difference between people staying on your website that little bit longer to engage with your content or not.
My WCAG experience. Putting my design to the test.
We’ve developed many WCAG-focused websites requiring web accessibility level AA to AAA.
We adjusted CSS & HTML to work within the insights we had gathered. In crafting websites this way, we are able to create a successful experience for all user groups.
Testing our designs, prototypes and templates on real people gives us the best possible feedback. Past learnings have demonstrated that the guidelines are only guidelines. The only way that you can be 100 percent sure that your website is accessible is through user testing.
“User testing is strongly recommended by the W3C, but is not mandatory when testing a website for accessibility compliance. However, when we conduct user testing we often find what we call ‘weird and wonderful’ accessibility errors. These are things like the fact that most screen reader users who test for us don’t understand a Search box if it doesn’t have a label and has the word ‘Go’ as a Submit button.” – in interview with Gian Wild
So, what do you think? Designing with web accessibility in mind isn’t as difficult as what you first might have thought, right?
Go on and see if you can apply one or all of the seven tips to your designs. Then test your assumptions on real people and you will be on the road to accessibility in no time. Some issues will only come to light when the user is sitting in front of the computer.
Observe. Note it down. Fix it. Most of all, learn from it.
What other great tips do you have when designing accessible websites? Please share them in the comments below and let’s add them to the list.