Best practice in web design

Accessibility is an important part of web design. For public authorities and commercial websites in Northern Ireland, it is also a legal requirement under the Disability Discrimination Act 1995.

Why is web accessibility so important?

People with disabilities use a wide range of tools and techniques to help them navigate the web. For example, some may configure standard software such as browsers to their specific needs. Other users may prefer to use specialised tools, eg screen or text readers, assistive scanning keyboards, etc.

For these tools to work, you must build websites and applications in a way that supports the use of assistive technologies.

How to improve web accessibility

If you are building a website from scratch or redesigning it, make sure that you develop HTML-compliant and accessible pages from the outset. Use cascading style sheets where possible to separate content from presentation. This can give you more flexibility and improve the accessibility of your content.

At the very least, you should address these basic accessibility considerations:

Keyboard accessibility

Users should be able to tab around the screen to access each area of the site, including close any potential pop-up windows without using the mouse. Visually impaired users may not be able to see a cursor and may rely on text-to-speech software to tell them where the focus is on the page.

Consider colour contrast

Contrast ratio between text and background needs to meet minimum standards to ensure those with visual impairments or reading disability can still access the site. Colour is a strong design element, but avoid using it to convey information. It will be inaccessible to colour-blind people, as well as screen readers.

Mark-up site structure

Use headings, lists, tables and other structural elements to give meaning to a web page or order of information. Make sure that all functionality is available from a keyboard or via screen reader and that you provide headings in an appropriate hierarchical order to aid navigation and understanding.

Use headers for data tables

If you are using tabular data, introduce table headers so that screen readers can understand them.

Provide text alternative for images

Text alternatives convey the purpose of an image or function to provide an equivalent user experience. They are commonly added to graphic content, such as pictures, icons, button, illustrations and charts. They help people who have visual impairments and may rely on screen readers to navigate a site.

Provide captions, narrations or transcripts for media

This applies to videos, archived audios as well as live audio.

Label form content correctly

Every form element, such as text field, checkbox or dropdown list, should be marked using the 'label' element. Users should be able to navigate, understand and input form data without being able to see the page (using a screen reader). This includes recovery from any errors, such as the failure to fill in all required fields.

Make links understandable

Screen reader users may choose to read only the links on a web page, so link text should make sense even if read out of context. Avoid ambiguous phrases like 'clink here' or 'more'.

Distinguish between different types of content

This includes PDF files, Word documents, PowerPoint presentations and flash content. If you can't make them accessible, consider using HTML or alternative. Users should be able to navigate and read any downloadable material by using assistive technology.

Allow users to skip repetitive elements on the page

Provide a 'skip to main content' or 'skip navigation' link to help a user with impaired mobility or relying on a screen reader to access content more quickly.

Provide clear and easy-to-read content

Content should be accessible to people with diverse cognitive abilities as well. Write it in plain English and make it as simple, and as easy to read as possible.

Please note this is not a complete list of all accessibility requirements. These are only some of the main considerations of accessible design. You can implement most of these easily without any effect on your site's look and feel.

For more recommendations, see W3C's detailed guidance on accessibility principles.