Web Design: Form Controls and Links

Web badge for Form Controls 100 x 100 pixelsLinks and form controls are the fundamental interactive elements of the web and it is important to understand what makes them accessible and usable to people with disabilities.  Participants will learn how the accessible name for a link is computed and how to use W3C Accessible Rich Internet Application (ARIA) techniques to provide programmatic context to improve the meaning of a link to meet WCAG 2.0 requirements.  Participants will learn how to label form controls with standard label elements and with ARIA techniques, and how the different techniques affect user interaction.   The course will demonstrate the history of techniques for providing accessible error feedback, and the latest techniques available using ARIA.  The course will include techniques to provide a consistent visual keyboard focus indicator across browsers for links and form controls.   Participants will understand the Section 508 and W3C WCAG 2.0 requirements that apply to links and form controls.

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

  • How accessible names for links are computed
  • How to provide programmatic context information for links
  • Importance of using the label element for standard form controls
  • How labels for form controls are computing using ARIA  
  • Visual focus styling of links and form controls
  • Using AInspector Sidebar for identifying link and labeling accessibility issues
  • Using Accessibility Bookmarklets to visualize accessibility features of links and form controls
  • Screen readers experience proper naming of links and labeling of form controls

Objectives

After completing this course, participants will be able to: 

  • Understand how the accessible name for a link is computed and how the name can be changed with ARIA techniques to improve the meaning of the link and/or provide context information.
  • Understand how the label element can be used label input, textarea and select elements and the interaction benefits of using the label element.
  • Understand how the fieldset/legend elements provide a grouping label for related form controls.
  • Understand how and when to use aria-labelledby, aria-label and the title attribute as an alternative to using the label element for labeling form controls.  
  • CSS and Javascript techniques to provide consistent keyboard focus indicator for links and form controls.
  • Understand the accessibility features of common techniques for providing instructions and error feedback.
  • Understand the link and form accessibility requirements for Section 508 and W3C WCAG 2.0 requirements.
  • Understand how screen reader users experience accessible links and form controls.

Student Participation

  • Interactive synchronous lecture with instructor using Blackboard Collaborate.
  • In class activities where participants will need to identify and critique links and form controls on live websites.
  • In class activities to build and test the accessibility of links and form controls.
  • Test sample pages with assistive technologies and evaluation tools.
  • Badging exam related to either submit website the participant designed or identify structure of several example websites provided by the instructor.

Prerequisites

  • Knowledge of HTML and basic CSS
  • Knowledge of Javascript and DOM is strongly recommended, but not required

Badging Requirements

  • Submit multi-page website designed by the participant with links and at least one form with automated error feedback, or
  • Identify the proper naming of links, labeling of form controls and accessible error feedback from instructor provided web resources.