Web Design: Introduction to Accessible Web Widgets with ARIA

Javascript, HTML and CSS are often used to create custom interactive web widgets for web pages and cloud applications.  Some common examples of web widgets include: pull down menus for website navigation, rotating image sliders to present news and events, and combo boxes with options based on user history or profiles.  The W3C Accessible Rich Internet Application (ARIA) specification provides a means to describe the behaviors and keyboard interaction of the widgets to users of assistive technologies.  Participants will learn the basic concepts of creating accessible widgets including how to include keyboard interaction, keyboard focus styling, selecting appropriate ARIA roles, properties and states to make sure widgets are accessible and accurately describe keyboard interaction.  The course will review the design patterns of several common ARIA enabled widgets and participants will build their own accessible widgets as part of the course.  The course will be based on the design patterns and techniques of the W3C ARIA Authoring Practices guidelines.  The course will also help participants understand the Section 508 and W3C WCAG 2.0 requirements that apply to scripting and interactive custom widgets.

Click here to enroll in this course

Instructor

Jon Gunderson, Ph.D.
Disability Resources and Education Services
University of Illinois at Urbana-Champaign

Audience

  • User interface and Interaction Designers
  • Web developers
  • Quality assurance testers

What you will learn

  • Choosing an ARIA role
  • Using ARIA properties and states attributes
  • ARIA labeling and description techniques
  • How accessible names are computed
  • How accessible descriptions are computed
  • Visual focus styling of interactive elements of a widget
  • Using AInspector Sidebar for identifying scripting and widget issues
  • Screen readers experience in interacting with accessible custom widgets

Objectives

After completing this course, participants will be able to: 

  • Identify the proper ARIA widget role for describing a custom web widget.
  • How to include keyboard support for an ARIA widget role.
  • Define an accessible name for a widget role.
  • Identify which ARIA properties and states need to be supported for a widget role.
  • Best practices for synchronizing visual and ARIA state information.
  • CSS and Javascript techniques to provide consistent keyboard focus indicator for widgets.
  • How to use the W3C ARIA Authoring Practices Guide to identify and design accessible custom web widgets.  
  • Understand the accessibility requirements for Section 508 and W3C WCAG 2.0 requirements for custom web widgets.
  • Understand how screen reader users experience accessible custom web widgets.

Student Participation

  • Interactive synchronous lecture with instructor using Blackboard Collaborate.
  • In class activities where students will need to identify and critique widgets on live websites.
  • In class activities to build and test accessible web widgets with assistive technologies.
  • Badging exam related to building and testing an accessible custom web widget.

Prerequisites

  • Knowledge of HTML and basic CSS
  • Knowledge of Javascript and DOM is required

Badging Requirements

  • Evaluate the accessibility of an existing web resources with widgets for accessibility featues and issues.
  • Submit an accessible web widget from the participants own work or build a widget defined by the instructor, and test widget for accessibility including the use of assistive technologies.