An accessible Web for all. 

By Rob Davies
© Echurch-UK,., 2006..

“Everything is permissible—but not everything is beneficial. Everything is permissible — but not everything is constructive.   Nobody should seek his own good, but the good of others.”  (1 Corinthians 10:23-24 NIV)

Introduction.

I am webmaster of echurch-uk.org and registered blind.  I use the Web every day, for work, news, education, shopping, spiritual support, entertainment and communication.   The majority of sites I visit however are either difficult to use, or inaccessible.  The good news is that the means exist to improve this unsuitable situation.   This document offers a wide picture of accessibility needs, how to overcome many of them and where to find further tutorials.


Who benefits?

“An accessible website is a staggering 35% easier to use for every visitor!” Disability Rights Commission research 2004.

Providing accessibility on the Web is much more than helping those who are visually impaired.   There are others with hearing needs, reading difficulties, cognitive problems and physical restrictions.  Different platforms, web browsers, new technologies languages ,and cultures. 

•	In fact, whether they know it or not,  everyone, everyone benefits when they use an accessible website.

•	Well-formed pages improve the invisible processes of software, hardware, scripting and networks.  

•	Every visitor gains from better appearance, layout and content - making it easier for them to concentrate, understand concepts and follow instructions. 

•	The Internet is diverse and international.  Good accessibility helps those who are trying to read pages that are not written in their mother tongue.  

•	Enlightenment and conformity in document tag markup provides improved access to the  ways in which people are choosing to browse the Web.

•	Disabled people have improved access to services, resources, information, leisure, communication and online shopping.

•	Good Web accessibility practice enables search engines to provide accurate search results.  .


Browsers and screen readers.

The Most commonly used Web browsers provide accessibility options in their preference menus.  They are helpful to those who are partially sighted or with poor colour recognition.  People with reading or cognitive problems use them to improve concentration, while t.   Those with good sight often use them to relieve eye strain.

Prior to browsing the web, users preset their own browser accessibility preferences.  Then, when the web browser opens an accessible page, it automatically changes the background colour, font and text size, to its preset style.

Blind or deafblind people use the screen reader capabilities of Internet Explorer or depend on alternative text browsers.  Their specialist software and hardware provides audio or Braille output.  Those with good hearing often use both options - audio for fast reading and Braille for accuracy.  People who are deafblind are restricted to Braille output.

Web page designers must take into account that screen readers begin at the top left of a Web page and continue reading through all the table rows and columns until they arrive at the bottom right.  If there are links and images on the top and left of the page, they will read them first before arriving at the main article or content.  It is tedious, but build in accessibility can help them bypass links or find selected items. 

Obviously, a blind person cannot see the page or speed things up with mouse “clicks”.   To overcome this, the specialist software they use allows them to separate all the links, headers and form fields into external windows, which are completely divorced from the content of the main page.   They can then tab down a selected list at great speed.  Fast keyboard tabbing is also used to find other items on the main page, such as tables, lists and blockquotes.  

Some specialist screen readers provide summaries of page content for people with learning difficulties.   Blind people are beginning to use something similar for speed-reading. 

Many physical disabilities prevent good hand manipulation of a mouse pointer.  To overcome this many disabled people will use their standard keyboard.  Controlling the cursor with the tab button and arrow keys.  Or using lists of links, headers and form fields in external windows.  

To assist further keyboard navigation, some websites place accesskey markup in the tags of the main links, so the ALT key can be used with a keyboard letter to select a link.  This is of debatable benefit, for it can partially disable the drop menus in web browsers.  If you decide to add accesskeys, use letters keys, use the single numbers 0 to 9. 


Other people may use head pointers, screen touching or voice control for browsing on the Web.


#4.  Web design tools

Unfortunately, software that offers to provide instant accessible Web pages can never deliver on their claim.   Many of the issues can only be resolved by human judgement.  You will realise this, as you read down this document.  

The good news is that it is not too difficult to learn on the job.  You can build up your own expertise, over a period of time.  Start by creating a single page.   Later, when you have the hang of things, you can use that page as a site template.

Most people use web-authoring software to build their sites.   If this is you, be sure that it creates pages using XHTML.  It must also generate a Cascading Style Sheet (CSS), which you will need to control layout, colour and text in your XHTML web pages.  

A few , write their own html markup, using a simple text editor, such as Windows Notepad.  If you already do this, it is not too difficult to begin writing XHTML and CSS files.  Use the tutorials at http://www.w3schools.com

The new XHTML markup language is specially designed for modern Web publishing. It provides strictly defined tagged areas in the invisible page skeleton.  Each tag has an absolute beginning and end and.  They are all written in lower case text.  XHTML markup attributes must not be used to define text and colour in tags.  These are now controlled by CSS text files.   

XHTML provides a rigid environment to launch scripts and media events. There is much more flexibility and it uses less computer power.  Pages are accessible by both new and older browsers.  External CSS files allow you to change layout, colour and text by making some simple adjustments in a single text file.

JavaScript scripts are offered by most Web publishing software.  They run on web pages to create events or increase functionality.   Unfortunately, many site visitors browse the Web with JavaScript switched off.  If you can, use web server generated script such as CGI and PHP.  These always work.



#5.  Site appearance.

Accessible Web pages must be visually attractive and easy to understand.  Good visual content enriches the lives of most disabled people, including many who have low vision. 

•	Do not use “text only” alternative pages or websites - unless there is no other way of providing an alternativeaccess to the content of a Flash item or a similar media feature.  Text only pages are difficult to read and boring, .  They underlineperpetuate exclusion and are costly to maintain.  They are also disapproved of by the W3C accessibility guidelines (WAI).

•	Use the same look and layout on each page. If you do, visitors will quickly learn the navigation and be confident that theyare much more likely tod be assured that they remain on the same site. 

•	Use clearly contrasting colours for background and text.  Never use background images; they interfere with the reading of foreground text. 

•	All artwork and images should provide good contrast.  There must be an alternative, “alt”, text description in all graphic tags. 

•	Be cautious in the use of animated images.  Most people find them distracting and they affect concentration.   They can be harmful to people with epilepsy. 

•	Create lots of empty space between items of interest, links, paragraphs and headers.   This will improve visitor focus and clearly define borders.

•	Use normal text sizes where you can.  Large text is hard to read and those people who need it can get it by adjusting the accessibility options on their browsers.

•	Never use fixed text attributes, such as “px” and “pt”.  Instead, use the variable ones, “%” and “em”.   This enables visitors to increase or reduce text, according to their reading needs.

•	Text links should be in a contrasting colour from the rest of the text.  Many people are colour blind, so use underlined links.

•	Avoid using blinking or scrolling text, italics, capitalized TEXT or flashing images.   They are either hard to read or distract the eye.  Blinking and flashing objects on a screen can occasionally cause fits.


#6.  Site “feel”.

Most people use a mouse to move the cursor around the screen, clicking boxes, links and objects.   PDA users and disabled people often have to use a keyboard instead.   Others may use voice-activated cursors or specialised pointing devices. 

•	Vertical lists of links should have plenty of empty space above and below each other.   This assists those with shaky hands.  Set the extra space using CSS style attribute, “line-height” with the variable options “%” or “em” and .  never use fixed options such as “pt” or “px”.

•	Links that are created within a paragraph of text must have one or two words between them, to act as separators.   Equally, there should be ordinary text in the line above and below, this helps those with shaky hands and improves concentration.  Badly separated links confuses screen readers, causing them to read them as a single link.

•	A row of parallel links should have some ordinary text separating each of them.   This is often achieved by placing three space characters between each side of the vertical divider character “  |  ”, or using a couple of greater than characters “>>”.  

Accesskey attributes placed in your main link tags, will enable people using keyboard navigation to “click” on them.  Never use letters in accesskey attributes, use numbers between 0-9 instead.  Between 0-9.  Using letters causes conflicts with browser drop down menus.


#7.  Site Navigation.

“Three “clicks” to every site page is the rule to aim at.” Lynn Holdsworth, professional site programmer.

People who are blind or deafblind, very much depend on well designed and clearly described links, headers, forms and images to get around Web pages.   Their browsers separate them from page content and place them into lists in external windows.  Poor description or none at all, denies access to pages and content.

•	Text links must have clear descriptions.  No “click here” or “more”.  Instead, write a description that makes sense outside of the page, such as “Visit Mary Smith’s Italian recipe site”.  Some short words and phrases, such as “home” and “contact us” have a clear meaning.

•	Take care to use the same link description throughout the whole site, both in text links and image ones.   The link to a page should have the same description as the title tag of the page it targets.

•	Image links should carry the same descriptions as text links.  Place the description in the “alt” attribute of the image tag.  There must be an alternative text version of it on the same page.

•	Email links should be written out in full.  Many people use Web mail and do not have an email tool.  Consequently, clicking on an email link will not open a mail window.  Providing the address in full, allows them to copy the address and paste it into a Web mail form.

•	Headers are used by blind and deafblind people to help them navigate up and down page content.  They must always be used for their correct purpose - providing clear description of content. They must be understandable outside of page content.  Good headers on sites, improves search engine ranking.

•	Scrolling text links and gimmicky mouseover menus are inaccessible to those with limited movement.  People with poor cognitive skills find them difficult to understand or to judge speed and distances.

•	Provide a list of text links to each area of interest on your site.  It must appear on every page and contain a clear link to the home page.

•	A “Skip links” jump link to the beginning of the main content, should be placed very close to the top left of each page.  It allows blind people using screen readers to bypass all the links.  

•	Long pages should always be provided with a “back to top” jump link.  It makes life easy for everyone.     

•	Forms need careful design and correct labels.  This enables blind people to navigate them and fill in the fields. Long forms often time out before disabled people can fill them in.  

•	Data tables should be used correctly.  To provide data.  They must have correct tags and adequate description.  Cells and rows must be assigned a correct tabbing order.  You may use one (1) table for page layout, but only with up to two rows of cells.  No nests of tables to improve layout. 


#8.  Concentration.

Provide attractive layout, eye-catching graphics, good emphasis and plenty of space between points of interest.  

•	Use colour, bold text and graphics to emphasise a message, but do not use it to convey the message itself, unless you provide an alternative one nearby.

•	Highlighting a point in contrasting colour is a great help to people with cognitive problems.  It also helps those with reading difficulties or others reading in a language secondary to their own. 

•	Audio, Braille output and PDA monochrome screens will not convey colour emphasis.  Be sure that the text provides an adequate message in its own right.  

•	Leave plenty of space between different areas of interest, paragraphs and blockquotes.  Apart from improving concentration and focus, it provides a solid “feel” to those navigating a page with a screen reader.

•	Use fonts that are easy to read and to understand.  

•	Do not use justified text.  It is difficult to read and it confuses people with cognitive problems.

•	Lines of text that are close together are difficult to read.  This paragraph is a very clear example.  If need be, increase line-height on CSS style to I.2em or more.  


•	Bulleted lists help concentration.  Long lists need to be numbered. 

•	NEVER USE LONG LENGTHS OF LARGE TEXT.  IT IS HARD TO READ.   As you can see, this is much better.

	If you use PDF files in your site, make sure that they are accessible to screen readers.  You have the same accessibility obligations when offering downloads.



#9.  Improving understanding. 

The Web is international.   Site visitors are diverse in their reading skills and equally diverse in their ability to understand information.   

•	Site information and instructions must always be written in easy-to-understand language.   Keep it simple and be direct.

•	Unless it is essential, avoid jargon, technical terms or local dialect.  Likewise, unusual religious, cultural or political phrases.   If you need to use them, try to provide a glossary.  

•	Contracted words should be avoided.  Use “can not” instead of “can’t”.   This helps those who find reading difficult and those who are reading your page as a secondary language. 

•	Use short sentences and paragraphs.  They are easy to read and improve concentration.

•	Punctuation should be simple.  Try to use a dash instead of semi-colons – it is easier to see.

•	Always use ordered headers with well-described main and sub-titles.  There should be one <h1> header at the top of the main article or content.  This allows a blind person to avoid the links by tabbing directly onto it.

•	Use ordered headers to tag sub-headings of articles.  It helps with speed readingspeed-reading and improves concentration. 

•	Use <blockquote> or <q> tags for quotes. Audio and Braille screen readers use them and so do search engine spiders.  

•	Changes in main document language, in paragraphs, sentences, phrases or words, must be marked with the “lang” attribute.   Where sentences, phrases or words do not have their own tag, use the <span> tag instead.

•	Abbreviations should be tagged and provided with a title attribute containing the full meaning of the shortened version.  Use the <abbr> tag.

•	Acronyms should be fully explained.   There are two ways of doing this.  Firstly, provide the full meaning followed by the acronym in brackets after it, but only once.   Then continue to use it on its own, whenever you need to mention it on the page.  AlternativelyAlternatively, you could use the <acronym> tag with the title attribute containing the full description.


#10.  Sound and Video.

Video and audio clips should reinforce the primary message of the site, rather than be the only means of providing it.  Always use it alongside of an accessible alternative.   

People with cognitive problems or reading difficulties will better understand information given through video.   An increasing number of blind people download sound files from the Web but be.  Be aware of the needs of deaf people.  They are the largest disability group in any community.  There are more than 8 million of them in the United Kingdom.

•	Provide clear description in the <object> tag to the clip.

•	Download files from “click on” links should provide a clear text description, capable of being understood outside of page content.

•	If it is a speech, news or talk, provide a text alternative.

•	A video that demonstrates a technique will need a text alternative describing the technique itself, rather than what is exactly happening on the video.

•	Flash movies, which provide sound, should have buttons, which allow the user to start and stop them.

•	Where possible, provide text captions on video.

•	It is almost impossible to provide an ongoing alternative to a webcast.  A reasonable solution is to wait until the event has taken place then provide a retrospective description.


#11.  Online tutorials.  

“When a little thought is put into the design of web sites many more people will be able to use them, including the UK's 2 million blind and partially sighted people.”  Julie Howell, Digital Policy Development Officer at RNIB.

Here are the sites which I use for further study.   You can dip in and learn, a bit at a time.  None of it is rocket science – after all, I managed to understand most of it!.!    

•	The Royal National Institute of the Blind’s (RNIB) site provides regularly updated and easy-to-understand tutorials on web accessibility.   It is online and free of charge, covering every aspect of accessibility. Their Design and Build Checkpoints show you how to deal with the basics and also to build accessible data tables, forms, lists, multimedia and scripts.  Visit them at   RNIB Web Access Centre.  

•	Not everyone uses Web publishing software.  Some use a text editor like Windows Notepad to type up their own XHTML pages and CSS style sheets.   Most professional website designers form most of their pages using web design software, but check and modify their documents on a text editor.  It is not too difficult to learn.   If you want to have a go, there are excellent tutorials at http://www.w3schools.com.

•	The World Wide Web Consortium (W3C) is the authoritative source to which software and web design specialists turn, for guidelines on Web accessibility.  If you want to read their pages on this, (or work up an untreatable  headacheuntreatable headache!), you can read their “Techniques for Web Content Accessibility Guidelines 1.0” at:http://www.w3.org/TR/WCAG10-TECHS/.

•	Jacob Neilsen’s site is a long standinglong-standing source for good practice on Web design and accessibility,  At, :at http://www.useit.com/.

•	The Plain English website is a must for anyone seeking to improve communicative skills for the Web.  At:  http://www.wordcentre.co.uk/.



#12.  Testing your site.

•	Begin by checking your site yourself.  Do all the links and headers make sense?  When you pass your mouse over images, does a little window pop up with a short description?  Is there good colour contrast?  Can text be enlarged or reduced using browser View options?

•	Get a few disabled friends to check out the site.  Not just blind people but also those who have restricted hand movements or poor reading skills.  Do not forget about deaf people, who are the largest disability grouping.

•	Check your pages using different browsers and on different platforms.

•Now check it with the CSS style sheet removed.  It will not be so pretty but it should be readable.  This is for the benefit of very old browsers used on ancient computers.  They cannot use CSS. There are a lot of them about.


•	Some people use text only browsers, in conjunction with very basic hand held Braille output machines.   You can download a free Lynx text browser at:  http://lynx.browser.org/

•	Jaws for Windows provides quality output in audio and Braille for the Microsoft Internet Explorer.  Professional webmasters use the free download of Jaws to check out their pages. You can download it at http://www.freedomscientific.com/.

•	There is a free online accessibility validator called WebXACT.   It will run over your web pages automatically. It is at: http://webxact.watchfire.com/

•	To check your XHTML tag markup on your pages, go to the WDG online validator at: http://www.htmlhelp.com/tools/validator/. 

•	To check your CSS style sheets, go to the W3C online validator at:  http://jigsaw.w3.org/css-validator/.
•

#13.  Legislation. 

Owners of public domain websites have legal responsibilities to provide “reasonable” access to disabled people on their pages.  If they sell products or provide a service; offer resource or information; or generally deal with the public, then they must provide “reasonable” access to disabled people.   United Kingdom companies, organisations and individuals are expected to comply with the Disability Discrimination Act 1995.   

If a website uses an electronic form to enable the general public access to their products, services, resources or information, it must provide “reasonable” alternative access to those disabled people who cannot fill forms in.   A “reasonable” alternative is to provide a reliable telephone number or email address.


Rob Davies is the webmaster of http://www.echurch-uk.org, 
an online community of blind, deafblind and partially sighted Christians.  
He is registered blind with Retinitis Pigmentosa and Macular Degeneration.

quote:

• Email links should be written out in full. Many people use Web mail and do not have an email tool. Consequently, clicking on an email link will not open a mail window. Providing the address in full, allows them to copy the address and paste it into a Web mail form.

quote:

• Data tables should be used correctly. To provide data. They must have correct tags and adequate description. Cells and rows must be assigned a correct tabbing order. You may use one (1) table for page layout, but only with up to two rows of cells. No nests of tables to improve layout.

quote:

Sorry, this should be in the Accessibilty section.. OOPS

quote:

#9. Improving understanding.

The Web is international. Site visitors are diverse in their reading skills and equally diverse in their ability to understand information.

• Site information and instructions must always be written in easy-to-understand language. Keep it simple and be direct.

• Unless it is essential, avoid jargon, technical terms or local dialect. Likewise, unusual religious, cultural or political phrases. If you need to use them, try to provide a glossary.