These pages started life as nothing more than a way for me to play with HTML
& javascript but then have gradually become a vehicle for showing others how
to set out basic pages that should be accessable, useable and most importantly
informative. It should be remembered by all webmasters that they now have a
legal requirement to make their pages accessable to all, under the recent
Disabled Descrimination Act (DDA) it is a requirement to, where practically
possible' make all computer software accessable - sadly nobody has been
taken to court yet although there are hundreds if not thousands of examples
where this law is not being enforced - please do read this page & see if you
could do anything on your web space to bring your pages up to legal
requirements (it's not difficult!).
When designing for people with bad vision consider how you might design for
a mobile device, like the smaller screen area the blind can only focus on
a reduced area of the screen at once - you may already have a fully accessible
site via your mobile version.
This should apply to all your site visitors no matter what level of user they
are and it amazes me how many of these areas are ignored:-
* Is the customer login obvious? so many now are hidden under layers of menus,
My local docotor's surgery for example, the patient login is no where to be found
on the home page.
* Can you be contacted? Make your contact details obvious, so many companies
now do not allow direct contact via phone or email - personally this puts me
off using the company as it makes me feel they have something to hide and
from the point of accessability means that a user have problems will just have
to go else where so you loose business. Remember also that if you as an
organisation son't make your services accessible you may be breaking UK and
other regions accesability laws.
Testing your pages & software does not need any special help, just use your
brain & try the following:-
There are several screen reading packages on the market most of which have free
demo versions which you can play with - I use & would strongly recommend trying
NVDA which is what I use on all my machines.
How can I use them? I hear you ask, it's really simple - switch off your screen
or shut your eyes & see if you can still work your way round your site with the
keyboard & what the screen reader is telling you. You will need to refer to
the list of command keys within the screen reader but this should only take
seconds for the basics. For example once you have got NVDA running try looking
at these pages and try typing the letter 'H' to jump round the headings, "K' to
find links etc.
For those with no vision or physical problems using the mouse is not currently
practical.
Although there are many design & build tools for HTML I decided to 'hand craft'
these pages so I wrote them using notepad, I wanted to understand how HTML
goes together & also wanted to keep the source as small as possible.
Many of the design tools do include accessibility features so do take
a moment to read the manual for your product regarding them & don't turn
them off! I gather that some of these tools have the accessibility features
turned off by default so equally check that they are enabled before you start
to build your pages.
Multi media content can be used in the normal way but do remember to label
these items so that the screen readers can report them correctly.
Now lets have some simple stuff here, keep your pages to a pattern so once a
person has got the feel of the setup they can apply this to all pages on your
site. This is not just a case of style sheets, think about the text
you use, for example if you have a "log in" make sure you "Log out" not
"sign out" or "sign off" it's amazing how many sites missmatch these terms
which makes life tricky for the blind & makes the site look badly constructed.
("Log out" is also, in my mind, two words many sites show it as "logout" - not
helpful!).
Don't be stupid! please don't have a link to your home page on your homepage,
it's just lazy & a waste of space, if I see this link I feel that I'm not on
the home page & so on.
Why have the link to your site displayed on your page? if I can see it I'm
already there.
Don't add key strokes to your links - many sites provide hot keys for various
links & features of their sites, we have enough hot keys to remember with the
screen reader as it is - in a quick pole I could not find any blind
colleagues who had ever used them. This one is an old part of the
accessibility standards that could be considered for removal.
Use lists & tables but do make sure that there is going to be more than
1 item in the object, a list with one item logically to my mind is not
a list!
Ensure that fields in forms are in sequence when you tab round them, don't
use the mouse......
Clear the clutter! why is there a search field on my log in screen? I've
asked to log in to your site so all I want to find is your log in requirements.
Why have you got dozens, if not hundreds, of links on one page? even the sighted
find this bad design, to me it shows a lack of structure to the sites content.
The following chunks of code illustrate some of the small changes required
to make many web pages fully accessible, most will only take a few
seconds to implement but will really make a difference.
First & most important please use 'ALT' tags for all images, so
<img src="file.ext>
is no use to anybody using access technology, but:
<img src=file.ext alt="picture of bus">
is perfect!
Use headings, most screen reading software will look for these and will
offer them to the user as a place to jump to. Consider the heading number,
screen readers will usually be able to jump to each level - see my links
pages for examples.
If you have a link to a heading try laying it out like this:-
<h1 align="LCR"> <a name="link name">
The heading text
</h1>
Notice where the anchor point is placed, this means then when you
jump to the anchor the screen reader will probably be able to read the heading
text automatically.
PLEASE, PLEASE don't attach hot keys to links we have enough key strokes to
remember with the screen readers themselves without these. A quick check
round my blind friends found that nobody has ever found these useful.
Use lists but please make sure there is at least 2 items in the list & I
personally don't find lists within lists very clear to follow, a heading
followed by a list seems more logical to me.
The big problem I find here is when sites use visual verification codes to
ensure that it is not some automated system trying to enter their system, do
please check that your verification system has an audio challenge facility to
get round the picture checking - remember this is a legal requirement in the
UK and many other countries.
Like headings screen readers can take advantage of imformation set out in
tables, keep in mind when setting out your tables whether the data in them
would make sense if you could only read them a complete line or column
at a time - tables with unaligned columns can be confusing!
Use the tag to describe your table, if you are currently using the
'summary' label in your tables this should now be updated to .
When using tables within forms check the tab order of fields, use the
tabindex tab to control flow & the label tag to announce what field you are
currently in, take a look at the source code of my feedback page for a simple
example.
Nested tables can be dreadful to work round, nesting seems to be used to
control page design rather than hold proper table data - please avoid!
The ability to change the size of the font beingh used is now included in many
browsers, Google chrome & firefox for example uses control plus the "+" or "-"
sign to increase or decrease font size. Apart from those with problems with
low vision this can also be helpful for those using larger monitors at a
distance such as TV's used as computer screens in the lounge.
Still with font, many visually impaired people find that they like to be
able to select the colour of the displayed text - a bit more tricky to
implement but there is example code to pinch!
Please set the default language of your page at the start by using something
like ""html lang='en-gb'" where 'en-gb' is the language identifier for the
region you are targeting your page at. This will assist screen readers to deal
with your page and how it reads it. I've come across several pages which
try to read the english text in, for example, Spannish of French rendering
that page useless.
The final trick with HTML hints and tips is "just pinch it from someone else"
take a look at the source code of other peoples pages and see how
they did it.