8 Features of Accessible Websites (Part 2)

This is the third post in our 'Social Media 4 Non Profit' series, and the second part of 8 Features of Accessible Websites.

Last week we looked at:

1. making sure your website works in any browser
2. that it can be navigated & used without a mouse
3. that text can still be read when resized
   
4. that audio & visual content is available in alternative formats

This week, I have a few questions for you to ask yourself.

5. Is a list of all pages available?
Somewhere on your website there should be a list of all of the pages on your site so that visitors can, at a glance, see all of your content and click directly to the page they want. This is often called a Site Map, or could be a Table of Contents or similar.

As well as helping with accessiblity, it also lends a hand to helping boost your search engine rankings, as each page has a guaranteed link back to it. Plus it can help the little 'Google Bots' discover every page on your site to give you a greater chance of being found.

6. Do your links make sense out of context?
Imagine you are skimming through a website and all you can see (or hear) are the words that link somewhere else.... now if all you get are 'click here', 'this link', 'read more', 'here', you don't get much of an idea of where you will get to if you do 'click now'.

Try to make sure that your link text tells people where they are going. For example, in the following sentence 'Find out more about us' link the text 'about us'. Link news article headlines to the full article, rather then (or as well as) a 'Read More' link.

7. Do images have descriptions?
For every image that adds to the content of the website, for example a diagram or map, you should have 'alternate text' and/or a long description available that tells people what's going on in the picture. This is needed for people with poor visibility as the description will be read to them, for people who may have images turned off, or if for some reason your image is no longer available. Again, it can also help with search engines as Google can pick up the images on your website to display within their image serach results.

8. Is your code valid?
A little bit on the technical side, but valid code is good practice and will make sure there are no mistakes. A missing comma or end bracket can mean your site won't work at all. There are checks you can run on your website to see how valid your website code is.

Again it will also help with search engine positions, making sure the search engines have the right information available, it helps with browser compatibility, and all of the accessibility guidelines I haven't yet mentioned.


This isn't the be-all and end-all guide to accessibility, but it's a step in the right direction and the very minimum you should be doing to ensure your site is accessible. For more information on the full guidelines visit the W3C Website.

8 Features of Accessible Websites (Part 1)

Welcome to the second part of our 'Social Media 4 Non Profit' series.

This week we'll be looking at accessibility, making sure that when you do drive traffic to your website your visitors can get to the information they need. The World Wide Web Consortium (W3C) launched a Web Accessibility Initiative with the aim of ensuring that all web content is available to users regardless of technology, disability or ability. This had lead to the development of Web Content Accessibility Guidelines or WCAG.


In this post we will highlight 4 of the 8 features that we feel are most important for ensuring your website is accessible.

1.Your website works in any browser
Accessibility doesn't necessarily mean that users can't use a mouse or need bigger text, it can be as simple as making sure your website works in a wide selection of web browsers. All browsers render your website slightly differently, and even a few pixels can make a huge difference to the accessibility of your website.

As an example, we developed a website that had white text on top of a blue menu background. In Firefox and Internet Explorer it looked great, but in Safari the white text had dropped from the blue menu background onto the white page background so users couldn't navigate from the home page, making the site unaccessible to anyone using an Apple Mac.

2. Your website can be navigated and used without a mouse
Some of your visitors may be visiting your website without a mouse - either they are unable to, or their mouse may be broken or they may be on a mobile device, so you need to check that your website can still be used. Try going through your website using the TAB, SHIFT+TAB and ENTER or RETURN keys on your keyboard. If it can't be done visitors who cannot use a mouse will not be able to access your website content.

3. The text on your website can still be read when made bigger
Again, this isn't just for people who have problems with their sight, but also for people who are using a netbook perhaps or have changed their browser settings. Each browser allows users to set their preferred text size, so you need to check that your website will still be legible if the text size has been doubled and that menus are still usable.

4. Audio content is also available visually (and vice versa)
Surprise, surprise - it's not just those with hearing and sight disabilities that would like alternative content formats. Maybe speakers are broken or a computer doesn't have a sound card, providing a transcript of an interview or subtitles to a video clip can help everyone. Likewise someone with dyslexia may prefer to listen to an interview rather than read it, so either provide an alternative format or ensure that the content can be easily read by screen readers.

It's all about your audience
We could go into much more detail about accessibility (and it may be a future series perhaps!) but this post is intended to highlight 4 of the basic areas that should be considered. Your target audience (for example a non-profit dance group will have a totally different audience to a charity supporting blind people) will determine how far you need to follow the guidelines - just remember it's your audience you need to please!

If you feel there is anything I have missed or should add please comment below, all feedback is welcome and it would be great to make this series a comprehensive information resource.

How to...find out if your website is accessible in 6 steps

The Disability Discrimination Act states that businesses must make reasonable adjustments to ensure that their information (among other things) is accessible to everyone. How far you choose to go with it is up to you, and will depend on your target audience. However, there are a few simple checks you can carry out on your own website to get an idea of how accessible your website is.

1. Is your website code valid?
Valid code means that it has been written according to a set of guidelines. Think of it as writing an essay using correct grammar. If the reader isn't distracted by poor spelling and misuse of characters like semi-colons, they find it easier to read, if the structure is logical it makes it easier to understand. So while valid code isn't the be all and end all of accessibility it's a good starting place.

The easiest way to check your code is to visit The W3C Markup Validation Service and enter your website address, this will then let you know how many errors are in your code. If this number is high, it is may be worth getting your website looked at.

2. Do Images have descriptions?
All images that display information should contain a description, in an 'alt' tag. In Internet Explorer, hover your mouse over an image and a description should appear. Check that this relates to the image and is an accurate description. This text will appear when images cannot be displayed, or will be read via a screen reader to those with visual impairments.

3. Does your website have a sitemap?
Somewhere on your website there should be a link to a sitemap or a list of all pages on your website. This allows visitors to quickly see exactly what content is available on your site and stop them getting lost on your site.

4. Do you need a mouse to access your website?
Leave your mouse alone and try to navigate through your website using the TAB, SHIFT+TAB and ENTER or RETURN keys on your keyboard. If it can't be done visitors who cannot use a mouse will not be able to access your website content.

5. Do links make sense out of context?
Read through the links on your website. Can you tell just from the link text where it will go? For example a link saying 'Contact Us' tells visitors you are likely to get to a page containing contact details, while 'Click here' or just 'here' could lead anywhere.

6. Can your text be resized?
For visitors with poor visibility it must be possible for the text on your website to be resized. To check that this can be done in Internet Explorer go to 'View' > 'Text Size' > 'Largest'. Make sure your website can still be used at this size.

These are basic accessibility checks and will not give you a full review, but can give you a good idea. If lots of issues arise from the checks above it is highly likely that your website is not accessible. For a full accessibility review of your web site call Picseli on 01792 222302.

Web Content Accessibility Guidelines Version 2 is released

On December 11th 2008 The World Wide Web Consortium (W3C) launched version 2 of the Web Content Accessibility Guidelines.
http://www.w3.org/News/2008#item210

Following a number of years in draft status, version 2 of the guidelines is intended to make it easier for developers to adhere to the standards, make them easier to follow and test, therefore making websites much better for people with disabilities or alternative methods of using the Internet. Here it is hailed as A New Era for Web Accessibility

In brief the guidelines are:

• 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
• 1.2 Time-based Media: Provide alternatives for time-based media.
• 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout ) without losing information or structure.
• 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
• 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
• 2.2 Enough Time: Provide users enough time to read and use content.
• 2.3 Seizures: Do not design content in a way that is known to cause seizures.
• 2.4 Navigable: Provide ways to help users navigate, find content and determine where they are.
• 3.1 Readable: Make text content readable and understandable.
• 3.2 Predictable: Make Web pages appear and operate in predictable ways.
• 3.3 Input Assistance: Help users avoid and correct mistakes.
• 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

All websites produced by Picseli will aim to comply with the Web Content Accessibility Guidelines 2.0.