Creating accessible websites: a primer for website developers

At Liquid Light we pride ourselves on building accessible and inclusive websites, and have built websites and platforms with a focus on accessibility for the likes of the disability charity Leonard Cheshire and The Washington Group on Disability Statistics.

Below are some tips and best-practice checks to get you on the road to building accessible websites.

• For various reasons, for instance in tables or forms, you might end up with repeating phrases or words. This should be noted and eliminated where possible to make content as clear to the user as possible.
• Include a skip to content button. This link skips reading/clicking through the main menu every time a user navigates between pages. It might not be useful for users navigating with a mouse so it can be hidden outside the viewport with CSS.
• Group elements together and use the appropriate tags. HTML5 improves constantly, introducing elements like <section>, <header> and <content>. These are helpful as they divide a webpage into meaningful groups. You can further section elements to <main> <nav> etc.
• Users can navigate on the page by jumping through headers to get an overview of the content. Make sure that this makes sense.
• Sometimes elements like labels on simple forms are hidden from the FE with CSS. This must always be done carefully - some techniques are not visible for screen readers
• Read more about how to set up your forms correctly

Screen reader testing

The most important part of building accessible websites is user testing. Ideally you would be testing your website build with disabled users, but before any user testing starts, test your build yourself using common assistive technology.

Leading screen reader software:

• Windows: JAWS - corporate / higher education settings
• Windows: NVDA - open source, light on the system, doesn't crash. Often used together with JAWS in the same session depending on the content
• Mac: Voice over - inbuilt in iOS

At the moment JAWS is considered the most advanced screen reading aid which provides the most customisation and features for the user. But it's not a bad idea to use a more 'basic' reader for your first tests. Your website should be easily navigated with the most elementary tools to ensure its accessibility for all users despite their screenreader budget. Consider your target audience: is your product aimed to be used in a professional/education setting or aimed at those using a mobile?

I work on a mac so I start with the inbuilt Voice Over screen reader app and make sure all the content gets read out and that it is in semantic order. This has to be kept in mind from the very start of the build. Sometimes elements get moved around for sighted users' benefit, but it's essential to start by carefully considering the order of information served for the user - screen readers read the page in linear progression. This is also the case for mobile users and should always guide the engineering and design process.

Keyboard accessibility

Use the tab key to make sure all the interactive elements are available for keyboard users. For example you should be able to easily navigate through input fields of a form and submit a form by pressing the enter key on your keyboard.

Summary

Accessibility and usability should be considered from the very first stages of a project. Plan the structure of the content before you start adding design and layout and make sure your front-end flourishes don’t get in the way of accessibility. To make your site a success, consider the user experience from different points of view and invest time in testing. Ease of use makes a difference to each and every one of your users.

This article was posted in Development, User Experience by Minna Ylitalo

• 

  Minna Ylitalo