DESIGNING ACCESSIBLE WEB PAGES

1
DESIGNING ACCESSIBLEWEB PAGES

• Dr Heather McKiggan-Fee
• SALTIRE
• www.st-and.ac.uk/saltire/

2
Accessibility Counts

• Disabilities can affect all of us
• Visual, aural, motor, cognitive
• Simple techniques can make a big difference
• Accessible pages are well designed pages good
  for all
• Legal requirements - SENDA

3
Text

• Do not use absolute font sizes in ltfontgt tags and
  especially not in cascading style sheets
• Do not use a mixture of font styles
• AVOID EXTENSIVE USE OF ALL CAPS
• Avoid the use of underlining for emphasis it
  implies a hyperlink
• Italics are also hard to read for some people

4
Layout

• Avoid large blocks of text provide white space
  between each paragraph
• Avoid multiple columns of text
• Keep it simple avoid an overcrowded layout
• Screen readers will read a table row by row, from
  left to right organise content accordingly
• Make use of lists to display information

5
Colour

• Do not rely on colour alone to convey information
  (e.g. appearance of links)
• Do not use instructions that rely on colour
  recognition (e.g. click the red button)
• Avoid certain colour combinations red and blue,
  red and green, red and black

6
Links

• Stick with conventional link colours (blue
  unvisited, red visited)
• You can use the lttitlegt tag to provide extra
  information in a pop-up tool tip
• Use meaningful text for links

7
Meaningful links

• For more information on the procedure for
  applying for research leave, please click here.
• Click here to download the research leave forms.
• To read the 2003 report on research leave, click
  here.

8
Meaningful links

• 
  click here
• Click here
• 
  
  
  
  
  
• 
  click here

9
Other Issues

• Use the ltaltgt tag to describe images
• Do not place images in the middle of text
• Provide a text alternative to video clips, etc.
• If you use plug-ins, provide a link to the
  download site
• Use header tags (lth1gt, etc) appropriately
• Data tables use header, caption and summary tags

10
How not to do it

• An example of poor design
• Institute for Learning Teaching in HE
• http//www.ilt.ac.uk
• International Whistlers Convention
• http//www.whistlingiwc.com/index.html
• How to create bad web pages
• http//scholar.coe.uwf.edu/wbi2000/students/aleake
  /goodbad/bad.htm
• Neurosurgery _at_ the University of Dundee
• http//www.dundee.ac.uk/neurosurgery/welcomeo.htm

11
Tools

• Betsie http//www.bbc.co.uk/education/betsie
• Bobby http//www.cast.org/bobby
• HTML Tidy http//www.w3.org/People/Raggett/tidy
• HTML Validator http//validator.w3.org
• Lynx http//www.trill-home.com/lynx.html

12
More Resources

• Web Accessibility Initiative
• http/www.w3.org/WAI
• AWARE Authoring Resources
• http//aware.hwg.org/resources
• Royal National College for the Blind
• http//www.rncb.ac.uk
• TechDis
• http//www.techdis.ac.uk
• DEMOS
• http//www.demos.ac.uk