Web Access Centre

Design and build checkpoints - Web Access Centre

Summary: Free online resource centre for web designers and managers. Techniques for accessible web design are based on the World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI) guidelines.

• Cascading Style Sheets
• Colour
• Images
• Multimedia
• Navigation
• Text
• Structure
• Scripts and forms

---

Practical advice on creating accessible websites for designers, developers, editors and website owners.

Cascading Style Sheets

• CSS basics - the foundation to creating basic CSS
  
  
• Layout and positioning - layout and positioning of text and containers in a page.
• Text and colours - creating accessible font sizes, styles and colours.
• Advanced CSS - hints and tips for more advanced CSS techniques and how they can help with the accessibility of web pages.
  
  

Colour

• Colour alone – think of colour as a visual aid to presenting information and not the only means of presenting information.
  
  
• Colour contrast – good crisp contrast makes most colour combinations accessible.
  
  

Images

• Alt text – adding alt text allows users of speech and braille output to access the information in images.
  
  
• Animated images – can be difficult to read, distracting and dangerous for people with epilepsy.
  
  
• Image maps –are a great visual aid as long as they have alt text and information is also available in text.
  
  
• Images of text – can cause problems for screen magnification users but not if an alternative is offered.
  
  

Multimedia

• Audio and video –can act as an excellent means of conveying information as long as alternatives are provided, such as transcripts to audio or descriptions of video.
  
  
• Flash – Flash MX now has some features that have improved its accessibility.
  
  
• PDFs – Adobe has done much work towards making PDFs accessible. As with HTML and Flash etc it is the designer's responsibility to make content accessible.
  
  

Navigation

• Access keys - can sometimes conflict with screen reader and browser commands, so must be chosen with care.
  
  
• Links – ensure people know what content they will access when they click on a link.
  
  
• Help pages – provide information about scaling text, viewing PDF’s, access keys and popup window warnings in an accessibility help section.
  
  
• Hidden navigation and tab index – hidden navigation can help screen reader users and people who do not use a mouse.
  
  
• Navigation – ensure all pages share the same site navigation.
  
  
• New windows – warning people that pop-ups and new browser windows will open makes a site less confusing.
  
  
• Page titles – provide a quick way for screen reader and magnification users to check what page they are on.
  
  

Text

• Acronyms and abbreviations – always ensure you explain the full acronym or abbreviation, there's no guarantee that everyone will know what it means.
  
  
• ASCII text – ASCII art often represents something different visually from its meaning as a text character.
  
  
• Font sizes – giving people the ability to change text size in their browsers, means that you can size text as you wish.
  
  
• Language – indicate the main language of the page and language changes within it, so that speech and braille output know how to read it.
  
  
• Text only websites – the Website Accessibility Initiative (WAI) states that a text version of a page, not a website, should only be used if content cannot be made accessible with existing technologies.
  
  
• Sitemaps – providing a sitemap as an alternative means to navigation helps everybody, but only if it is not image based or complicated to access.
  
  
• Writing for the web – clear language makes a site's content easy to read and helpful for people new to the web or people with learning difficulties.
  
  

Structure

• Cascading style sheets –can be used to give format to headings and text in pages.
  
  
• Data tables – providing structural markup for data tables means people using speech and braille output will know what the row and column headings are.
  
  
• Doc types – including doctypes allows search engines to list your pages.
  
  
• Frames – naming frames and providing HTML links within frames allows everybody to navigate pages even if they do not have frames supported.
  
  
• Layout tables –can be used as long as the correct structural markup is used with them.
  
  
• Metadata – good metadata helps people with various needs access your pages from search engines.
  
  
• Structure – coding headings, paragraphs and lists correctly, allows people who use speech and braille output software to know what purpose a piece of text has.
  
  

Scripts and forms

• Dynamic menus – create accessible drop down menus.
  
  
• Forms - markup form fields correctly.
  
  
• JavaScript – avoid using JavaScript alone for presentation of content or functionality.
  
  
• JavaScript and forms - use server-side validation to submit forms.
  
  
• Time outs and page refreshes – provide warnings for time outs and page redirects that may affect the user.
  
  

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: henny.swan@rnib.org.uk

Last updated: 08/04/2008 18:38