Website Accessibility – The Basics

Website Accessibility – The Basics


Accessibility is a major consideration for any good web designer. It’s important to make your website available to as wide an audience as possible, there are a number of different ways this can be achieved:

Cross-browser compatibility – This involves checking through and testing sites in a variety of different browsers e.g. IE7, IE8, Mozilla Firefox, Google Chrome. This is very basic accessibility and yet still a stumbling block for many sites!

Use of alt tags – Alt tags should be used on any image on the website that has a purpose beyond being decorative, if the image is relatively self-explanatory then a simple description will suffice, if it’s more complicated e.g. a graph or chart it should be described in the content of the page or using a “longdesc” tag and if the image is just for decorative / design purposes then the alt tag should be left blank. Alt tags make things much easier for individuals who are partially sighted and use a screen reader program. It takes relatively little effort to make a website accessible in this way and will help you reach a wider audience.

Text resizing – Page and text resizing is usually built into browsers (using crtl +(-)) but they all have differences in how they render the page so it is good to check how the page resizes in each browser to make sure it is working correctly. JavaScript can also be used to resize the text and links can be added to the page to allow the user to choose a text size, it is important to use “em” and not “px” for your text sizes to allow this to work effectively. Also try to use clear, easy to read typography.

Skip links – Skips links are also useful for screen readers, an anchor link is added above the navigation this allows people using screen readers to skip the navigation part of the website and go straight to the content saving them having to listen to each level of the navigation each time they arrive on a page.

Contrast – Including a high contrast alternative style sheet can be useful for elderly users and people with visual impairments who do not use screen readers. A high contrast can make text easier to read for some parties and allow them to get the best experience out of the website. Having low contrast colour options can also be useful for people with dyslexia, who may suffer from sensitivity to high contrast colours.

Considering the colour blind – Try not to rely solely on colours to distinguish between elements on a website e.g. red or green borders for form error reporting, these need to be followed up with other markers such as an asterisk or text.

Meaningful text for links – Try to avoid using generic text for links e.g. “click here”. Using non descriptive links such as this can cause problems for people who use screen readers. Most programs have a feature which allows the user to skip through the links to the page without reading the content, so if each link is non descriptive such as “Click here” then they will need to go back and spend time listening to the content again. This is also useful for SEO as it creates an easy to navigate website for users and crawlers alike.

Design – Make the layout and design of the website as clear as possible so it is obvious to the user where content begins and ends. Use rollovers on interactive elements such as links to give the user feedback and show that it is a link.

Testing Accessibility – There are many tools available online for testing the accessibility of your website, including:

  • WebXACT
  • The WAVE
  • W3C HTML Validator

In Conclusion – None of the above require big changes to your website design and are mostly easy to implement with minimal effort, by doing these it will vastly improve the accessibility of your website.


Share this post

WhatsApp chat