Heading aria-labelledby Computation Behavior

[WilcoFiers]

Accessibility support

The accessible name and description computation specification suggests that if an aria-labelledby attribute refers to an existing but empty element, the computation should stop and return an empty name without defaulting to the next steps. However, several user agents and assistive technologies choose to use the next step in the computation in this case (ultimately defaulting to the content).

ACT Rules

• Heading has non-empty accessible name - ffd0e9

Test cases

Test case 1

Testing aria-labelledby computation behavior

<!-- Heading with empty aria-labelledby reference -->
<span id="empty-label"></span>
<h1 aria-labelledby="empty-label">Important Content</h1>

<!-- Heading with whitespace-only aria-labelledby reference -->
<span id="space-label"> </span>
<h1 aria-labelledby="space-label">Contact Information</h1>

<!-- Heading with multiple references, first one empty -->
<span id="first-label"></span>
<span id="second-label">Section</span>
<h1 aria-labelledby="first-label second-label">About Us</h1>

<!-- Heading with non-existent reference -->
<h1 aria-labelledby="missing-label">Our Services</h1>

<!-- Heading with mixed content and empty reference -->
<span id="mixed-label"></span>
<h1 aria-labelledby="mixed-label">
	<img src="icon.png" alt="" />
	News Updates
</h1>

Test case

Test instructions

1. Load the test case in different browsers
2. Test with different screen reader combinations
3. For each heading, check:
   • If an accessible name is computed
   • What name is announced by screen readers
   • If the computation falls back to element content
   • How whitespace-only references are handled
4. Expected results:
   • According to spec: Empty references should result in empty names
   • In practice: Many UAs fall back to element content
   • Whitespace handling should be consistent
   • Multiple references should work as expected

External links

• Accessible Name and Description Computation: https://www.w3.org/TR/accname-1.1/
• HTML Accessibility API Mappings: https://w3c.github.io/html-aam/
• ARIA in HTML: https://w3c.github.io/html-aria/
• Understanding SC 2.4.6 Headings and Labels: https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html

Test results

Please report test results in a comment below. Please use the following format:

## Test case 1

- Date: ...
- Operating system: ..., version ...
- Browser: ..., version ...
- Screen reader: ..., version ...
- Results for each heading:
  1. Empty reference: ... (empty name/falls back to content)
  2. Whitespace reference: ... (empty name/falls back to content)
  3. Multiple references: ... (behavior description)
  4. Missing reference: ... (behavior description)
  5. Mixed content: ... (behavior description)
- Computation behavior: ... (follows spec/falls back)
- Test result: Passed / Failed (if failed, how was it different from expected?)