Web Accessibility Fundamentals

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

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

Course contents — 1 Issues & needs

  • 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

Course contents — 2 Assistive Technologies

  • 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.

Course contents — 3 Legal and Web Standards

  • 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

Course contents — 4 Policy, Tools and Testing

  • 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)

Course contents — 5 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 — 6 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 — 7 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 — 8 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:

  • 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.

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom