5 April 2018

How To Design For Website Accessibility

 

When it comes to web design, accessibility shouldn’t be an afterthought. In fact, it should be central to every decision you make along the way. As the internet has become an integral part of modern life, more and more users are being left out as a result of inaccessible sites. To combat this, there are a few essentials you need to know to make your website accessible to all.

Content is still king

First and foremost, the words on your site should be written as plainly as possible to be easily understood by all. This can be as simple as keeping your sentences relatively short and avoiding long, unnecessary paragraphs. Utilising white space is the best way to let your content breathe. Our Digital Designer Brad agrees:

“Something as simple as good, intuitive layout can go a long way to improve the experience. Also, clear language can be a surprisingly important tool in making something easy to use.”

Don’t forget alt text

But, what about multimedia? Screen readers cannot “see” the likes of images and videos, so rely on descriptions to help visually impaired people understand these elements. It is important to include an accurate summary of what is depicted in alt text, rather than just the title of the image for instance.

You don’t need to do this for purely decorative images; a “null” attribute can be applied here. But, you should ensure there are no images of text on your website and use web font where you can.

Help users navigate

What good is a site that can’t be easily navigated? Incorporating keyboard navigation into the website build will help to ensure all page elements are accessible. Ensuring your navigation is clear and logical also goes a long way to helping users move freely around your site.

Elements such as tabbed content and skip-to links improve user experience and help them reach their destination as quickly as possible. It also helps to keep your navigation fairly top-level and avoid burying content where it’s difficult for users to find. Be sure to keep it in the same place throughout the site, too.

handicap logos

Think about font

Font size is crucial for website accessibility. The easiest way to cater to different users is to allow them to control the font size themselves. This may vary from browser to browser, so it’s a good idea to provide how to guides on your site to assist users – the BBC do a good job of this.

It’s also important to think about font colour. Whatever colour you choose, ensure it contrasts with the background colour. While this may seem obvious, it can be easily lost when branding takes over. If it’s difficult for someone with 20/20 vision to read, imagine how hard it’ll be for a visually impaired user.

Use headings

Structuring your content is just as important as how it looks. Headings aren’t just for the benefit of SEO – screen readers often use headings to navigate content, so marking these up appropriately can ensure your content is easy to interpret.

However, you should still use headings in hierarchical order with only one H1 heading per page. Try not to skip levels, either, by going straight from an H1 to an H3 for instance.

Keep tables to a minimum

Tables are a red flag when it comes to website accessibility. Screen readers can’t interpret the data very well, so may well read it in the wrong order. It also informs the user when it encounters a table by declaring the number of columns and rows, which detracts from the content itself.

If you must use a table, be sure to use headers for the columns and rows which explain the relationship of the cells to one another. Table captions can also be used to provide more information about how to read it.

disabled and hearing aid logos

Label your forms

If you must use forms on your site, ensure these are properly labelled to help screen readers understand them. Without labels, the user may not know what is being asked of them at each stage which can be frustrating.

The user should also be able to tab between each field, so this should be in the correct order. Mandatory fields should be designed to alert the user to ensure submission errors do not occur. The use of CAPTCHA can also prove inaccessible for some internet users, so we recommend using an alternate way to check for spam.

Get everyone on-board

The most successful sites are often created when the entire team approaches accessibility as a responsibility from the get-go. Accessibility shouldn’t be left to one department to facilitate, it should be at the forefront of everyone’s minds. As our UX Designer Rebecca attests to:

“From my experience, accessibility is often left to designers and researchers to force into scope rather than being highlighted as an initial requirement. It’s far easier when the team agrees that best practice and standards will be adhered to, from back-end code to front-end design and usability.”

User testing is vital

While it’s important to ensure the whole team is invested in website accessibility from the beginning, the best way to make a site accessible is to engage with people who use assistive technology every day.

They are the ones who know what they need better than anybody. Invite them to test your site at different stages throughout the process and ask for honest feedback – you’ll often be surprised at what gets revealed!

Accessibility should be the beating heart of website design in the 21st century. It should no longer be something that is considered in hindsight; rather it should form the basis of discussion from inception to launch. Ensure you have the essentials covered, from content to navigation to structure, and ask those who it directly affects what they think. The end result should be something you’re proud to put your name to.

Search

Categories

Archives

Subscribe to Email Updates

Subscribe
 

We are a digital transformation consultancy. We help our clients succeed.

View Services