Website accessibility

I thought I would put together an information page for web developers, (or newbies) and explain the reasons why certain formatting and labelling are used to improve web accessibility.

People who are visually impaired or blind may use some type of adaptive technology such as a screen reader or magnification to surf your website. Without this technology at home or work, they would not be able to interact with your website at all. In some cases some people may be able to get the screen reader funded and in other cases it may come out of their own pocket. However, it is not just the blind and visually impaired that you need to consider when designing your site. There are a range of access issues within the community. Some are listed below:

Using Firefox to show unlabled elements on a webpage

You will need a copy of the Firefox browser from the following website at https://www.mozilla.org/en-US/

While Firefox is open, go to the webpage you wish to inspect. Press the Alt key to get to the file menu, then arrow to the tools menu, then down to web developer. It has a sub menu. Arrow down to the accessibility tab, then press the Enter key. You will now be given options such as check for issues. You can have it do certain categories such as all issues, contrast, keyboard, and text labels. You can also use the shortcut keys Shift + F12 to bring up the accessibility inspector, and then Shift + F12 to turn it off again.

A basic written tutorial on how to use the accessibility inspector in the Firefox browser can be found at https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector

A video tutorial can also be found at https://www.youtube.com/watch?v=YhlAVlfH0rQ

The complete guide to website accessibility requirements by Yoyo Design

This webpage titled website accessibility is a resource page which gives you tips on creating an accessible website. After all, making your website inclusive makes good business sense as it can make it accessible to a wider audience! To find out more, please visit the following link https://yoyodesign.com/accessibility-resource/

What is a Screen reader?

A screen reader reads what is on the page in front of you.  So, what you see visually on the screen, is what the screen reader may feedback to the user - either via a synthetic voice, or via a Braille display. The user has the option to listen to what is on the screen in front of them (using a screen reader), or feel what is on the screen in front of them (using a Braille display). As they run their pointer finger across to feel what is written on the Braille display, they may silence the screen reader if they don't want to hear what is written. Regardless of which adaptive technology is used, in most cases, this can be very pricy to the user. This technology is necessary so that the user can interact with the on-line community, whether it be a website, a friend using a chat programme or an email. A sighted person would normally just click on a link that they see, a person using adaptive technology relies on the page relaying back information about what is in front of them to interact. A screen reader needs items on a web page to be labelled and formatted correctly, and set out in a logical manner, otherwise, without this done properly, navigation may give out incorrect information, no information or cause confusion. Having a page done correctly means that blind and vision impaired screen reader users have the same access as their sighted peers. It also makes for faster navigation of websites.

These technologies are usually an added extra, on top of the price of the computer they have bought from a shop - making it instantly more expensive for them to use.

A popular free screen reader called NVDA (which stands for Non Visual Desktop Access) can be found at http://www.nvda-project.org 
There is both a hard drive version and a portable version. The portable version can be put onto a USB stick, so it can go portable and be used on more than just one computer. In New Zealand, NVDA can be found on every APN (Aotearoa People's Network) public library computer nationwide.http://www.aotearoapeoplesnetwork.org/

In most cases, the screen reader user will use a combination of keys on the keyboard - depending on which task is being performed.  They usually won't use a mouse, only the keyboard or Braille display. Again this depends on their level of remaining vision.

Some of these keys may be: using the tab key; pressing the alt key to bring down the file menu; arrow keys to go left, right, up or down a menu or list.  The keys used will vary, depending on whether they are in a programme or navigating web pages on your site. These quick navigation keys are usually used in a browser such as Mozilla Firefox or Internet Explorer. Any one of these keys allow the user to jump around your site quite quickly. (Eg. If the letter H was used, they could jump around by headings, T for tables and so on; as long as you format the data on your web page as heading and table etc).

Some quick navigation keys that may be used on the internet with a screen reader

Single Letter Navigation
The following keys by themselves jump to the next available element; adding the shift key causes them to jump to the previous element:

h: heading • l: list • i: list item • t: table • k: link • n: non Linked text • f: form field • u: unvisited link • v: visited link • e: edit field • b: button • x: check box • c: combo box • r: radio button
q: block quote • s: separator • m: frame • g: graphic • d: ARIA landmark

These quick navigation keys may be different in other screen readers.  Please see the appropriate help section to see what they are within each programme.

Testing your website for screen reader accessibility

If you are used to using a screen reader, (or keen to download one - and using the help file learn how to use it), then you may be able to test your own website. If not, you can ask a screen reader user to test it for you and provide feedback. You may be able to contact your local Blind Foundation and ask for assistance in this area. Alternatively you can refer to a screen reader users list (Eg. the NVDA community on-line) http://www.nvda-project.org/wiki/Community for computer users to test your site and provide helpful feedback.

Remember, when testing a website with a screen reader, ensure that the page you are testing is in focus!

How to make your website accessible

A good reference website that I came across from the RNIB UK is called "design and build accessible websites". It can be found below:
http://www.rnib.org.uk/professionals/webaccessibility/designbuild/Pages/design_build.aspx
This site covers all the bases that a good website should take into account.

Another good reference page is from Vision Australia and called "ten tips for making your website more accessible". It can be found below:
http://www.visionaustralia.org.au/info.aspx?page=2310

Following these guides, will not only help you to ensure that your site is easy to navigate, but also that it is screen reader friendly. Again, it will also help you to broaden your customer base!

Here are some ideas that I think are important - to assist with making your website accessible


For more in-depth information on how to make your website accessible to a wider audience, please visit the link below:
http://justcreativedesign.com/2008/07/18/how-to-make-your-website-more-accessible/

Some good (and not so good) examples of accessible and inaccessible websites

While I was looking around on the web for some good (and bad) examples of websites, I was able to find the following sites. (This should give you a better idea of what to do, and what not to do with your own website!). You should be able to spot the differences very quickly. See what you think...

This is one web surfer's view of what they felt were poorly designed sites:
http://www.webpagesthatsuck.com/worst-websites-of-2010-contenders.html
I felt that the clutter on some of those pages was definitely not helping navigation. Layout, colours and various attributes can definitely either make or break a site.

Here are some sites that were voted as accessible websites and/or screen reader friendly:
http://www.dmxzone.com/go?5951

Here is one of my personal favourites:
http://www.trademe.co.nz I like this site because I can jump around by headings, links, lists, tables and so on. To me, this is a very well put together website. It is actually an on-line auction site, but it has made itself accessible to all - in turn widening its customer base.

There are many, many more good accessible websites out there from all around the globe.


Some useful links


In summary, just remember, when you are designing (or in some cases updating) a website, take into account what works and what doesn't. A very well designed website may broaden your customer base, and a site that is badly designed may have the opposite effect!


HOME