Web Standards

Resources

• Most resources are from W3C WAI
• W3C = World Wide Web Consortium
• WAI = Web Accessibility Initiative = the arm that facilitates accessibility
• Free and Open!

Accessibility

People with disabilities

• …can acquire the same information
• …participate in the same activities
• …be active producers as well as consumers

Assistive Technologies (AT)

Tools that support daily tasks of living and communication.

AT alone cannot provide access

• No matter how hard you work, or how sophisticated your Assistive Technology may be, AT alone cannot provide access
• Equal access requires that digital content is developed to meet global accessibility standards

AT & Accessibility APIs: How one content meets many needs

• AT is software or hardware that addresses particular needs
• Accessibility Application Program Interface (API) translates between AT to other software
• AT can modify the user interface

Accessible IT Model

Flexibility is the key

Why advocate for accessible design?

• Drive Innovation
• Increase Market Reach
• Minimize Legal Risk
• Humanitarian

Driving Innovation

Integrating accessibility removes architectural, digital, and social barriers:

• Accessible design thinking: flexible ways for users to interact with websites & apps
• Consideration of experiences other than screens
• Closely aligns with good usability

Driving Innovation: Examples

• Typewriters
• Telephone
• Punch cards
• Text to speech
• Email
• Voice controls
• Driverless cars

Increased Market Reach

• 15% of the world’s population have a recognized disability
• With age, many more acquire disabilities and yet might not identify as a “person with a disability”
• In countries with 70+ years life expectancy, people spend 11.5% of their lifespan with a disability

Increased Market Reach: Globally

The extended market is estimated at 2.3 billion people who control an incremental $6.9 trillion in annual disposable income

$6,900,000,000,000

Legislation

• UN Convention on Rights of People with Disabilities (UN CRPD)
• On the Web: Web Content Accessibility Guidelines (WCAG)
• European Standard: EN 301 549

Austria

• 2006: Bundes-Behindertengleichstellungsgesetz (BGStG)
• 2019: Web-Zugänglichkeits-Gesetz (WZG)

The Business Case for Digital Accessibility

This article examines the rationale for organizations to address accessibility. It includes tangible and intangible benefits, and the risks of not addressing accessibility adequately.

People

Put people first when thinking about digital accessibility

d/Deaf & Hard of Hearing

• Transcripts for audio content
• Alternatives for sound cues
• Captioned multimedia
• Audio support (human voice recording, assistive listening systems, etc.)
• Real-time computer-aided transcription services (e.g. CART)

Learning and Cognitive Disabilities

• Stable content
• Plain language
• Consistent naming, layout, and navigation
• AT-readable text
• Personalized (customizable) visual presentation (typeface, colors, white space)

Communication Disabilities

• Picture Communication Symbols (Augmentative Systems)
• AT mapped to keyboard
• Scanning technologies
• Access to electronic text
• Clear labels for page regions and interactions

Physical/motor disabilities

• Keyboard access
• Visible focus
• Keyboard alternatives
• Customizable keyboard commands

Blind and Visually Impaired

• Alternatives to image content
• Mouse-free navigation
  • Avoid drag and drop
  • Tab logic, navigation
  • Test item selection
• Color cues
• Proper structural markup
• Accessible CMS

How People with Disabilities Use the Web

This resource introduces how people with disabilities use the Web. It describes tools and approaches that they use to browse the Web overcome encountered barriers.

Standards & Guidelines

For web accessibility: W3C

• WCAG — Web Content Accessibility Guidelines
  Standard for web content creation
• ATAG — Authoring Tool Accessibility Guidelines
  Standard for web content creation interfaces
• UAAG – User Agent Accessibility Guidelines
  Standard for web content consumption interfaces
• ARIA – Accessible Rich Internet Applications
  Standard for creating accessible application on top of other standards

Web Content Accessibility Guidelines (WCAG) 2.1

W3C Recommendation 05 June 2018

Previous version: 2.0, 11 December 2008

Next version: 2.2, 2023?

Web Content Accessibility Guidelines (WCAG)

Based on four foundational “POUR Principles”:

1. Perceivable
2. Operable
3. Understandable
4. Robust

WCAG 2 Structure

• WCAG 2.1 stable, referenceable technical standard.
• 13 guidelines organized under 4 principles
• Guideline has testable success criteria (SCs) at three levels
• Supporting material: Understanding WCAG & Techniques for WCAG

1. Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

• Text alternatives for non-text content.
• Captions and other alternatives for multimedia.
• Content can be presented in different ways, including by assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.

Images

• Must have a description unless they are just for decoration.
• That description is called “alternative text”.
• Add it in the HTML alt attribute:

Images Tutorial

Videos

• Should never autoplay.
• Add captions (“subtitles”).
• Add audio description.

Making Audio and Video Media Accessible

Useful Information and Sequence

• Visual information needs to be in code (“available programatically”).
• Reading order makes sense.
• You can adapt the visual output to your needs.
• Enough color contrast.
• Not using color alone for distinction.
• Responsive Design

2. Operable

User interface components and navigation must be operable.

• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.

Keyboard

• Use the tab key to navigate.

Distractions

• Give users enough time to complete actions.
• Allow users to pause, stop, hide distractions.
• Do not flash in videos.

Navigation

• Allow for skipping repeated blocks of content.
• Clear page titles.
• Focus order follows reading order.
• Clear links.
• Visible keyboard focus.

3. Understandable

Information and the operation of user interface must be understandable.

• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes.

Readable

• Specify language of page and parts.
• Explain unusual words & abbreviations.
• Predictable interactions.
• Clear labelling and instructions, as well as error handling.

4. Robust

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

• Use standard, valid coding methods and practices.
• Maximize compatibility with current and future user tools.

Principles & Guidelines:
The Spirit of the Law

Success Criteria:
The Letter of the Law

3 Levels:
A – AA – AAA

Levels of Conformance

• A – Most people with disabilities have good access.
• AA – Most people with disabilities encounter no barriers.
• AAA – Most people with disabilities encounter no barriers, and more barriers are removed.

To conform to AA, you must conform to all Success Criteria marked Level A and AA.

AA+

AA plus AAA criteria that specifically enhance the experience for your audience.

Additional Information

• Understanding WCAG: Pages and pages of additional information on how to understand the different Success Criteria.
• WCAG Techniques: Pages and pages of examples to meet or fail a specific Success Criteria.

Web Content Accessibility Guidelines (WCAG) Overview

Introducing the Web Content Accessibility Guidelines (WCAG), including WCAG 2.0 and WCAG 2.1.

Testing

Easy Checks: A First Review of Web Accessibility

Different testing methods

• Automated testing
• Manual/exploratory testing

Automated testing

• Can find about 50% of issue types
• Some issues are impossible to find automatically

Automated testing tools

• axe Extension for Chrome, Firefox, Edge
• WAVE — Web Accessibility Evaluation Tool

Design Tools

• Contrast-Ratio.com — Color contrast calculation
• WebAIM Contrast Checker
• Who Can Use — Color contrast checker with vision type simulator
• Photosensitive Epilepsy Analysis Tool (PEAT)

Manual testing tools

• Polypane
• A11Y Tools Bookmarklets — Several Bookmarklets
• ANDI — Accessible Name & Description Inspector
• axe Extension for Chrome, Firefox, Edge
• Chris Pederick’s Web Developer — various tools
• Headings Map Chrome Extension or Headings Map for other browsers

Manual testing tools (II)

• HTML_CodeSniffer — Code checker
• Metageeky’s A11Y Bookmarklets
• Paul J. Adam Bookmarklets and Browser Extension for macOS — An assortment of bookmarklets to visualize different accessibility features.

Manual testing tools (III)

• Target Size Bookmarklet
• Text-spacing bookmarklet
• The Visual ARIA Bookmarklet
• tota11y — an accessibility visualization toolkit

Mixed automatic/manual

• Accessibility Insights — automated checks and walk through tools and checklist

Testing with assistive technologies

• Assistive Labs
• Screen reader shortcuts
  • VoiceOver
  • NVDA

A note on “overlays”

“One line accessibility fixers” do not make your website accessible or compliant.

A one size fits all approach cannot work.

See Overlay Fact Sheet