Designing Web Pages that are Accessible to All

Document Sample
Designing Web Pages that are Accessible to All Powered By Docstoc
					                                                         Designing Accessible Web Pages – Version 1




    Designing Accessible web Pages


                                        Susan Lee
                    The Learning Development Centre




                            Last Revised – June 2002




The Learning Development Centre – s.c.lee@staffs.ac.uk                                                1
                                                         Designing Accessible Web Pages – Version 1




  Introduction


The impact that the Internet has had over the last few years has exceeded all
prophecies and expectations. It has been heralded as freedom of information for all,
regardless of who they are. Unfortunately for a sizeable community this is not true. As
Higher Education uses more technology-based tools for learning and teaching, we
may be putting people with disabilities at a disadvantage. What could be one of the
most liberating of mediums for people with disabilities is unusable a lot of the time.
With some thought and a little extra time most web pages could be made much easier
to use by following a few simple guidelines.


The last 10 years has seen a marked increased in government funding in the UK for
the support of students with disabilities in Higher Education. This coupled with higher
expectations has resulted in many more students with disabilities entering Higher
Education. As we as an institution move towards more technology assisted learning
and new legislation takes effect from September 2002, we need to cater for all
disabled existing and potential students.


As the range of multi-media used on the web becomes wider and more varied, people
with different types of disabilities are being affected. Web designers may have to
make decisions about whether to cater for the exception as (or at the expense of) the
rule. Presenting your web pages in a variety of media means that people can choose
the media most appropriate for them. Web designers need to make the distinction
between what users must be able to see or hear and what it would be nice for users to
see or hear. A lot of designers will want to use graphics and animations and these are
not be a barrier to the disabled if alternatives are offered. Designing web pages for
accessibility will increase your accessibility to all as following simple guidelines
should ensure a better designed web page that loads faster and more efficiently. Pages
that are accessible are not necessarily boring.


The problems that affect people with disabilities using the web vary. A very large
percentage of people have some sort of disability, 1 in 12 Caucasian men are colour



The Learning Development Centre – s.c.lee@staffs.ac.uk                                                2
                                                         Designing Accessible Web Pages – Version 1


blind! The nature of peoples’ disabilities also varies, people who are pre-lingualy deaf
use sign language differently from people who have become deaf later in life. More
people with hearing difficulties are being affected by the web due to the increasing
sophistication of web pages and improved capabilities of computers. As more sound
and animation is used a higher percentage of web users will be affected.


People with a disability often used what is usually called Assistive Technology, this
can be hardware or software and may be an alternative keyboard, an adapted mouse or
screen reading software. Others use adapted hardware and software because of their
environment A few adaptations to your HTML can cater for these people.


This document aims to give some pointers to things to bear in mind when designing
your web pages and help with advice on simple ways of catering for assistive
technology. Disabilities can affect a lot of us at some point in our lives, some
disabilities are progressive, (with the aging process we may all experience eyesight
problems and lessening motor skills) and some are temporary like an injured hand. By
following simple guidelines you may not lose the student who forgot their reading
glasses that day!


    Categories


Disabilities are usually put into one of four categories:


•    Visual
•    Aural
•    Motor
•    Cognitive


A visual Disability can be a whole range of things. People who are legally blind may
have some vision; they may be able to distinguish between light and dark. This may
range from difficulties in distinguishing red from green to almost monochrome.




The Learning Development Centre – s.c.lee@staffs.ac.uk                                                3
                                                         Designing Accessible Web Pages – Version 1


A lot of people with visual problems still use their eyes to see. Some need large text,
others small. Most need a highly contrasting colour scheme; some can only read white
text on black backgrounds, the point is that websites should be flexible in design.


With the advent of more multi-media content on the web, with animations and movie
clips etc being used more, people with hearing problems are finding more of the web
becoming inaccessible. What was perhaps once one of the ways that people with
hearing problems found they were playing on an even field may not be true any
longer.


Motor (or physical) Disabilities may mean the user cannot use part of their body or it
may mean the user has weak muscles and therefore limited ability. The user may have
problems with control; many mouse movements are surprisingly delicate and call for
a great amount of dexterity and precision. The scope for designing Web pages with
people with motor disabilities in mind is more limiting. As more and better hardware
devices are made, this becomes less and less of the designers’ problem. It is a good
idea to not make things too small requiring very accurate mouse control, or awkward
keyboard combinations. People often have temporary disabilities like hand injuries
that may put them off visiting your site and the less expert user that hasn't developed
mouse skills shouldn't be discouraged from revisiting your site.


Cognitive Disabilities cause problems with reading or writing or keeping
concentration for any length of time. Problems like dyslexia and autism fall into this
category.


  Legislation

There are now legal reasons in the UK why you should make your pages accessible to
all. The Special Needs Education Discrimination Act (SENDA) was passed in March
2002 and is the law from September 2002. Education was exempt from parts of the
Disability Discrimination Act (DDA) 1995. This exemption has now been removed
and we must make an effort to make sure services are accessible. Educational
establishments are obliged to make sure they are not discriminating against people
with disabilities. This includes anticipating needs of students. For more information


The Learning Development Centre – s.c.lee@staffs.ac.uk                                                4
                                                         Designing Accessible Web Pages – Version 1


on this see http://www.disabilitynet.co.uk/info/legislation/ddaguide/legislation.html
(This is modelled on the American Disability Discrimination Act.) JISC have funded
a service called TechDis http://www.techdis.ac.uk to provide information and advice
to FE and HE on technology to help people with disabilities.




  Improving Accessibility benefits all users.

Accessible design benefits all Web users. Promoting device-independence Web
content will mean more people can visit your web site.

    •    By understanding your HTML, your code will be cleaner. The files you
         produce will be smaller and more easily edited and kept up to date. Obsolete
         and out of date information is a major turn-off to web users.

    •    One of the main reasons people switch off from sites is the time taken to
         down load them. By following the guidelines for accessibility you should
         increase your download time.

    •    Checkpoints that support Web access for people with visual disabilities, also
         help people accessing the Web from mobile phones, hand-held devices, or
         automobile-based PC's.

    •    When connection speed is too slow to support viewing images or video; or
         when a person's eyes are "busy" with other tasks. Captions support access for
         people with hearing impairments but also help people who are using the Web
         in noisy or in silent environments; and they make it possible to index and
         search on audio content.

    •    Use of Cascading Style Sheets (CSS) for control of presentation not only
         facilitates accessibility, but also speeds download time of pages and can
         reduce costs of maintaining or updating the "look and feel" of sites. This can
         also keep a "professional feel" to sites at the same time as more than one
         person working on a site, people like consistency and often having more than
         one person working on a site can cause problems.

    •    Search engines will be able to index your site more easily.

    •    Some busy people turn off their graphics so meaningful alt tags to images will



The Learning Development Centre – s.c.lee@staffs.ac.uk                                                5
                                                         Designing Accessible Web Pages – Version 1


         also help them.

    •    Providing captions for the hard of hearing may also benefit people whose first
         language may not be the same as yours.

    •    Not everybody has speakers with their PC. Adding captions to pictures for
         people with hearing difficulties you are also making your page accessible to
         people with no way of hearing your audio.

    •    Older PCs may not have enough room on their hard drives for anymore plug-
         ins and so may not be able to cope with sophisticated multi-media web pages.

    •    Some web users only have access to text. This will increase with more people
         using phones to access the internet.

    •    The fastest growing community is the elderly and unfortunately eyesight often
         deteriorates with age. Apart from altruistic reasons, the elderly often have a
         larger disposable income than average and so web page designers have a
         sound financial reason to bear sight problems in mind.




  What to consider
Navigation
    Make sure your web pages can be used both with the mouse and the keyboard.
    Don't use colour as a visual navigation tool, there are a lot of people with
    problems with colour.

    Don't open new browser windows if you don't need to. People with problems with
    visibility need to know where they are! Make sure that functionalities are
    available, mouse-specific events like "OnMouseClick" need to be available
    through alternative keyboard inputs.

    Navigation is closely associated with memory so people with cognitive problems
    need it to be simple and consistent, they may need visual clues, both of which will
    aid all users and encourage them to use the web site.
Links
    Make links meaningful; avoid “click here,” a lot of screen readers allow the user
    to listen to the links out of context. Also it is very important to maintain your links
    and not leave "dead links" in a page, this makes life difficult for visually impaired


The Learning Development Centre – s.c.lee@staffs.ac.uk                                                6
                                                         Designing Accessible Web Pages – Version 1


    users and frustrating to all!

    Don't have links separated only by white text, screen readers may run them
    together, they can be separated by a vertical bar ( | )

    Note: Text only browsers like Lynx will provide a list of all links on a page at the
    end of that page.
Animation
    Animation may only need a meaningful title or a full explanation depending on
    its’ use. If the animation is there to illustrate a point then it is going to need more.
    As more multimedia is used on the web then difficulties are arising for people
    with aural Disabilities. Captions will help. Incidentally this will have the added
    bonus of helping people whose computers don’t have speakers. For general
    information on captions see http://www.captions.org/
Frames
    Try not to use frames, but if you must, always provide a NOFRAMES content.
    One of the reasons for avoiding this is it is important to keep your NOFRAMES
    information up to date.
Tables
    Tables can create enormous problems for visually impaired people using screen
    reading software that can often be solved by following a few guidelines. Tables
    and images should be used in web pages in relative positions not absolute. If
    people use screen enlargers this can help stop them having to scroll horizontally.
    This is really irritating to all users and so you may not lose as many viewers if you
    do this anyway.

    Don't use tables for layout purposes. If you use tables they should be well
    organised with clear headings and summarised if possible for clarity. You can use
    Cascading Style sheets for layout but be careful that they convert gracefully to
    browsers that can't read them like Netscape 3.0.

    Adding a summary to a table will not only benefit users with disabilities but will
    help users accessing the web with devices with restricted screens, (these are
    becoming more popular with the advent of things like WAP technology.)

    When using tables is necessary try and attach tags that help read it. For technical
    help creating tables that transform gracefully to text readers etc look at


The Learning Development Centre – s.c.lee@staffs.ac.uk                                                7
                                                         Designing Accessible Web Pages – Version 1


    http://www.webaim.org/tutorials/tables WebAIM have a lot of practical advice
    and technical help at their website.

    Avoid creating "newspaper style" columns of text using tables. Screen readers
    cannot handle them



    Web      accessibility             quickly and easily.                  knowledge         that
    guidelines are not                 Please don’t equate                  everyone can enjoy
    compulsory but if                  accessible          with             them.
    they are adhered to                boring and enjoy
    everyone           can             designing           your
    access your pages                  pages        in      the



    Will read as:
    Web accessibility quickly and easily knowledge that guidelines are not Please
    don’t equate everyone can enjoy compulsory but if accessible with them. They are
    adhered to boring and enjoy everyone can designing your access your pages pages
    in the


Images
    The “Alt tag” is the caption that sometime appears when you roll the mouse over
    an image on a web page. The text descriptions in "alt" tags should be meaningful,
    and if necessary put longer explanations on another page.

    If this isn’t enough you can put a description into a file. Using the HTML
    LONGDESC function a file may contain the text: “Our company logo consisting
    of a telephone with a light flashing on it. This is to symbolise our lighting the way
    to new technology.” Not all browsers support the LONGDESC attribute, to get
    over this you need to create a “descriptive link”.

    Use client-side image maps. This means the image map is downloaded to the users
    browser NOT referenced from the server.
    Try disabling the automatic download of images in your browser and then look at
    your page.




The Learning Development Centre – s.c.lee@staffs.ac.uk                                                8
                                                         Designing Accessible Web Pages – Version 1


Potential audience
    If you create a web page on self-checking for colour blindness then may just want
    to incorporate a text message describing page and then the wherewithal to skip the
    page if the user is visually impaired
Graphs and Charts
    Use Summarised descriptions using LONGDESC as described above.

    Try not to just use colour to denote areas e.g. in a bar chart, use textures as well
    and be wary when using colour in graphs, e.g. "the red line indicates..." use a
    different thickness of line as well.
Audio Files
    Add captions where audio is used. Don't forget that its not just speech that may
    need captioning, background sounds in a movie clip may be significant. Turn off
    the sound on your PC, does the movie clip still make sense?
Physical Vs. Logical
    Physical layout is not necessarily logical layout. Make sure that when screen
    reading software reads a page it is in a logical order. I.e. if you tab around a page
    does it jump about the page or move logically? This is one of the reasons why you
    shouldn't use tables for layout.
    Default order that the tab moves is the order in which the individual elements
    appear in the html. Change this using TABINDEX
Colour
    Do not rely on colour alone to convey information. A general rule is that you
    should design in black and white and add colour for emphasis. Some
    combinations of background and foreground colours can make some pages
    unreadable for people who are colour-blind. If you need to use colour to
    distinguish between things use blue, yellow, black and white. Use contrast as well
    as colour, people who can't distinguish between colours can often still distinguish
    between hue, (this is explained in more detail later on.)

    Provide labels for warning symbols e.g. if you must use a traffic light system,
    write "STOP" and "GO" on the buttons

    Don't give instructions that refer to colour like "click on the red button", give the
    button a relevant title.



The Learning Development Centre – s.c.lee@staffs.ac.uk                                                9
                                                         Designing Accessible Web Pages – Version 1


Fonts
    Use relative font sizes in your design not absolute, some browsers can't override
    these settings and the user may only be able to see fonts over a certain point size.

    Avoid using graphics as text. Text size and colour settings can be changed by
    most browsers but graphics can't. This will be of great benefit when changing or
    updating your site. Text can be easily changed whereas graphics need to be
    redrawn.

    Don't just create a heading by increasing the font size, use proper heading tags,
    e.g. <H1> Heading 1 </H1> or you could use cascading style sheets so as to not
    confuse people using screen readers.

    Don't underline large blocks of text. It can be confusing for users when there is no
    links and it is difficult for anybody to read.
Inaccessible Data Formats
    Some files like pdf or postscript are specifically created so that people can print
    off documents and therefore include a lot of instructions about printing. Though
    the printers need this information, text readers cannot distinguish between
    instruction and content and so the document becomes incomprehensible. "Access
    Adobe" translates PDF into HTML so if you use PDF please give the URL and a
    link to http://access.adobe.com/
JavaScript
    Some browsers can't read JavaScript and may only tell the user that there is
    unsupported script on the page. Whenever JavaScript is used make sure the page
    functions without it or that a parallel page exists. Having a box popping up to
    complain about JavaScript errors is just as irritating to sighted as well as non-
    sighted users, this error has been eliminated in later versions of most browsers.
Splash Screens
    A splash screen is basically a page that says “to enter the site click here.” It’s an
    extra page for which there is no use! It has been found in surveys that a large
    percentage of people are put off by them and it is just one more obstacle for
    people with disabilities to overcome.
HTML/Layout
    Make sure you take out all graphics properly. Screen reading assistive software



The Learning Development Centre – s.c.lee@staffs.ac.uk                                                10
                                                         Designing Accessible Web Pages – Version 1


    will pick up things that haven’t been removed from the code properly and so a
    graphic, which may not be visible, can be picked up. This can happen with web
    authoring software and so you should check your HTML.

    Structure your page using html properly. Don't use tables for layout and use
    Heading tags i.e. <H1> <H2>. By using heading tags visually impaired users can
    scan through a page quickly, skipping topics they find uninteresting. They can
    also use them to give them a good overview of a page and its contents.


  Being Aware of Specific Conditions


Colour perception
Colour perception is a moderately complex piece of physics and physiology. There
are several different ways to represent and define colour. Most Web designers are
familiar with the RGB (Red/Green/Blue) method for specifying a colour, but another
method, known as HSV (Hue/Saturation/Value), is useful for thinking about colour in
a Web page.


Hue defines what we typically think of as "colour." Hue is represented by a value
from 0 to 360. High and low values representing "warmer" colours. Warm colours
(such as yellows, reds, and oranges) appear to "approach" the reader visually, while
"cooler" colours (such as blues and greens) appear to recede. Using warm colours in
or as a background results in an unending competition for the "foreground" of your
readers' visual attention.


Hue specifies what colour is present, saturation tells how much colour is present.
Saturation is a percentage value, with 0 representing a complete absence of colour (for
example, a greyscale image). A saturation value of 100 by rights ought to indicate
"maximum" colour. But computers make it easy to create oversaturated colours (that
is, saturation values over 100%). Heavily oversaturated "psychedelic" hues result in a
visually distracting, tiring presentation.



The value attribute in HSV tells how "bright" the colour is. Value is also sometimes
referred to as luminance, and is also a percentage scale, where larger numbers


The Learning Development Centre – s.c.lee@staffs.ac.uk                                                11
                                                         Designing Accessible Web Pages – Version 1


represent more pure white. For example, a well-saturated red hue with high luminance
appears as pink, while the same hue with low luminance appears as maroon.
Luminance affects readability primarily through perceived size and contrast. Thus, a
large difference in luminance between foreground and background is a key element in
creating an easily readable page.


Dyslexia
Dyslexia is sometimes known as word blindness. According to the British Dyslexic
Association 4% of the population is severely dyslexic. Dyslexia has a wide range of
different symptoms. People with dyslexia can be affected by some, or all of them, to a
varying degree. Commonly dyslexics have problems with text and can use assistive
software like “Texthelp”, and mind mapping products like “Inspiration” help
overcome some organisational problems. Dyslexics often have problems with
organisation and time management. They may have some problems with co-
ordination and they often need help. Some subjects e.g. Art and Design, attract a high
proportion of dyslexic students, but all designers should take the sort of problems that
people with dyslexia have into account when designing web pages. Dyslexics are
helped by clear navigation, text being broken down into smaller chunks, consistency
etc. More specific information can be obtained from British Dyslexia Association
http://www.bda-dyslexia.org.uk


Epilepsy
There seems to be no evidence that looking at a VDU can cause an epileptic fit in
someone with Photosensitive Epilepsy. People using domestic televisions as computer
displays are recommended that they should view from at least 2.5m distance. More
specific information can be obtained from British Epilepsy Association
http://www.epilepsy.org.uk



Autism
People with autism can be easily confused and distracted. Simple consistent
navigation will help.




The Learning Development Centre – s.c.lee@staffs.ac.uk                                                12
                                                         Designing Accessible Web Pages – Version 1


Sign Language
If sign language has been used from birth then grammar will be different. British Sign
Language (BSL) has its own grammar and syntax. Be aware that American Sign
Language is not the same.


    The World Wide Web Consortium (W3C)

The World Wide Web Consortium W3C has done a lot of work on making the web
more accessible. To this purpose they have created the Web Accessible Initiative
WAI. W3C's Web Accessibility Initiative (WAI), in partnership with organisations
around the world, is pursuing accessibility of the Web through five activities.

•    Ensuring that core technologies of the Web support accessibility.

•    Developing guidelines for Web content, user agents, and authoring tools.

•    Developing evaluation and repair tools for accessibility.

•    Conducting education and outreach.

•    Tracking research and development that can affect future accessibility of the
     Web.



For more information see http://www.w3.org/WAI The WAI have produced a
reference guide of quick tips;



    QUICK TIPS TO MAKE ACCESSIBLE WEB SITES



        Images & animations. Use the alt attribute to describe the
        function of each visual.

        Image maps. Use client-side MAP and text for hotspots.

        Multimedia. Provide captioning and transcripts of audio, and
        descriptions of video.

        Hypertext links. Use text that makes sense when read out of



The Learning Development Centre – s.c.lee@staffs.ac.uk                                                13
                                                         Designing Accessible Web Pages – Version 1


        context. For example, avoid "click here."

        Page organisation. Use headings, lists, and consistent structure.
        Use CSS for layout and style where possible.

        Graphs & charts. Summarise or use the longdesc attribute.

        Scripts, applets, & plug-ins. Provide alternative content in case
        active features are inaccessible or unsupported.

        Frames. Use NOFRAMES and meaningful titles.

        Tables. Make line by line reading sensible. Summarise.

        Check your work. Validate. Use tools, checklist, and guidelines at
        www.w3.org/TR/WCAG.



        (c) W3C (MIT, INRIA, Keio) 2000/02

The Web Content Accessibility Guidelines checkpoints can be found in full at
http://www.w3.org/TR/WAI-WEBCONTENT/checkpoint-list.html


  Tools
Bobby
Based in Massattussess, US. The Center for Applied Specialist Technology (CAST)
was founded in 1984 it is a non-profit making organisation set up to expand
opportunities for people with disabilities through uses of computer technology.



Bobby is a Web based tool that analyses web pages and measures their accessibility to
people with disabilities. Bobby is a service from CAST and is based on the priority
checkpoints laid out by w3c WAI



You can submit your web page address and check to see how accessible your web
page is. It is very easy to use, just type in the address of the web page in a box and
click on "submit". You can check a whole site (as oppose to page) by downloading a
copy of the bobby software from http://bobby.watchfire.com/bobby/html/en/index.jsp




The Learning Development Centre – s.c.lee@staffs.ac.uk                                                14
                                                         Designing Accessible Web Pages – Version 1




Bobby signs indicate a Priority 1 level accessibility problem An appendix to the
guidelines, this is a list of checkpoints with priority levels (1, 2, & 3) of impact on
accessibility.

Priority level 1 checkpoints MUST be satisfied

Priority level 2 checkpoints SHOULD be satisfied

Priority level 3 checkpoints MAY be satisfied

Web pages must not have any priority 1 checkpoints to be awarded the bobby logo.



If your web page satisfies all the bobby priorities then you can register your site with
Bobby. Similar sites you can also register with http://www.Disabilitynet.co.uk ,
http://www.webaim.com and LIFT http://www.usablenet.com/


LIFT
LIFT is a validation service that sends you a report about your web site through the
email.


WEBSAT
The Web Static Analyser Tool (WebSAT) is a prototype tool that inspects the HTML
composition of web pages for potential usability problems. WebSAT allows the
usability engineer to investigate these potential problems so as to determine whether
they should be purged from the design of the web pages.

WebSAT inspects the HTML composition of web pages against numerous usability
guidelines. WebSAT can perform inspections using either its own set of usability
rules or those of the IEEE Std 2001–1999. In either case, WebSAT expects as input
the URL to a single web page or to a whole site. The output for a single web page is
almost immediate (depending on the page size). In the case of a whole site, the length
of time needed to analyse the site will depend on the number of pages that comprise
the site; therefore, an email address must be supplied so that the destination of the
result files can be identified upon completion. WebSAT is a tool in the Web Metrics
Test bed developed at National Institute of Standards and Technology (NIST). For


The Learning Development Centre – s.c.lee@staffs.ac.uk                                                15
                                                         Designing Accessible Web Pages – Version 1


more information, see http://www.nist.gov/webmetrics



A-Prompt
A-Prompt (Accessibility Prompt) is a software tool designed to improve the usability
of HTML documents by checking Web pages for accessibility barriers and then
providing designers with a way to make the necessary repairs. The tool's evaluation
and repair checklist is based on accessibility guidelines created by the Web Access
Initiative of the World Wide Web Consortium. The software is made available
through the joint efforts of the University of Toronto's Adaptive Technology Resource
Centre (ATRC) and the TRACE Centre at the University of Wisconsin. A-Prompt is
free and can be downloaded from http://aprompt.snow.utoronto.ca/demo.htm


Text Help
TextHelp is "Read and Write" software to help students with dyslexia. The student
types, highlights their text, and listens to it so that they can correct anything that
sounds wrong. Then, the student uses TextHelp to check their spelling. Many students
with learning disabilities have a difficult time choosing the correct word from the list
of words that appears in the speller, but click on each word and textHelp reads the
word aloud so that the student can narrow down their choice. After checking their
spelling, the student then allows textHelp to check for homonyms (again, another
thing that many students with learning disabilities have difficulty with). TextHelp
reads the word and a short definition of it, (this will solve problems like when to use
their, they're or there.) There is also a thesaurus that contains definitions and sample
sentences, allowing students to choose appropriate vocabulary.



Voice recognition software
Students with motor disabilities who have good vocabulary and good speech
capabilities can use voice recognition software. Dragon NaturallySpeaking is a voice
dictation program that allows students to dictate into the computer without typing.
The writers claim that the software can learn to recognise your voice in 2 hours but
several people who have used the software say that it takes much longer and can
depend upon a regional accent (this is not as obvious as you may first think, Dragon
was able to pick up a strong Northern Irish accent faster than most.)


The Learning Development Centre – s.c.lee@staffs.ac.uk                                                16
                                                         Designing Accessible Web Pages – Version 1




Betsie
The BBC and RNIB have been working together on the Betsie project. Betsie is the
filter program used by the BBC to create an automatic text-only version of its website.
When you look at a web page with Betsie, Betsie makes various changes in the
HTML code of the page - removing all the images and the unnecessary formatting, so
that what you get is the text content of the page, with all the links of any Navigation
Bar moved to the bottom. http://www.bbc.co.uk/education/betsie/index.html


  Accessibility Icons
Bobby
Get your pages validated so you can display a Bobby sign. You can submit your pages
to Bobby and get your web address listed on their pages.




NCAM
National Centre For Accessible Media

Based at the Boston public television station WGBH to have this logo you should try
to conform to the WAI Web Content Accessibility Guidelines.




W3C Valid html 4.0




Any Browser




The Learning Development Centre – s.c.lee@staffs.ac.uk                                                17
                                                         Designing Accessible Web Pages – Version 1


         “Anyone who slaps a 'this page is best viewed with Browser X' label on a
    Web page appears to be yearning for the bad old days, before the Web, when you
    had very little chance of reading a document written on another computer, another
    word processor, or another network."

                         -Tim Berners-Lee in Technology Review, July 1996



This is a campaign to get people to design pages that are accessible by all. It is not
specifically aimed at people with disabilities but will help. There are a number of
different icons and they are available at the following address.

Best Used with Any Browser to use this logo link to:
http://www.anybrowser.org/campaign/



  Practical Tips


Capitals
DON'T USE CAPITALS AS READERS FEEL THAT THEY ARE BEING
SHOUTED AT!!!!



Use Meta Data
MetaTags contain information about the web page (MetaData) that can be inserted in
the header of a web page. Their purpose is that good MetaData can mean that your
site will appear higher up the list of sites that a search engine will find. The search
engines that support meta tags can be found at
http://www.searchenginewatch.com/webmasters/features.html
There are several meta tags, but the most important for search engine indexing are the
description and keywords tags. The description tag returns a description of the page in
place of the summary the search engine would ordinarily create. The keywords tag
provides keywords for the search engine to associate with your page.



Search Engines
Submit your Web pages to Search engines like Alta Vista. On the home page of the


The Learning Development Centre – s.c.lee@staffs.ac.uk                                                18
                                                         Designing Accessible Web Pages – Version 1


search engine like http://www.lycos.co.uk or http://altavista.co.uk there is a link at the
bottom of the page with text like “submit your web page” on it.



Different Browsers
If possible preview pages in a variety of browsers. Not only is some html proprietal
i.e. some features work in Netscape but not Internet explorer, but if possible preview
in earlier versions. E.g. Netscape 3.0 doesn't support frames.


Cascading Style Sheets
Cascading Style Sheets (CSS) can be used to create the style and feel of a web site.
Style sheets allow web users to override author-specified styles. So, for example,
users with not much sight who may require large fonts can configure their browsers so
that every page they view uses them. They keep the information of how a set of web
pages will appear in a separate file. This is good for people using screen reading
software as it means you can avoid having to be told what colours are being used and
type faces etc. The use of css can also help keep a site consistent, helping people with
cognitive problems.



  Publishing Tools



Though it is beyond the remit of this document it is worth mentioning publishing
tools. Authoring tools are often unusable by people with Disabilities. Some web
authoring software have built in tools that prompt for alternative text. E.g.
DreamWeaver. And other tools are available like A-Prompt.



  Help that you can get


Technical Browser optimisers
The Scottish Sensory Centre at the University of Edinburgh provide a document to
give you help altering your browser to optimise your internet viewing at
http://www.ssc.mhie.ac.uk/browser/browse.html See Appendix A for some help.



The Learning Development Centre – s.c.lee@staffs.ac.uk                                                19
                                                         Designing Accessible Web Pages – Version 1




Quite a nice and easy to read chart of which browsers support what at
http://hotwired.lycos.com/webmonkey/reference/browser_chart/index.html


Text Browsers
You can see how a web page would appear using Lynx by going to the site
http://www.delorie.com/web/lynxview.html and typing in your URL. The is also a
“maclynx” for Macintosh users at
http://www.lirmn.fr/~gutkneco/maclynx/maclynx_en.html
The address to get the ftp lynx browser is ftp://ftp2.cc.ukans.edu/pub/DosLynx/


Opera

The Opera Web browser has been developed to the standards set out by W3C and
supports CSS. It is small and fast.


WeMedia

WeMedia is a talking web browser to help people with low vision or cognitive
problems like dyslexia. It has large buttons for navigation and the user can easily
control its appearance. The first version of this browser is free and be downloaded
from http://weMedia.com

Talking web browsers may have some advantages over screen readers, but the speech
capability is locked into a single application. While reading web pages it may be
necessary to have a word processing or note taking application open at the same time,
which may also need to be read aloud. Both speech applications can't use the sound
card at the same time, and having both in the computer memory simultaneously may
overload system resources, as they do seem to be memory hungry.



Free Tools

http://omega.dawsoncollege.qc.ca/adaptech/adlinks.htm#5




The Learning Development Centre – s.c.lee@staffs.ac.uk                                                20
                                                         Designing Accessible Web Pages – Version 1


Using Style Sheets
Information about browser compatibility and CSS can be found at
http://www.webreview.com/style/

and http://richinstyle.com/ Information on CSS Bugs and workarounds can be found
at http://css.nu/pointers/bugs.html



Audio Cascading Style Sheets (acss)
Using style sheets rather than HTML tag extensions allows the same document to be
read with visual, aural, or multi-model presentation without cluttering up the
document or having to produce three (or more) separate parallel documents - which
has been shown to result in consistency and update problems. This approach provides
greatly improved document accessibility for visually disabled people (the information
is better presented and is just as up-to-date as the visual version) without requiring
compromises in the visual design of the document.




  Summary

Most of the guidelines about making the web more accessible for people with
disabilities are good design practice anyway. Inconsistent navigation, dead links,
slow loading pages and too much animation are a turn off to everybody.

Analysis of traffic patterns at a commercial Website found people would not wait for
slow loading pages. The site in question had a large "splash screen" that took nearly
90 seconds to load at 14.4 Kbps. Nearly 25% of all visitors to the site never made it
past the splash screen and never entered the main site. According to the WAI there are
more than 750 million people with a disability worldwide, though only 1% of these
people may have access to the internet 1% of 750 million is a lot of people!

There are a lot of sites on the web to give you advice and practical tips to help you
make your pages more accessible, some of them are listed in this document, but there
are a lot more. Most of the tips are common sense and being aware that some people
have problems using some aspects of the web will solve a lot of problems. Making
sites more accessible, and therefore used by more people, makes commercial sense.
Educational Institutions are competing in a global market today and with more use of


The Learning Development Centre – s.c.lee@staffs.ac.uk                                                21
                                                         Designing Accessible Web Pages – Version 1


the WWW and Virtual Learning Environments as teaching tools, we need to reach as
many potential students as possible.




The Learning Development Centre – s.c.lee@staffs.ac.uk                                                22