• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • Browser Extensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
  • Feedback
    • Get Firefox help
    • Get web development help
    • Join the MDN community
    • Report a content problem
    • Report a bug
  • Sign in Github

overview

    • Français (fr)
    • 日本語 (ja)
    • Português (do Brasil) (pt-BR)
    • Add a translation
  • Edit
  • Advanced
    • History
    • Print this article
Jump to:
  1. Introduction
  2. General Resources
  3. Checkbox
  4. Menu
  5. Slider
  6. Tabs
  7. Lightbox
  8. Form Validation
  9. Tables
Warning: needs updating

Introduction

Here's a look at working examples and best practices in building accessible JavaScript widgets.

General Resources

  • DHTML Style Guide provides keyboard interaction recommendations
  • WAI-ARIA Authoring Practices Guide

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 threet (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

Lightbox

  • WCAG 2.0 and ARIA-conformant lightbox application
  • http://majx-js.digissime.net/js/popin/

Form Validation

  • WCAG 2.0 and ARIA-conformant live form validation

Tables

  • German tutorial on creating an accessible form
  • Simple grid example at CodeTalks
  • Date picker grid at CodeTalks
  • WCAG 2.0 and ARIA-conformant sortable tables

Document Tags and Contributors

Tags: 
  • Accessibility
  • JavaScript
  • Landing
  • NeedsUpdate
Contributors to this page: pierrefar, Tigt, Alhadis, Sheppy, kscarfone, ethertank, Aaronlev
Last updated by: pierrefar, Sep 20, 2016, 2:42:45 AM

Learn the best of web development

Get the latest and greatest from MDN delivered straight to your inbox.

Thanks! Please check your inbox to confirm your subscription.

If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.

MDN Web Docs

MDN

  • Web Technologies
  • Learn Web Development
  • About MDN
  • Feedback
  • Twitter
  • GitHub
Mozilla

Mozilla

  • About
  • Contact Us
  • Firefox
  • Twitter
  • Facebook
  • Instagram
  • Terms
  • Privacy
  • Cookies

© 2005-2019 Mozilla and individual contributors.

Content is available under these licenses.