Proposal: Add `aria-focus-combine` attribute for consistent screen reader focus grouping

[khsbory]

Summary

I propose adding a new ARIA attribute, aria-focus-combine, to enable web developers to explicitly control how screen readers group focus for child elements. This would bring web accessibility standards in line with native mobile platforms (iOS and Android), which already provide similar capabilities.

Background

Native Mobile Platform Support

Both major mobile platforms provide official APIs for merging accessibility focus:

• Android (Jetpack Compose): mergeDescendants (or mergeSemantics in Flutter)
• iOS (SwiftUI): accessibilityElement(children: .combine) modifier

These APIs allow developers to combine multiple child elements into a single accessibility focus, preventing overly fragmented navigation experiences.

Current Web Limitations

On the web, accessibility focus grouping is entirely dependent on each screen reader's implementation philosophy, leading to highly inconsistent user experiences:

• iOS VoiceOver: Often splits a single link into 10+ separate focus stops
• Android TalkBack: Typically combines link content into a single focus by default

This inconsistency creates significant usability problems, especially as web developers increasingly use complex styling that can inadvertently fragment screen reader focus.

The Problem

Real-World Impact

Modern web development practices often result in unintended accessibility fragmentation:

1. Complex link structures: Links with multiple styled child elements (icons, badges, text) become unusable on some screen readers
2. Character-level styling: Some developers wrap individual characters in <span> elements for animation or styling effects, making text completely unusable for screen reader users
3. No control mechanism: Developers have no way to ensure consistent experiences across different screen readers

Current Workarounds Are Inadequate

Developers currently resort to problematic workarounds:

• Using deprecated role="text" (which VoiceOver still supports as a workaround)
• Adding aria-label to parent and aria-hidden="true" to all children (loses semantic richness)
• These approaches are inconsistent and not standardized

Proposal: aria-focus-combine

Specification

Attribute name: aria-focus-combine

Values: true | false (default: false)

Behavior: When aria-focus-combine="true" is set on an element:

1. All descendant elements MUST be merged into a single accessibility focus
2. The merged focus presents all text content as a continuous unit
3. This behavior overrides default screen reader heuristics
4. Works regardless of element types (links, text, styled elements, etc.)

Example Usage

<!-- Without aria-focus-combine: may read as 3+ separate stops -->
<a href="/product">
  <img src="icon.png" alt="Product icon">
  <span class="title">Product Name</span>
  <span class="badge">New</span>
</a>

<!-- With aria-focus-combine: always reads as single focus -->
<a href="/product" aria-focus-combine="true">
  <img src="icon.png" alt="Product icon">
  <span class="title">Product Name</span>
  <span class="badge">New</span>
</a>

Demo Pages

I've created two demonstration pages showing the current problems:

1. VoiceOver link fragmentation demo: https://a11y-demo-english.replit.app/

   • Demonstrates how iOS VoiceOver splits links into excessive focus stops

2. Cross-platform focus fragmentation demo: https://a11y-demo-english.replit.app/aria-focus-combine

   • Shows scenarios where even TalkBack experiences focus fragmentation

Please test these pages with VoiceOver (iOS) and TalkBack (Android) to experience the inconsistency firsthand.

Why This Is Urgent

This issue significantly impacts screen reader users' daily web experience:

• Navigation becomes tedious and disorienting
• Modern styling techniques exacerbate the problem
• No standardized solution currently exists
• The gap between web and native mobile accessibility continues to widen

Request

I respectfully request the ARIA Working Group to consider adding aria-focus-combine to the ARIA specification to:

1. Provide developers with explicit control over accessibility focus grouping
2. Ensure consistent screen reader experiences across platforms
3. Align web accessibility capabilities with native mobile platforms

Thank you for considering this proposal.