How to create accessible JavaScript widgets

From CodeTalks

Contents 1 Introduction 2 General Resources 3 Checkbox 4 Menu 5 Slider 6 Tabs 7 Combobox 8 Lightbox 9 Form Validation 10 Table

Introduction

A lot of Web2.0 development is: DHTML (JavaScript, DOM, CSS) and Ajax. In this section we look at working examples and best practices in building accessible DHTML widgets.

General Resources

• DHTML Style Guide provides keyboard interaction recommendations.
• WAI-ARIA draft specification
• Mozilla Developer Center ARIA information
• WAI-ARIA Best Practices Guide draft

Checkbox

• ARIA Toggle Button and Tri-state Checkbox examples (from "The Paciello Group Blog")
• ARIA Example Checkbox Widgets from the University of Illinois

Menu

• Using WAI-ARIA Roles and States with the YUI Menu Control

Slider

• From the Paciello Group Blog: ARIA Slider, part one part two part 3 (example)
• Creating an Accessible, Internationalized Dojo Rating Widget

Tabs

• Enhancing TabView Accessibility with WAI-ARIA Roles and States, from the YUI blog.

• Enhancing the jQuery UI Tabs accordingly to WCAG 2.0 and ARIA

• Tab panel example here on CodeTalks

Combobox

• Simple combobox (not editable) as Select-Box-Replacement

Lightbox

• WCAG 2.0 and ARIA conform Lightbox Apllication
• http://majx-js.digissime.net/js/popin/

Form Validation

• WCAG 2.0 and ARIA conform Live Form Validation

Table

• German Tutorial on how to create a accessible formular

• Simpe grid example here on CodeTalks

• Date picker grid here on CodeTalks

• WCAG 2.0 and ARIA conform sortable tables