• Skip to main content
  • Select language
  • Skip to search
mozilla
Mozilla Developer Network
  • Sign in
    • Sign in or create an account:
      GitHub
    • Sign in:
      Persona
  • Web Technologies
    Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
    References & Guides
    • Learning web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
  • Mozilla Docs
    • Add-ons
    • Firefox
  • Developer Tools
  • Feedback
    • Get Firefox help
    • Get web development help
    • Join the MDN community
    • Report a content problem
    • Report a bug
  •  
    • Français (fr)
    • Português (do Brasil) (pt-BR)
    • Add a translation
  • Edit
  • Advanced
    • History
    • Print this article
  1. MDN
  2. Web technology For developers
  3. Accessibility
  4. ARIA
  5. widgets
  6. overview
Your Search Results

    overview

    In This Article
    1. Introduction
    2. General Resources
    3. Checkbox
    4. Menu
    5. Slider
    6. Tabs
    7. Lightbox
    8. Form Validation
    9. Tables

    This article needs a technical review. How you can help.

    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
    • https://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

    © 2005-2016 Mozilla Developer Network and individual contributors.

    Content is available under these licenses.

    • About MDN
    • Terms
    • Privacy
    • Cookies
    • Contribute to the code