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
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:
- Blind and vision impaired: Ensure your site
is screen reader friendly, easy to navigate, correctly
labelled and use good colour contrasts.
- Hearing impaired: Ensure you have text
available where you have used audio. Use an easy to read font.
- Physically impaired: Ensure your site is
able to be navigated using a keyboard. Not everyone can use a
- Elderly people: Use good colour contrast
and easy to read fonts. In some cases, being able to enlarge
the text may assist.
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
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
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
Some quick navigation keys
that may be used on the internet with a screen reader
The following keys by themselves jump to the next available
element; adding the shift key causes them to jump to the previous
• 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
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
A good reference website that I came across from
the RNIB UK is called "design and build accessible websites". It
can be found below:
This site covers all the bases that a good website should take
Another good reference page is from Vision Australia and called
"ten tips for making your website more accessible". It can be
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
Here are some ideas that I
think are important - to assist with making your website
Use clear, specific,
easy to understand language. (Reason: not everybody
understands technical language, and peoples vocabulary levels
Make sure the information on a page relates to that page. This may include
external links, but also things such as headings. (Reason: keeps
information easy to follow).
- Fonts and
colour contrast: Use good, clear easy to read fonts and complimentary colours
(such as Arial, with white text on a black background or black
text on a white background). Also be aware of the size of the font you use.
(Reason: Clear, easy to read fonts make it easier to read,
(and therefore faster to
locate) information for those with some useful
vision. This applies also for older people. Using hard to see
fonts can do the opposite. Using bad colour combinations can
do the same. Just remember, if you find it hard to see, so
will the person trying to view your website. Make sure that
your text can be enlarged.
and text alternatives: When using photos, images and
icons etc., ensure these are labelled
correctly. (Eg. Do not leave it as "12345.jpg" but
rename it something logical).
When providing a text alternative, call it something descriptive and relevant
like "Hurricane's football team after their recent win". If it
is a graphic called login, call it "login". (Reason: If left
unlabelled, it may report as "button" which does not mean a
lot. Being consistent
with labelling items also helps navigation and avoids
frustration). A good example of consistency is the New
Plymouth District Council website. http://www.newplymouthnz.com/CouncilDocuments/NewsReleases/
It is logical, and what I
hear with my screen reader is what sighted people are seeing
in front of them. Another good example is http://www.trademe.co.nz
on this site makes navigation a breeze.
text for maps: A sighted person can "see" a map (eg.
for enrolling on a course at the admin office at polytech
etc). A blind person could use a screen reader to hear "Use
Smith Street entrance and the administration building is on
your right". (Reason: Use descriptive
alternatives as not everyone can see a map, and
hearing the word "image" may not mean a lot).
- Labelling of
links, graphics and buttons:
Correct relevant labelling of
links, graphics and buttons makes them easy to understand
and navigate. (Reason: a poorly labelled link which cannot
be seen visually may make no sense. (Eg. click here) Where
am I going to when I click on it? Again, relevant
descriptions are essential).
Information should be set out in logical order. (Reason: It makes it a lot
easier and faster to find).
- Lists and
tables: Again, relevant descriptions are needed.
(Reason: faster navigation). Summaries/captions might usually
say "Table 1", but rename this to something relevant such as
"Timetable for conference" or "account balances" etc.
of headings: Format headings
as "heading 1" etc. (Reason: This makes for much faster
navigation when the user wants to press "h" for heading).
Remember, they may want to skip by heading, rather than have
to listen to every single item on the page. Headings in tables need to
be named logically.
(Reason: If you go to a bank website and jump down by pressing
"t" for table, and the heading is blank, it would be more
logical to have a heading called Account summary, or account
1, account 2 etc rather than just "table").
and skip links: Provide skip links or landmarks.
(Reason: people can navigate
and skip to the specific area they need rapidly).
- Video clip
captions: Use a relevant
descriptive caption for a video if you can. (Reason: this will
tell a person what the video is about).
Have a search engine labelled
correctly. (Reason: this makes information faster to
find and will avoid getting the "search" box confused with
other edit boxes).
being made accessible: Making flash accessible means
that we can access the same
information as sighted peers. Making buttons
accessible can make a big difference. This applies to flash
video or a flash form. (Reason: If flash content is used, and
a screen reader cannot intercept it, then we will not know
what it is about).
A simple OCR done on a document (once the image has been
scanned) then saved as a PDF, can make it accessible! If it is
not OCR'd then it may not be accessible. (Reason: If a page
has a PDF with product information that is not accessible by a
screen reader, then I not only miss out on that information,
but I may also choose not to purchase that product). DOC, TXT, HTML etc: Having
information in alternative formats such as .doc, .txt, .html
and .PDF means that people can still access your information.
This can either be on-line or off-line. Forms: Make sure that
forms on your website are able to to edited, and that sections
are labelled correctly. If a screen reader is not able to talk
to your form, then the user cannot enter the correct
information. If items are not labelled correctly, then
information may be entered in the wrong places etc.
details: If a screen reader user is having problems
with your website, have "contact us" easy to access. (Reason:
so that they email you the exact issues that they are having
with your website, or be able to ring you and sort it out).
For more in-depth information on
how to make your website accessible to a wider audience, please
visit the link below:
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
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:
Here is one of my personal favourites:
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
There are many, many more good accessible websites out there
from all around the globe.
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!