Ten tips for better accessibility

To help make your website accessible for as many people as possible, it is important to design, code and test the website properly. The Web Content Accessibility Guidelines 2.1 (WCAG) have been developed to help designers and developers create accessible digital experiences. But here are 10 top tips to get you started with accessibility. This is a starting point only, but will get you a long way:

1. Non-Mouse Access
2. Forms
3. Alt text
4. Colour contrast
5. Meaningful links
6. Heading Structure
7. Landmarks
8. Check Your Pages
9. Error Messaging
10. Accessible content

1. Non-Mouse Access

Many people rely totally on keyboard commands rather than being able to use a mouse. Therefore it is vital to ensure that all content can be reached using just your keyboard, that the focus indicator clearly shows which element you are currently on, the order you tab in makes sense and there is nowhere that a user can get stuck when just using their keyboard. Test keyboard accessibility in Firefox or Safari as Chrome can give false positives.

2. Forms

Getting the code right for forms is so important that there are numerous checkpoints in WCAG2.1 that relate to forms. The important thing to remember when designing an online form is that each and every form element (input fields, radio buttons, submit buttons etc) should have clearly associated labels, states and roles in the code so that screen reader users know what goes where. For example, a field to fill in your first name should have a matching label in the HTML code.

3. Alt text

Photographs, images, graphs and icons play a big part on websites. The information they convey is just as important to non-sighted users as sighted. But to make those images accessible to all it is vital to use descriptive alternative text for images or graphics. Use descriptive language, but if the image is purely decorative use <alt=””> so that assistive tech ignores it. Good alternative text ensures that people using assistive tech can still access information contained in images. For example, <img src=”accessadvisors.jpg” alt=”Access Advisors Logo”>

4. Colour contrast

To help people with low vision or dyslexia to see text on a website, it is important to ensure that your text and background have at least a 4.5:1 colour contrast. Icons and controls should have a 3:1 colour contrast. There are easy to use free colour contrast tools to check your colours. Good colour contrast not only helps those with low vision, but also those with colour blindness, dyslexia and everyone in low light or when they are tired.

5. Meaningful links

Knowing where you are going is important and having links that make sense can really help on websites. To help make your website more accessible make sure that your links describe their purpose (not just “click here” or “read more”), destination (e.g. home page) and are unique rather than having lots of ‘learn more’ links on a page. For example, you would change <a href=”readmore.htm”>Click here</a> for more info> to <a href=”readmore.htm”>Read more information</a>

6. Heading Structure

Just as sighted users ‘scan’ a new webpage to see the key information, assistive tech users often use a list of headings to ‘scan’ a page and make sense of the information. Therefore, it’s really important to make sure that the visual hierarchy and the hierarchy in the code help users find their way to the relevant information. Use page titles, <h1>, <h2> and <h3> tags in a hierarchical way.

7. Landmarks

ARIA landmarks identify areas of a web page, helping users to navigate around a page easier. There are several available landmark types, but simply adding 3 of them – main, navigation, and search – can greatly enhance the accessibility of your page. Find the elements on your page that surround or contain the main body content, main navigation, and site search (this one will probably be a <form> element) and add the appropriate landmark role attribute (role=”main”, role=”navigation”, or role=”search”).

8. Check Your Pages

Before launching your site or app it is important to evaluate the product. While we advocate doing expert reviews and doing usability testing with people with access needs, a minimum evaluation would be to use a code checking tool. These tools are usually easy-to-use, online tools that give feedback about your web site and facilitates additional evaluation. For example, Web AIM offer http://wave.webaim.org/ where you can enter your web page URL, and get feedback on your page’s accessibility.

9. Error Messaging

As well as getting the forms working right from the start, it is also important to ensure that if there are errors on the forms that you help your users. Ideally you want to reduce the chance of error by using the right kind of form field. It is also important to identify which fields are mandatory versus optional. The location and content of any error messaging is also important as it needs to help user recover even if they cannot see what is happening.

10. Accessible content

All content on your site needs to be in Plain English, easy to read and concise. This applies to micro content on buttons (making sure you are using the right verb), applies to main content and applies to content that is embedded in images. Text in images is inaccessible so ensure that key information is Not embedded in images.

We hope that this content helps you make a start on your accessibility journey. Good luck. If you’d like help with your digital accessibility contact us at Access Advisors. We provide reviews, consultancy, training, and research for all your digital services.