Replacement record: Accessible JavaScript and interactive components

This record explains how the Drupal 7 page Maintaining accessibility in rich Internet applications and Javascript/Ajax features was replaced by the proposed current documentation page, Accessible JavaScript and interactive components. It also provides a short archival notice for the Drupal 7 page.

Page replaced

Drupal 7 source page replaced by the current page
Drupal 7 page	Disposition
Maintaining accessibility in rich Internet applications and Javascript/Ajax features	The durable guidance on progressive enhancement and communicating dynamic updates was retained. Drupal 7, old browser and screen-reader explanations, and obsolete references were removed. The subject was rebuilt around Drupal 11's JavaScript API and WCAG 2.2.

What was retained

Build a meaningful HTML base before adding dynamic behavior.
Changes made without a page load may need to be communicated to assistive technology.
Use Drupal's announcement facility for concise status messages.
Research and test a component's accessibility before adopting it.

What was updated or added

Drupal 11 behavior attachment

The replacement documents Drupal.behaviors and once(). This is necessary because Drupal attaches behaviors on initial load and after Ajax or BigPipe adds content. Repeated attachment can otherwise create duplicate controls, listeners, or announcements. The example follows Drupal's current JavaScript API pattern and uses no unnecessary jQuery dependency.

Native HTML and ARIA limits

The page now directs developers to native controls before custom widgets. It explicitly states that ARIA exposes semantics but does not add keyboard behavior, focus management, or event handling. This addresses a common source of barriers that the old page did not cover.

Keyboard and focus behavior

The replacement adds keyboard operation, established composite-widget conventions, visible focus, avoidance of positive tabindex, modal focus containment, focus restoration, and recovery when the focused element is removed. These are core requirements for dynamic interfaces and cannot be inferred from a general instruction to use progressive enhancement.

Names, roles, states, and status messages

The new page distinguishes changes that should update a component's programmatic state from changes that need a status message. It retains Drupal.announce(), adds Drupal.t(), explains polite and assertive priorities, and warns against redundant live-region output. This is more precise than announcing every Ajax update.

Common interaction patterns

The replacement adds maintainable requirements for dialogs, disclosures, content on hover or focus, Ajax forms, loading states, and third-party widgets. It recommends Drupal core components and established interaction patterns before custom implementations.

WCAG 2.2 pointer requirements

The page adds dragging alternatives and minimum target size. It keeps keyboard access and simple-pointer alternatives separate because a keyboard-only alternative does not by itself meet the dragging success criterion. It also requires manual review of target-size exceptions rather than treating every measured target below 24 by 24 CSS pixels as an automatic failure.

Motion and flashing

Motion guidance moved here from the retired Drupal 7 typography material. The replacement covers pausing or stopping moving content, reduced-motion preferences, interaction-triggered animation, and flash thresholds. Animation from Interactions is identified as Level AAA and therefore aspirational under an AA target unless the project adopts a stronger requirement.

Repeatable testing

The test list covers keyboard, screen readers, focus, Ajax, BigPipe, repeated behavior attachment, zoom, touch, forced colors, reduced motion, failure states, and interrupted JavaScript. Automated rules are described as a limited source of evidence, not as a substitute for review of the interaction.

What was removed or corrected

Material removed or corrected and the reason
Old material	Change and reason
"Rich Internet applications" as the organizing term	Removed. It is dated terminology and does not help developers identify the actual requirements. The replacement uses JavaScript and interactive components.
The statement that screen readers "parse JavaScript"	Corrected. Assistive technologies consume the semantics, states, relationships, text, and events exposed by the rendered interface and accessibility APIs. JavaScript is neither accessible nor inaccessible by itself.
A simplified explanation that screen readers create a virtual copy of a page and must refresh it after Ajax changes	Removed. Assistive-technology and browser architectures vary. The durable requirement is to expose accurate states, manage focus when context changes, and provide status messages when updates are otherwise unavailable.
The statement that accessible dynamic interaction was a relatively new area	Removed. It was already dated when the page was last updated in 2016 and gives no implementable guidance.
Drupal 8 described in future or transitional terms	Removed. The replacement is current guidance for supported Drupal releases and uses the present Drupal JavaScript API.
A general direction to add WAI-ARIA	Corrected. Native HTML is preferred, and ARIA is limited to valid roles, properties, and states for a complete interaction pattern. ARIA alone does not make a custom control accessible.
Old The Paciello Group and WebAIM JavaScript/Ajax articles	Removed. The links and terminology are dated. Current Drupal API documentation, WCAG 2.2 understanding documents, and the W3C ARIA Authoring Practices Guide are used instead.
Drupal 7 implementation context	Removed from the instructional page. Drupal 7 reached end of life on 5 January 2025, so the old page should receive an archival pointer rather than an in-place technical rewrite.

Content mapping

Where the source material appears in the replacement page
Current section	Primary source or reason
Start with native HTML	The old page's solid-base principle, updated with native-control and ARIA guidance.
Attach Drupal JavaScript correctly	Current Drupal JavaScript API behavior and `once()` requirements.
Keep names, roles, and states accurate	Current semantic requirements for component states.
Provide complete keyboard operation and Manage focus when context changes	Current WCAG requirements and W3C interaction patterns.
Communicate dynamic updates	The old Ajax-announcement intent, corrected and implemented with `Drupal.announce()`.
Use established components and patterns	Current dialog, disclosure, and hover-or-focus requirements.
Handle Ajax and form updates	The old Ajax subject expanded into testable form and loading-state guidance.
Support pointer and touch operation	WCAG 2.2 dragging and target-size requirements.
Limit motion and flashing	Motion material assigned from the old typography page and updated to WCAG 2.2.
Review third-party widgets and Test interactive components	The old research-and-test advice converted into a repeatable review scope.

Copy-ready archival notice

<p><strong>This Drupal 7 page is no longer supported.</strong> See <a href="/docs/getting-started/accessibility/accessible-javascript-and-interactive-components">Accessible JavaScript and interactive components</a> for current guidance. Drupal 7 reached end of life on 5 January 2025. See <a href="/about/drupal-7/d7eol/partners">Drupal 7 support options</a> if you still maintain a Drupal 7 site.</p>

Sources checked

The Drupal page about accessibility tools for JavaScript is marked as needing review. It was used only for stable Drupal APIs that are also supported by Drupal's JavaScript API documentation or change records. Old Overlay and jQuery examples were not carried into the replacement.