Implement Web Accessibility

A 1-day Course implementing Web Content Accessibility Guidelines (WCAG/WAI-ARIA) — ACCESS-02

Accessibility TrainingCourse Overview

This 1-day website accessibility course provides the technical requirements for building accessible websites using HTML and CSS, ie how to:

  • Provide accessible web images, multimedia and text alternatives
  • Provide accessible links and navigation
  • Ensure that textual content is accessible
  • Ensure that colour is used safely
  • Make table navigation and data accessible
  • Make form navigation, data, and data entry accessible

This course follows on directly from the 1-day website accessibility awareness course known as Understanding Website Accessibility — and that course (or equivalent knowledge) is a prerequisite for this one.

Beginners in website accessibility will typically take both courses together in the 2-day package known as Website Accessibility Fundamentals.

A further follow-on course in implementing accessible web applications is under active development and will be available in the near future.

Accessibility TrainingCourse Contents

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

Accessibility TrainingCourse Schedule

Accessibility TrainingFurther Details

Course Objectives

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

  • Understand and use the accessibility features of:
    • HTML5, XHTML 1.0 and HTML4.1
    • CSS3, CSS2.1 and CSS2
  • 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
  • Comply with the W3C's Web Content Accessibility Guidelines (WCAG) — at whichever level you choose
  • Create accessible links, navigation, forms, text, images, colour, audio and video

Target Audience

  • Web designers
  • Web developers
  • Web accessibility and usability advocates
  • Managers and technical team leaders with web accessibility responsibilities

Training Pre-requisites

  1. A good understanding of HTML/XHTML and CSS
  2. An interest in web accessibility
  3. An open mind

Note: Unlike the other component of our Web Fundamentals course (Understanding Website Accessibility), practical knowledge of standards compliant HTML and CSS is essential for those who will be directly implementing the skills taught on this course.

Managers and team leaders who may only need to know the coding principles taught in this course can probably get by with a bit less practical expertise.

The open mind is required, because best practice usability and accessibility coding can be quite different from habitual practice across much of the web design industry.

Training Style

All the topics covered in this website accessibility training are accompanied by hands-on practical exercises.

By default 50 percent of the time is allocated to these hands-on exercises, but the actual division of time between hands-on, discussion and intruction will vary from group to group.