Web Accessiblity Tips

Top tips to improve web accessibility for people who are blind or have low vision

Many people with low vision or who are blind use screen readers to help them use the Internet. Screen readers are an assistive technology that uses the code of the website and translates it into speech or Braille so that the user can understand and navigate around a website.

To make sure that the website is accessible for people with visual impairments it is very important to design and code the website properly so the screen reader can make sense of it. The Web Content Accessibility Guidelines 2.1 have been developed to help designers and developers create accessible digital experiences.

As well as people with visual impairments it is important to also consider other access needs, such as physical, sensory and cognitive impairments. Here are  five top tips to help make your website more accessible for people with visual impairments and everyone else.

1. Forms – WCAG2.1 numerous success criteria

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.

2. Alt text – WCAG2.1 success criteria 1.1

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 it is vital to use descriptive alternative text for images or graphics. Good alternative text ensures that people with low or no vision can still access information contained in images.

Click here to learn more alt text tips

3. High colour contrast – WCAG2.1 success criteria 1.4.3

To help people with low vision see the text it is important to ensure that your text and background have at least a 4.5: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, colour blindness, and dyslexia, it helps everyone in low light or when they are tired.

4. Meaningful links – WCAG success criteria 2.4.4

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.

5. Heading Structure – Best Practice guideline

Just as sighted users ‘scan’ a new webpage to see the key information, screen reader 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.

Good luck with making a start on your digital accessibility. If you’d like further help with your digital accessibility contact Access Advisors (a Blind & Low Vision NZ initiative). Access Advisors provide reviews, consultancy, training, and research for all your digital services.