Incorporating Accessibility in the Design Process

Workshop for Statewide IT Conference at Indiana University

January 21, 2021

View recording (requires IU login)

View slides

• Press s for speaker notes.
• Press arrow keys to advance slides.
• Press ? for more options.

Description

Product features implemented without accessibility considered upfront is prone to uncertainty, rework, and a poor or hopeless experience for those who use assistive technology. In contrast, teams release higher quality features in less time when accessibility is part of the design process. Go beyond validating WCAG success criteria. Improve the development process, and design a better experience for your users.

During this workshop, participants will:

1. Learn how a screen reader works and how it is used
2. Study accessibility features, such as roles, names, focus and cursor handling, tab order, and ARIA
3. Examine wireframes, and discuss how screen reader users may or should experience those interfaces
4. Annotate wireframes to communicate accessibility expectations to the product team

Chris Basham is a user experience designer in Enterprise Student Systems, specializing in accessibility, front-end development, and design systems.

Edit slides

Powered by reveal.js.

See: How to host Reveal.js slides on GitHub pages and have a tidy repository

Install live-server globally.

npm install -g live-server

Serve files from the current working directory.

live-server

Resources

Articles

• Accessibility for designers (IU Knowledge Base)
• Accessibility resources at IU (IU Knowledge Base)
• Designing with Accessibility in Mind (IU UX Office)
  • Part 1: The Basics
  • Part 2: Visuals
  • Part 3: Patterns
• Seven ways to test for accessibility of your web site with browser Developer Tools

Training

• Accessibility Bootcamp by Deque University (IU login required)
• Disability Sensitivity Training (YouTube)
• Accessibility on Apple devices (YouTube)
• Accessible to all

Code examples

• ARIA Authoring Practices 1.1
• Inclusive Components
• Deque University Code Library
• Paul J Adam's Modern Web Accessibility Demos

Blogs and general information

• Deque, Deque University
• WebAIM
• Level Access
• The A11y Project
• Microsoft Inclusive Design
• Accessibility for teams
• AppleVis

Standards and guidelines

• Web Content Accessibility Guidelines (WCAG) Overview
• WCAG 2.x Understanding and Techniques documents
• WAI-ARIA Overview
• ARIA 1.2 specification
• HTML 5.2 specification

Tools

• Accessibility Toolkit by Jack Nicolai, webinar
• Accessibility Bluelines by Jeremy Elder, Life Time Accessibility
• Apple Accessibility Inspector (macOS apps)
• Figma A11y Focus Orderer plugin