Making your website fully accessible for visually impaired and blind users - Heart Internet Blog - Focusing on all aspects of the web

About the author:

Guest blogger Steve Spamer is the webmaster at www.crustysocks.com; “Being registered blind and a webmaster can be a real challenge in itself, but accessing the web can prove impossible at times for a VIP user. In this article I’ve tried to highlight common problems encountered by a VIP…and what can be done to make websites accessible with minimal effort.”

If you have an idea for an article and would like to see it published on our blog and linked to in our monthly newsletter get in touch with us at marketing@heartinternet.uk

Background

When building, designing or re-designing a website, there are many factors that need to be taken into consideration.  With many webmasters prioritizing aspects like visual appeal, eye catching flash animations and non labelled image links, they are, unfortunately overlooking one major consideration…and that is the issue of “web accessibility” for visually impaired and blind users.

You may be thinking “how does a blind or visually impaired person use the internet?”  Well, with screen reading technology, the ability to increase font size and change the text and background colour to create a suitable contrast, along with a dedication to web accessibility, it can make it possible for this section of society to use the internet perfectly well.  So, if websites are displaying certain information purely via a medium like animation or an image, it’s not difficult to understand how this is excluding a significant percentage of users.  Think of this from a business point of view, you are, on a fundamental level, making it impossible for potential customers to access your services!

An RNIB (Royal National Institute For The Blind) review, carried out by a team at the School of Hygiene and Tropical Medicine in 2005, revealed that there are approximately 2 million people in the UK alone suffering from significant sight loss so you can appreciate web accessibility is an important aspect that needs addressing. One thing to note is that accessibility can easily be integrated into a website with very little compromise, simply by being aware of what constitutes “inaccessibility”.  So, to the question of “how to make a website accessible?” Well, as with any project you can pull out all the stops and work on every possible aspect, but for the sake of this article, I’ll highlight the issues to be addressed, along with what can be done to integrate web accessibility.

Navigation: Make accessible

Implementing “headings” into a webpage will make it possible for a blind or VIP user to easily navigate and jump to sections of a page via keystrokes.  Code example:

<h1>Welcome</h1>

This will also help sighted and low vision users to find specific sections of the page even quicker, along with eliminating screen reader users having to arrow down a page to find relevant content.  Remember, what’s seen on the screen isn’t always how data is processed by the browser.

Images: Make accessible

Even though someone can’t see, in many cases they still want to know what a certain image is, as it can be relevant.  Using a screen reader, whenever an image is encountered, it will simply say something along the lines of “graphic”.  By adding the “alt” attribute to the image tag, you can add a brief description of what the image is.  Code example:

<img src="image.jpg" width="96" height="76" alt="Company logo, a red sun rising behind a snow-capped mountain">

So, instead of hearing “graphic”, the user will hear your description.  This may seem unnecessary, but with a page with many graphics, it will bring relevance to the VIP user.

Images links: Make accessible

Often webmasters use an image as a link to another page.  As above, a screen reader user would only hear “link graphic”…they will have no idea what the link is linking to. One way around this is to incorporate the name of the link into the “alt” attribute of the image.   Code example:

<a href="target.html"><img src="image.jpg" width="96" height="76" alt="Click for target page"></a>

Flash multi media: Make accessible

Flash is often inaccessible and, if very active, can be very distracting to VIP’s, as well as other disabled users, e.g, people who have epilepsy.  Having vital information within flash or adjacent to flash can make it very difficult, so please be aware of this. Usually the icons within a flash player need to be clicked with a mouse or are simply a “button”.  Like an image link, a button tells the VIP user nothing.  There are many alternative flash players which are coded to label these buttons, so if a screen reader user moves to a button, rather than saying “button” it will say something like “full screen button”. You Tube uses such a player and this can be a great accessibility plus for any site.

One more thing to think of is providing an alternative.  E.g, if the flash is playing music, then give the user an alternative means of accessing it, a “text.m3u” link that will stream the music or video for example.

Java: Be aware

There are a host of java codes that add supposed functionality to a website, but in many cases these can prove to be totally inaccessible.  This can be a minefield, but you need to be aware that although things may look great, it can be unusable to a screen reader user.  Text based java can be ok, e.g., clocks, links, etc, but many things like chat/voice chat rooms, etc are often not.  There’s no easy way around this, but please be aware of these java code pitfalls.

Font and colour: Be aware

Giving a user the choice of changing the font, text size/colour and background colours is a huge plus for any website with accessibility in mind.  Code can easily be obtained to achieve this and will benefit all VIP users from the slightly impaired to the partially sighted.

A final note

A screen reader user will exclusively use the keyboard for access.  So, please be aware that if you can only access something with a mouse and not the keyboard, there is an accessibility issue.

Accessibility is about inclusion.  Unfortunately, not everything can currently be made accessible, but if you address the areas that can be changed and accommodate all users where possible, you are driving forward the crucial issues surrounding web accessibility.

 

Subscribe to our monthly Heart Internet newsletter, filled with the latest articles about web design, development, building your business, and exclusive offers.

Subscribe now!

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Leave a reply

  • 14/10/2009

    Nicely summarized.

    As a totally blind person, I’m constantly coming across sites that don’t make use of headings, which is so simply to implement.

    Furthermore, it has the added advantage of offering signposts to all visitors as most will tend to scan a page rather than read every word.

    Help your visitors by offering these signs.

    Chers

    Darren

     
  • Lorraine

    20/10/2009

    Hi

    I have just redeveloped our club website on freespace here at Heart Internet. I have tried to address the accessibility issues and would like feedback on whether I have been successful.

     
  • 21/10/2009

    Lorraine

    Its great that you have followed our blog post and applied it to your own site. We are not web accessibility experts here (our guest blogger Steve knows this areamuch better than ourselves) but the site appears to be very clear and easy to navigate.

    Matt

     
  • Lorraine

    21/10/2009

    Thanks Matt. I also went on the RNIB site, they have lots of information on do’s and don’ts. The thing that came across the most was to keep it simple and put a description (alt/title) against all objects on your page and to warn if a link jumped to a new window.

     
  • Travel Cool

    02/02/2011

    excellent information

     
  • Vizz Media

    29/04/2011

    Great data worth reflecting on. Keep posting good content.

     
  • Stefanos

    19/02/2012

    Great article! In Greece most websites are not accessible for visual impaired and blind users! We try to change this bad situation. The problem is our current bad economy!

     

Comments are closed.

Drop us a line 0330 660 0255 or email sales@heartinternet.uk