10 Tips to Improve WordPress Accessible Website Design

08 Jul 10 Tips to Improve WordPress Accessible Website Design

The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect.Tim Berners-Lee, W3C Director and inventor of the World Wide Web

WordPress Accessible Website Design

Find out how you can improve online accessibility with our WordPress Accessible Website Design top 10 tips.

Everyone is different. In the online world, how we see, move, hear and think can vary greatly. People may use websites in many different ways. Accessibility is essential to some but useful for everyone.

What does accessible website design mean?

An accessible website design means the site is accessible to everyone including people with a diverse range of hearing, movement, sight and cognitive ability.

According to the Web Accessibility Initiative, most websites have accessibility barriers that make it difficult or impossible for many people with disabilities to use the web.

Although the Human Rights Commission doesn’t publish numbers on exactly how many websites have been complained about, its annual report says it received 830 complaints concerning disability discrimination during the 2013-14 financial year.

About 39 per cent of those complaints were related to discrimination in the provision of “goods, services and facilities”, which includes websites.

This video by W3C Accessibility Initiative (WAI) is a great overview of accessible website design:

4 Basic Principles of Accessibility

Based on user experience, the 4 basic principles of web accessibility content is that content must be:

Perceivable – How you perceive information

Operable – Interact with the content

Understandable – Clear instructions of where you are and what the content is about

Robust – Flexible to be rendered on multiple devices including assisted technologies

What are the common barriers of accessible website design?

Some of the common accessibility barriers when creating or using a website include:

Structure

Reading order

Keyboard

Text alternatives

Colour and contrast

Link text

Multi-media

Try to Experience Digital Accessibility First-Hand

Take some time today (1 hour if you can) to experience the impact of digital accessibility or the lack of accessibility online.

How can you do this?

Go Mouseless for 1 hour – unplug/turn off your mouse and only use your keyboard to navigate online websites. Use Tab/Shift-Tab, arrow keys, enter and spacebars to try to navigate.

Enlarge your fonts. To do this, resize the text to 200% and look at the screen and see if there is any loss of content or functionality.

Australian Disability Demographics:

How can you optimise your site for accessibility?

1. Responsive Design

Most websites today are built with mobile in mind. It’s important to allow your website to be responsive so the information is accessible on all devices including mobiles and tablets. If your website is not responsive now is the time to make it responsive for many reasons. Responsive websites are more accessible on different devices and screen sizes. Google also loves responsive websites and will rank those that are mobile friendly higher than websites that aren’t.

2. Text Resizing

The text on your website might not be very visible to some users. You can add text resizing plugins to your website to allow visitors to select their preferred text size to display on your website.

A great plugin for WordPress is WP Accessibility Helper. This plugin allows you to add a little icon on your site for users to be able to customise the look of the site to suit their accessibility needs. Some of the functionality that this plugin can help you with is:

Contrast & colour variations

Font resize

Remove styles and animations

Underline and highlight links

Focus user’s attention on content with Lights Off mode

Dark & light sidebar themes

3. Alternative Text

Some visitors might not be able to see images on your website. You can use alt text and captions to describe the image. This way if they can’t see the image, they can understand what you are showing on your website.

Make sure that the alternative text means something to the user. For example, if you are comparing a car vs a bike usability, then you will need to identify which images belong to the car and which images belong to the bike. This gets hard when you are trying to describe charts and graphs. You can use Alt Tags on links, images, buttons etc.

4. Transcripts

Videos and podcasts are very popular on websites. For those who are not able to hear, they will find it difficult to view your videos or listen to your podcasts. Creating transcripts or subtitles on videos will allow visitors to understand your key messages.

5. Content Structure

Break up your content with clear title headings on every page with subheadings breaking up the content. When using headings use different header labels such as H2 for your main heading and H3 for subheadings. The page titles should clearly indicate what that page is about.

Use lists to group information together such as ordered lists for sequential information. This will help make your content more readable and easier to digest.

How does content structure help? It allows visitors to:

Prioritise content on the page

People using screen readers can skip to the main content directly and navigate to sections that are important to them

Keyboard users can browse pages and their sections more efficiently.

Helps provide visual cues for people with low vision

6. Colour Contrast

Colour is very important for accessibility especially when it comes to text colour contrast. This includes all titles, body copy, copy on a solid background, links, captions etc.

High contrast colour between the background and the text colour allows the content to be more accessible. It also depends on the colour you choose for the text as visitors who are colour blind might have trouble viewing the text.

Level AA – requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Level AAA – requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14(bold)-18 point font or larger. “Note that even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive language and learning areas.”

7. Call to action / Directional Cues – Buttons and Links

Make call to actions clear. Buttons should be clear that they are buttons to click on to take action, or if you want them to go somewhere look at adding directional cues such as arrows to help guide them around your site.

8. Clear navigation

Clear navigation is helpful for everyone. Your navigation should be easy to understand, clear and easy to follow. Make it easy for visitors to get to where they want to go. Keep your navigation title short and simple.

9. Voice Search & Text to Speach

Allow visitors to search for content on your site. Have a search icon or search bar in your navigation allowing visitors to easily find content. You will also see a big trend towards voice search capabilities.

10. Images

Images and graphics are a way to split up content on a screen to make it more readable. It also helps visitors understand the content on the page better, in particular for those with cognitive and learning disabilities. Images can also be barriers if they are not accessible.

Making images accessible will help people using screen readers, speech input software, speech-enabled websites, mobile web users and SEO (images become indexable by search engines).

A sample of different images…

Informative images:

These images can be icons such as phone or email icon. This acts as a visual cue for a phone number as well as the alternative text can be ‘Phone’ or ‘Telephone’ which can be used by screen readers for searching for a phone number.

General images:

Can be used to show emotion, convey information,

File format icons

If you add documents to a site, you can use format icons in the text links to show what file format that document is, such as ‘Word Document’ and ‘PDF’.

Charts and graphs

Charts, graphs or informational diagrams can be used to visually explain the information in the content.

With all images, it’s important to add ALT TEXT.

In wordpress it is very easy to add alt text to all images. This allows screen readers and search engines to read the image.

How can you check the accessibility of your website?

With these tools you will go through a step by step test. It will get you familiar with the issues on your site and what you need to improve to make your website more accessible. Further down is a list of plugins, tools and resources to find out more about website accessibility.

WordPress Accessibility Plugins

There are some great plugins you can use to help improve your WordPress Accessibility.