Implement Web Accessibility

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

Accessibility Training Course 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.

Course contents — 1 Images & 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 inaccessible
- Browser problems
- Graceful degradation using 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

Course contents — 2 Links & 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

Course contents — 3 Tables, text & 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

Course contents — 4 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

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

A good understanding of HTML/XHTML and CSS
An interest in web accessibility
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.