Accessible Design Intro

As content creators and managers you will not necessarily need to know all the WCAG 2.0 details. The following list was created with content managers and creators in mind:

1. Text for everyone

Make sure all text can be highlighted and read aloud so that screen readers and reading tools can access them.
Provide alternative text for images. These must reflect the purpose of the image:
- Decorative: no alternative text.
- Having a function: Describe the functionality.
- Linking: Describe destination.
Avoid images of text where possible. Where not, make sure that text alternatives are equivalent.

2. Versatility

Create a website that can be used by as many as possible, in as many ways as possible according to user needs.

All functionality can be used without a mouse – from the keyboard alone.
All functionality can be used with a mouse.
Users can adapt colour and font according to specific needs.
Ensure none of your content will cause seizures - avoid rapidly flashing content.

3. Association

Text, headings, buttons, fields, etc. that are visually connected must also be programmatically connected.
Make sure not to give instructions based solely on a location of content, such as 'In the box to your right.' This information is useless if you cannot see the screen. Supplement the instructions by naming a heading that users can navigate to.
Ensure link text can be read out of context. Avoid link test like 'Click here,' or 'Read more.'

4. Colour for everyone

Ensure that the colour of the background and the colour of the text are of sufficient contrast to each other. That way, people with low vision can also read it.
Ensure that information is not given by use of colour alone, such as 'Find more info in the green box.' Otherwise, problems can arise for visually impaired or colour blind users.

5. Robustness

Have a consistent design throughout the website.
Follow known website conventions.
Follow the standard for the format you are publishing in (HTML 5 syntax, for example) - this will optimize your website for many different platforms and user agents.

PreviousHALT: Accessibility with the Drupal Text Editor NextContent Titles & Headings

Last updated 6 years ago

Was this helpful?

1. Text for everyone

Make sure all text can be highlighted and read aloud so that screen readers and reading tools can access them.

Provide alternative text for images. These must reflect the purpose of the image:

Decorative: no alternative text.
Having a function: Describe the functionality.
Linking: Describe destination.

Avoid images of text where possible. Where not, make sure that text alternatives are equivalent.

2. Versatility

Create a website that can be used by as many as possible, in as many ways as possible according to user needs.

All functionality can be used without a mouse – from the keyboard alone.

All functionality can be used with a mouse.

Users can adapt colour and font according to specific needs.

Ensure none of your content will cause seizures - avoid rapidly flashing content.

3. Association

Text, headings, buttons, fields, etc. that are visually connected must also be programmatically connected.

Make sure not to give instructions based solely on a location of content, such as 'In the box to your right.' This information is useless if you cannot see the screen. Supplement the instructions by naming a heading that users can navigate to.

Ensure link text can be read out of context. Avoid link test like 'Click here,' or 'Read more.'

4. Colour for everyone

Ensure that the colour of the background and the colour of the text are of sufficient contrast to each other. That way, people with low vision can also read it.

Ensure that information is not given by use of colour alone, such as 'Find more info in the green box.' Otherwise, problems can arise for visually impaired or colour blind users.