Accessibility

Digital Accessibility for Developers and Designers: Building an Accessible Slot Machine

Course Overview

In this workshop we will envision, plan, construct and test an accessible slot machine. During this two-day workshop the class is challenged to understand why we strive to make accessible experiences as well as the technical aspects of application development. The class will begin with building a roadmap for accessible application development that includes answering the business case for accessible development, selection of accessibility testing tools targeting team roles and will work through the user experience design process. During this process, the participant will be provided with templates and checklists based on Web Content Accessibility Guidelines (WCAG) 2.1 principles which will be used to create the specifications for day two.

On day two, the participants will begin the process of applying the work from day one through remediation and enhancement of a base prototype. At each stage of development, the participant is challenged to understand the deeper accessibility implications of each decision with the goal of creating a truly usable experience that goes beyond technical compliance.

Course Length

Two Days

Target Audience

NOTE: Day one has been optimized to embrace the largest audience possible to include non-developers. Day two is heavy application development and requires participants to be able to
open, modify and view web pages.

• UX/UI Designers (Day 1, Day 2)
• Web Developers (Day 1, Day 2)
• Project Mangers (Day 1)
• Quality Assurance (Day 1)
• Everyone (Day 1 – Morning)

Course Prerequisites

Requirements: To make the most of this session, we ask that each participant bring a laptop and have the ability to install accessibility testing software (admin rights). Having a mobile device (Android, iPhone or iPad) is also recommended. Advanced coding experience is not required. Day 2 will require a local development environment.

Also required:
• Working Knowledge of HTML
• Conceptual Understanding of JavaScript
• Laptop
• Headphones
• Mobile Device (iPhone, iPad or Android)

Register for Class

Registration Form

Topic List

Day 1 – Morning: Project Readiness
The first step to any project is preparing the organization and teams. In this session, we will start by making the business case for creating an accessible slot machine and begin the process of developing an accessibility roadmap. By the end of this session participants will have gained a better understanding of why we strive to create inclusive applications and performed the technical tasks of selecting and installing accessibility testing tools that will be used for the remainder of the course.

1. Slot Machine Project Planning

a. Project Goals
b. Making the Business Case
c. Risk Assessment

2. Preparing the Team: Introduction to Accessibility

a. Categories of Accessibility
b. Assistive Technology
c. Common Accessibility Misconceptions

3. Selecting Testing Tools

a. Accessibility Testing Challenge
b. Role of Accessibility Testing Tools
c. Evaluating Tools

4. Applicable Standards
5. Etiquette

Lunch Break

Day 1 – Afternoon: UX Design
In the afternoon session, we will design the requirements and begin to build a feature backlog aimed at creating an accessible gaming experience. The process will begin by developing an understanding of the universally applicable application requirements using a variety of techniques. The group will then perform hands-on exercises designed to inform and demonstrate modern accessibility techniques and will aid in accessible application development. And finally, we will use a series of WCAG based checklists to guide the group as they create the product specifications and testing requirements that will guide the class on Day 2.

1. Accessible Design

a.Product Vision
b.Behavior-Driven Development (BDD)
c.Exercise

2. Design and Testing Strategy

a. Navigational Design
b. Style Guide

3. Accessible Design

a. WCAG Based Check List

i. Style Guide
ii. Navigation Design
iii. Complex Interactions

b. Test Plans

i. Finding Patterns for Accessible Development
ii. W3C UI Patterns

4. Understanding the Accessibility API

a. Selecting Controls
b. Accessibility API and Accessibility Tree

Day 2 – Applying the Design
In this second day, the group will apply the design plans and checklists from the first day. This will begin with an evaluation and remediation of a provided slot machine prototype. The focus will start with understanding basic and advanced controls and how they are presented to Assistive Technologies (AT). The group will then be challenged to go beyond basic accessibility and create an experience that is universally usable by everyone regardless of ability.

1. Building Blocks

a. WAI-ARIA and HTML5
b. Labels and Descriptions
c. Controlling Perception
d. Accessible Navigation
e. Focus Indication, Contrast and Non-Text Contrast

2. Applying the Design

a. Creating Custom Controls: Button
b. Modifying Native Controls: Radio Button

Lunch Break

4. Applying the Design (Cont)

a. Modal Dialog Window
b. Color and Focus Indication
c. Forms Under WCAG 2.0/2.1

i. 1.3.5 Identify Input Purpose (AA)
ii. 2.5.3 Label in Name (A)
iii. 4.1.3 Status Messages (AA)
iv. Non-Normative: Attributes
v. Form Exercise Sprint

d. Content
e. Navigation Design

i. Headings
ii. Landmarks

f. Complex Interactions

i. Play / Pause
ii. Rollers
iii. Beyond Compliance

5. BONUS ROUND