Dynamic Content (JavaScript, AJAX)

Note:

This section is currently undergoing revisions.

Accessibility Techniques for Dynamic Content (JavaScript/AJAX)
Topic Technique WCAG AA Requirement
Context Changes Context Changes on Focus: The focus MUST be purposely moved or set (via JavaScript) onto the appropriate element when the user's action requires a change of context or location for effective keyboard or touch interaction.
Context Changes on Input:
Required
WCAG 3.2.2
Finding Added Content Finding Added Content: Silence is bad. When screen reader users activate a feature (link, button, control, etc.), or when an important part of the content changes, they need to hear feedback. One of the basic challenges with dynamic content is to figure out the best way to tell screen reader users about the dynamic changes. Required
WCAG 1.3.2
Keyboard Focus Management During Interactions Set Keyboard Focus: The focus MUST be purposely moved or set (via JavaScript) onto the appropriate element when the user's action requires a change of context or location for effective keyboard or touch interaction. Required
WCAG 2.4.3
No Lost Focus: The focus MUST NOT become lost or reset to the top of the page, except when loading or re-loading a page. Required
WCAG 2.4.3
Focus Target Has Text: When moving or setting focus, the destination element MUST contain discernible text (either standard text or programmatically-associated text). Required
WCAG 1.3.1
Timers Session Timeout:  
Timers with Fixed Deadlines  
Auto Refresh/Reload Page:  
Auto Refresh/Reload Content Items or Sections  
Changes in State Programmatic State Changes: When the state of an element changes (e.g. selected, expanded, inactive), the state MUST be programmatically changed via HTML or ARIA attributes, not just visually changed.  
User Input and Feedback Input: See the requirements for Form Inputs, Labels, and Instructions  
Feedback: See the requirements for Form Validation and Feedback  
Passive Changes to Content On Focus:  
On Hover:  
On Gesture:  
On Input:  
On Blur:  
On Scroll:  
On Device Orientation Change:  
Device Motion Activation:  
Device Spatial Orientation Detection:  
Notifications for AJAX Passive/Lazy Load:  
Placeholder Content for AJAX Passive/Lazy Load:  
Busy State During AJAX Passive/Lazy Load:  
Timed Changes  
User-Requested Changes to Content On Click/Touch:  
On Submit/Button Activation:  
AJAX Partial Page Load (Main Content) on Activate Link or Button:  
AJAX Partial Page Load (Secondary Content) on Activate Link or Button:  
User Input Methods

See the requirements for Device-Independent User Input regarding:

  • Mouse
  • Keyboard
  • Touch
  • Voice
Required
multiple