Here are some of the best practices in accessible design that we use to make sites that work for everyone.
When using the internet on a 27″ iMac or on one of the latest large-screen high-res smartphones, it’s easy to believe that the web is a simple place to exist and operate in. Few of us now are able to live our lives without extensive recourse to the web whether for shopping, the functional everyday things like tax and insurance, or simply to communicate with family, friends and strangers.
But not everyone has such an easy time. The operation of many websites is hampered by design and programmatic elements – how they work – that disenfranchise whole groups of users and limit the effectiveness of sites and systems. Web accessibility encompasses the whole range of disabilities that affect access to the web, including auditory, cognitive, neurological, physical, speech and visual issues. There are three main types of disabilities:
So it’s vital that, whatever clever stuff your site or system can do for the iMac user, it has to work for everyone to provide equal access and equal opportunity.
At NLS we use the Web Content Accessibility Guidelines (WCAG) 2.0 from the World Wide Web Consortium (W3C) – these are the next generation of guidelines for accessible design. Here are some of the best practices in accessible design that we use to make sites that work for everyone:
Adding a high contrast colour option to your site provides a better viewing experience to people with low vision. Maintaining sufficient tonal contrast of the elements on the page is important because it can eliminate most problems with colour vibration and ensure that a design transcends any colour blindness. Using simple colours can also help to minimize confusion that a colour-blind person may experience. Including text and shapes along with colour can help convey the information better, therefore you won’t rely on colour alone.
Creating clear and consistent navigation by maintaining the name, order and position of the menu on each page of the site will help users predict and recognise your content. Having breadcrumb navigation on your site is a great way to improve usability because it indicates the current location on the webpage, making the navigation easier to users.
Building simple and consistent layouts with images and videos are helpful to break up the content, therefore your site will provide a clear visual field to users. Make sure the text and interactive elements are large enough and your layout is easily scalable to users with low vision. As well as using adequate line and paragraph spacing with clear and easy to read typefaces will also help to meet web accessibility requirements. Designing fully responsive version of the site will ensure that it is accessible from any type of device with any size screen.
Write simple sentences, lists, paragraphs and bullets to ensure the information presented on your site is understandable for everyone. Creating an informative heading structure with meaningful subheadings that can be easily scanned will also help you to increase the readability of your site. Descriptive buttons and links are also helpful to convey the purpose and state of each element on your site. This will allow users to operate and navigate your site with ease.
Following a logical tab sequence for forms and fields will provide easy navigation. Positioning the description and directions above the form fields will allow you to better communicate the purpose of the input field to the user. These will prevent users from making errors and feel frustrated. Clear and visible error messages are important to help users correct and identify mistakes which will make them feel more efficient and will enjoy using your website.
Providing clear captions and descriptions for video and audio content to users with disabilities are essential. Describing the content or meaning of images, charts and graphs will make your site compatible with screen readers. Describing the link of an image should also be specified to inform users where they will be directed. The length of the alt text also needs careful consideration. Make sure your description provides all the relevant information without being too long or not enough. Structure your alt text by placing the most important information first to give the flexibility the users to skip the content.