Web Accessibility Fundamentals

A 2-day Training Course in Understanding and Implementing Basic Web Accessibility — ACCESS-03

Website Accessibility TrainingCourse Overview

This 2-day web accessibility course provides the core ingredients for good accessibility:

  1. Understanding disabled users’ needs and problems on the web
  2. Practical web design techniques for creating accessible websites

It brings together the following two 1-day website accessibility courses in a single package — because successful website accessibility depends on proper integration between awareness and practical implementation:

It encourages accessibility ‘champions’ to strengthen their advocacy by understanding the practical difficulties and trade-offs involved in creating accessible websites using current web design and browser technologies. Similarly, it encourages web designers and developers to do better, by giving as much thought to the needs and objectives of disabled users, as they give to implementing 'accessibility' coding techniques — because such techniques often turn out to be counter-productive, in practice.

Above all, this accessibility training course aims to banish ‘tick-box accessibility’ — replacing it with something which is both more practical and more thoughtful.

Website Accessibility TrainingCourse Contents

Issues and Needs in Website Accessibility

  • Why bother with website accessibility?
  • What sort of website accessibility, and for whom?
  • The differing needs of different disability groups, e.g.
    • Hearing
      • Deaf
      • Hard-of-hearing
      • Hearing-impaired
    • Sight
      • Blind
      • Visually-impaired
      • Low-vision
    • Mobility
    • Mental and learning disabilities
    • The elderly
    • etc
  • Tensions between the accessibility needs of different groups
  • Shared and common accessibility problems
  • Multiple disabilities
  • Web accessibility and ‘non-web’ accessibility
  • Website accessibility standards
  • Website accessibility tools and technologies
  • Browser and platform compatibility

Assistive Technologies and Website Accessibility

  • What is assistive technology?
  • The tools that different disability groups use, e.g.
    • Screen readers and aural interfaces
    • Braille displays
    • Switch-click input devices
    • TDD/TTYs
    • Modified keyboards, mice and similar input devices
    • Magnifiers
    • OCR
    • Speech recognition
    • Touch screens
    • Head/eye control
    • Word prediction and correction
  • How assistive technologies interface with web browsers
    • Input vs. output
    • Keyboard vs. mouse commands
  • Web design principles for supporting assistive technology, e.g.
    • Redundancy and progressive enhancement
    • Equal value to mouse and keyboard
    • Text alternatives to graphic content
    • Orientation and focus
    • etc.

Legal and Web Standards for Website Accessibility

  • Disability Discrimination Act (DDA)
  • Legal liabilities and remedies
  • The Equality and Human Rights Commission (EHRC)
  • The Government Office for Disability Isssues (ODI)
  • EHRC Powers and DDA enforcement
  • Website design codes of practice
  • PAS 78: Guide to good practice in commissioning accessible websites
  • Remedies outside the courts
  • The Web Accessibility Initiative project (WAI)
  • The WAI’s Web Content Accessibility Guidelines (WCAG)
  • Key requirements of the WCAG
  • 3 Levels of WCAG compliance: A, AA, AAA
  • Relationship between the WCAG and UK Government guidelines
  • Accessible web applications vs. accessible content

Policy, Tools and Testing Website Accessibility

  • Deciding what types and levels of accessibility to provide
    • External constraints, e.g. contracts, partners, brand
    • Internal constraints, e.g. current skills, technologies, branding
  • Thinking strategically — getting from here to there
  • Publishing site policy and accessibility features
  • WCAG and compliance testing
    • Automated tests: Cynthia, Bobby, Web Exact, etc.
    • Manual checks and checklists
  • Problems unique to web applications
    • Dynamic graphics and labelling
    • Asynchronous updates
    • Update notification
    • Switching focus
    • Information vs. distraction
    • etc …
  • Brief intro to the Accessible Rich Internet Applications Suite (WAI-ARIA)

Images and Multimedia

  • ‘Still’ images:
    • The most ‘visible’ problem
    • Simple vs complex images
    • Description: alt, title, longdesc
    • Using longdesc effectively
    • D-links and their problems
    • D-link screenshot
    • <object> versus <embed>
    • The <iframe> option
    • Text in images
    • Arrows, bullets and symbols
    • Backgrounds, borders, spacers, etc
    • Graphs, charts and maps
    • Outlines and hierarchies
    • Ratings
    • Photo galleries
    • Scalable vector graphics (svg)
    • Exercises: images and accessibility
  • Audio, video and animation
    • Intrinsically inaccessible aspects of multimedia
    • Making multimedia less innaccessible
    • Browser problems
    • Graceful degradation usimg the <object> tag
    • Alternative datastreams and captions
    • Smil
    • Media player interface problems
    • Caption, transcription and description
    • DIY captioning and fansubbing
    • Open vs closed captioning
    • Accessible flash
    • Scripting multimedia
    • Keyboard alternatives to mousing
    • Exercises: accessible multimedia

Links and Navigation

  • Understanding focus and cursors
  • Consistent and unambiguous navigation blocks
  • How and why to skip navigation
  • Out-of-order layout using the table hack
  • Out-of-order layout using floats
  • Out-of-order layout using relative and absolute positioning
  • Skipping 2-part navigation structures
  • Navigation skipping and search
  • Skipping to or over other page landmarks
  • Page extremities (top and bottom)
  • Identifying link destinations
  • Links to page fragments
  • Separating consecutive links, horizontally and vertically
  • The accesskey attribute
    • Problems with accesskey
    • Making accesskeys visible
    • Listing accesskeys on-site
    • accesskeys in different browsers
    • accesskey naming conflicts
  • The tabindex attribute
    • Tab key navigation and tabindex
    • Tab through a tabular form vertically
    • Problems with tabindex
    • Tabindex tips and tricks
  • Some final dos and don’ts
  • Exercises: links and navigation

Tables, Text and Colour

  • Tables:
    • Tables and accessibility
    • Layout tables — avoid them, or make them accessible
    • Minimizing table usage and harm
    • CSS-only layout alternatives — floats and absolute positioning
    • Proper use for tables — tabular data
    • Simplify table structures — wherever possible
    • Metadata: <caption> and summary
    • Examples of coding table metadata
    • Table headers and footers
    • Keeping table structure simple
    • Scoping row and column headers
    • Multi-level headings — using id
    • Concluding advice on tables
    • Exercises: table accessibility
  • Text and colour:
    • Text-only parallel sites
    • Headers: order, level and tabbing
    • Phrasal markup
    • abbr and acronym
    • Quotation
    • Language and encoding
    • Font size and scaling
    • Text quantity and complexity
    • Text colour and colour deficiencies
    • Setting basic colours
    • Ultra-safe colour combinations
    • System colours for links
    • Exercises: text and colour

Forms

  • Assistive technology & the keyboard
  • Moving to and within forms
  • Selecting form landmarks
  • Subordinate reset buttons
  • Completing forms by selection
  • Chunking with fieldset & legend
  • Grouping options with optgroup
  • Associate labels with controls
  • Using label wrapping
  • Using title attributes
  • Graphical buttons
  • Pre-filled form fields
  • Re-thinking form layout
  • Predictive typing and error checking
  • Dynamic or conditional forms
  • Interacting with the real world
  • Exercises: form accessibility

Website Accessibility TrainingCourse Schedule

Website Accessibility TrainingFurther Details

Course Objectives

On completing this website accessibility training course, you will be able to:

  • Recognise the most common problems that disabled users encounter with conventional web design
  • Recognise the different problems that different groups of disabled users experience
  • Understand the basic principles of accessible web design
  • Understand your responsibilities under the Disability Discrimination Act (DDA)
  • Comply with the DDA
  • Understand the requirements of the W3C's Web Content Accessibility Guidelines (WCAG)
  • Bring your website into compliance with the WCAG
  • Use progressive enhancement and graceful degradation techniques to:
    • Remove obstacles to site access via assistive technologies
    • Provide additional help and support to disabled users — cost effectively
  • Understand how to design accessible web applications and dynamic content — using WAI-ARIA
  • Understand and use the accessibility features of:
    • HTML5, HTML4.1 and XHTML 1.0
    • CSS2, CSS2.1 and CSS3

Target Audience

  • Web designers
  • Web developers
  • Web accessibility and usability advocates
  • Managers and HR professionals with web accessibility responsibilities

Training Pre-requisites

  1. A basic understanding of HTML/XHTML and CSS
  2. A bit more than basic computer literacy
  3. An interest in web accessibility
  4. An open mind

Note: Although web design skills are distinctly advantageous, delegates are not expected to have advanced knowledge of — or be highly skilled in — HTML/CSS. The first and final requirements are only listed here, because good web accessibility sometimes conflicts with popular (mis)conceptions about what web design is — and how it should be practiced.

Training Style

The two parts of this website accessibility course vary somewhat in their learning style.

Both parts of the course include hands-on exercises; offering delegates the opportunity to practice and experiment with the techniques discussed by the tutor.

However, the introductory modules on the first morning are largely informative — rather than practical — in nature. As a consequence, the exercises associated with these modules are designed to put students ‘in the shoes’ of a disabled site visitor — i.e. to create awareness — rather than to teach technique.

For example, students are usually offered the opportunity to browse web sites using a screen reader, but we do not expect or encourage them to become proficient in driving such a tool.