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.	Required WCAG 3.2.1
Context Changes	Context Changes on Input: When a user inputs information or interacts with a control, it MUST NOT result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time. Testing methodology 3.2.2.a	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. Testing methodology 2.4.3.a	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. Testing methodology 2.4.3.a	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). Testing methodology 1.3.1.a	Required WCAG 1.3.1
Timers	Session Timeout – Timing Adjustable: If there is a session time limit, users MUST be warned before the session ends and MUST be given time to save their data and/or extend the session.	Required WCAG 2.2.1
	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.	Required multiple
User Input and Feedback	Feedback: See the requirements for Form Validation and Feedback.	Required multiple
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