Skip to main content
University of California San Francisco Give to UCSF

UCSF IT Technology

Main navigation

  • Status
    • Security Announcements
  • Services
  • How To
  • News & Events
  • About Us
  • Log In
Open Close Search
Open menu
Give to UCSF

Breadcrumb

  1. Home
  2. How To
  3. Accessible JavaScript Best Practices

This content is viewable by Everyone

Accessible JavaScript Best Practices

Save

Log in via MyAccess to save.

  • Audience: Affiliate, Faculty, Non-UCSF, Staff, Technical Partner, Volunteer
  • Service Category: Web Services
  • Owner Team: Web Services
  • Service:
    Digital Accessibility Program

JavaScript is accessible when used well

From tabs to sliders, JavaScript provides a number of ways to enhance content and present information in innovative ways. For example, JavaScript can update information on the fly without requiring a page refresh. That's a great thing for folks using Assistive Technology so long as the updates made to the page also include ways to update the user about how the page has changed.

Name, state, and role of controls and features

Accessible JavaScript has the name of a control or feature, the state of that control (what's happening? Is it open or closed, checked or not?), the role of the control on the page (what does this control do?) and if applicable, the updated value to users who can't discern that information visually.

ARIA

The Accessible Rich Internet Application standard, WAI-ARIA 1.0 or ARIA, provides a mechanism to make content more accessible to users with disabilities.  ARIA is just to fill in the gaps where accessible information is not provided natively by HTML elements like a<div> or<span>. Use ARIA only after all other means have been used to correct an issue otherwise ARIA might give conflicting direction. 

The Periodic Table of ARIA 1.0 Roles and Periodic Table of ARIA 1.0 attributes are handy references for getting familiar with how to add ARIA to your pages.

Trigger events, device-dependent event handlers

Javascript can trigger events based on a user’s actions. Include triggers, event handlers, like onBlur and onFocus that work with the keyboard. Device-dependent event handlers like onMouseOver and onMouseOut only work when they are triggered by a mouse event.

Additional considerations

  • Ensure that keyboard-only users can always orient themselves on the page by making sure that keyboard focus is always visible, and manage focus so that, for example, when JavaScript opens a dialogue or modal window, the page beneath it isn't available to the keyboard.
  • Use JavaScript to set focus on any updated content.
  • Use the tab index attribute to add and remove elements from the tab order as needed. 

Finally, remember that JavaScript should only be used to enhance well-structured, semantic HTML so that the content is still available even if JavaScript isn't available. There are a number of situations when JavaScript may not be compatible, allowed or even be available (as in the case of feature phones), so always have a fallback for all users.

Resources

  • Accessibility in Modern Interfaces
  • Accessible JavaScript
  • An Introduction to WAI-ARIA
  • An Introduction to WAI-ARIA Roles, States, And Properties
  • Avoiding Redundancy with WAI-ARIA in HTML Pages
  • Client-side Scripting Techniques for WCAG 2.0
  • Keyboard Navigable JavaScript Widgets
  • Modern Web Accessibility with JavaScript & WAI-ARIA

Related Information

  • Accessible Color Best Practices
  • Accessible Documents Best Practices
  • Accessible Forms Best Practices
  • Accessible Images Best Practices
  • Accessible PDF Best Practices
  • Accessible Structure Best Practices
  • Accessible Videos Best Practices
  • Accessible Virtual Events Best Practices
Section Menu
Digital Accessibility Program
  • Digital Accessibility Awareness and Outreach
  • Introduction to Digital Accessibility at UCSF
  • Digital Accessibility Consultations for Online Content
  • Testing for Digital Accessibility
  • Accessible Color Best Practices
  • Accessible Documents Best Practices
  • Accessible Forms Best Practices
  • Accessible Images Best Practices
  • Accessible JavaScript Best Practices
  • Accessible PDF Best Practices
  • Accessible Structure Best Practices
  • Accessible Videos Best Practices
  • Accessible Virtual Events Best Practices
  • Software Purchasing Guidance for Accessibility
Home

Footer Col 1

  • Status
  • Services
  • How To
  • News & Events

Footer Col 2

  • About
  • IT Directory
  • Standards & Guidelines

Footer Col 3

  • Get Help
  • Recognize IT Staff
  • Submit a Support Inquiry

    For emergencies and high priority issues please call the IT Service Desk (415) 514-4100

    • Facebook
    • Twitter
    • YouTube
    • Instagram

    © 2023 The Regents of the University of California