Easy website design accessibility tips

Web Accessibility is an essential area of focus for everyone commissioning a website design. It doesn’t matter whether you design and build the site yourself or commission a web designer to do it for you, web accessibility is essential and the responsibility rests with you, the site owner.

You may not think that making your website accessible to all is a key priority, but if you do not ensure that the bulk of your site can be accessed by all, including those with disabilities such as the blind and deaf then you may be falling foul of the Disability Discrimination Act (UK).

Luckily, there are some key steps you can take that are easy to implement:

MEANINGFUL TITLES

You should ensure that you use meaningful title attributes that are descriptive of the link the user will be clicking on. Do not simply mirror the description of the link against the title of the page.

For example, if the page you are linking to is the “Portfolio” page then do not use a descriptive title attribute of “Portfolio”, instead use something along the lines of “View some of our most recent work”.

PLACE IMPORTANT ELEMENTS TO THE TOP OF THE PAGE

If you are unable to use a conventional point-to-interact device such as a mouse then accessing interactive elements such as “click here” buttons can be much harder than for those who do.

As such, ensure that your key interactive elements are placed as close to the top part of the page as possible, making it easier for the user to select links etc.

DO NOT MIRROR TITLES ATTRIBUTES

It may seem OK to label all your pages with a title attribute that starts “Click here to view the ________ page”, but this can cause problems with CMS configuration and can cause problems for people using screen readers.

When you mirror title attributes this way it makes it much harder to use the search functions that are built into these screen readers.

USE CORRECT HEADINGS

A headings tag allows a reader to jump straight to the section they are interested in, and is essentially an outline of the web page they are viewing.

When using headings a <h2> tag straight after a <h1> tag tells a reader that they are viewing a subsection of preceding section.

It may not seem like a big thing, but by using headings correctly it can make the accessibility of your content so much better for those with visual impairment using screen-reading software to aid them.

USE MEANINGFUL PAGE TITLES

The very first thing a screen reader will come across is the text included within your title tags.

The worst thing you can do is to not even have a title tag for a specific page. The second worst thing is to have every title tag the same.

The title tag should be different for every page of your site, and it should be descriptive of the pages content. For example, do not give pages titles such as “Page One”, but rather something along the lines of “About Me” and “Contact Us”.

LABEL FORM ELEMENTS

When someone interacts with a website, lets say by filling out a contact form, they are interacting with an HTML web form.

You should label the input elements of your web forms with meaningful and descriptive text that makes it clear to the user what information they should be providing.

TEST WEB PAGES WITH CSS AND JAVASCRIPT DISABLED

To discover how accessible a web page is it is best to access each page with css and JavaScript turned off.

The reason for this is simple. With CSS we are able to position elements wherever we want on the web page, and with JavaScript we can manipulate the elements of a page by hiding, removing and showing them depending on a users action.

When you disable these two technologies it allows you to see whether the actual content of your page is accessible to al, including whether the content of each page is organized correctly.

SUMMARY

Sometimes the only real way of fully understanding what it is like to use a website when you have accessibility issues is to visit your site using the very assistive technologies that others will be using.

There are also some great simulators online that can help you to gain a better understanding of the user experience.

It is a general misconception that achieving a good level of accessibility in web design costs the earth, but this couldn’t be further from the truth.

When you build your website around these basic accessibility standards it is easy to make things work as they should. It is when accessibility is an afterthought that it costs the time and money, as you are essentially trying to fit a square shape into a round hole.

To find out more about web accessibility and the various guidelines that are in place to help manage this subject please visit the W3C website.

Leave a Comment