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:
- Understanding disabled users’ needs and problems on the web
- 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
- Hearing
- 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
accesskey
s visible - Listing
accesskey
s on-site accesskey
s in different browsersaccesskey
naming conflicts
- Problems with
- The
tabindex
attribute- Tab key navigation and
tabindex
- Tab through a tabular form vertically
- Problems with
tabindex
- Tabindex tips and tricks
- Tab key navigation and
- 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
andacronym
- 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
- A basic understanding of HTML/XHTML and CSS
- A bit more than basic computer literacy
- An interest in web accessibility
- 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.