Bug 304137 – VoiceOver on iOS fails to expose list semantics for <ul> elements with list-style: none

• Component: Accessibility
• Status: RESOLVED DUPLICATE

[Hyongsop Kim]

## Summary

I am writing to report a persistent behavior in VoiceOver on iOS regarding unordered lists (`<ul>`) styled with `list-style: none`.

I greatly appreciate the improvements made late last year regarding list item indexing (announcing "item X of Y"), which has significantly enhanced the web navigation experience for visually impaired users. However, a long-standing issue persists on mobile devices: when `list-style: none` is applied to a `<ul>` tag, iOS VoiceOver treats the content as plain text rather than a list, effectively stripping its semantic value.

It is important to note that this behavior is inconsistent with macOS VoiceOver, which correctly identifies and announces these elements as lists regardless of the `list-style` property.

## Rationale

I understand the potential logic might be that if visual markers are removed, the content should not be treated as a list. However, I strongly disagree with this approach for the following reasons:

1. **Visual vs. Semantic**: `list-style: none` is a CSS property used primarily to override default user-agent styles for design customization, not to negate the semantic structure of the content.

2. **Consistency**: We do not strip the role of `<button>` or `<a>` tags simply because their visual defaults (like borders or underlines) are removed via CSS. Similarly, a list should remain a list semantically unless the role is explicitly changed by the developer (e.g., `role="none"`).

3. **Platform Parity**: The discrepancy between macOS and iOS creates a fragmented experience for users and developers. Since macOS VoiceOver handles this correctly, the expectation is that iOS should behave similarly.

## Steps to Reproduce

1. Open Safari on an iPhone or iPad with VoiceOver enabled.
2. Navigate to the reproduction demo page: [https://a11y-demo-english.replit.app/list-styles](https://a11y-demo-english.replit.app/list-styles)
3. Swipe to focus on the first list (Standard `<ul>` with default styles).
4. Swipe to focus on the second list (Custom `<ul>` with `list-style: none`).

## Expected Result

VoiceOver should announce "List start," "List end," and the relative position of items ("item X of Y") for both lists, recognizing that `list-style: none` is a visual styling preference. This would align iOS behavior with macOS.

## Actual Result

- **First List (Default)**: VoiceOver correctly announces the list context and item indices.
- **Second List (`list-style: none`)**: VoiceOver reads the text items linearly without announcing "List start" or the item counts, treating them as if they were not part of a list structure.

**Note**: On macOS Safari, both lists are correctly announced as lists.

## Impact

This behavior forces developers to use explicit ARIA roles (`role="list"`) unnecessarily just to restore semantics that were stripped by a visual CSS property, which goes against the rule of using native HTML elements whenever possible.

I kindly request a policy review on this behavior to decouple visual list styling from semantic list exposure and ensure consistency between iOS and macOS.

[Radar WebKit Bug Importer]

<rdar://problem/166462573>

[James Craig]

See explanation here:
https://bugs.webkit.org/show_bug.cgi?id=122320#c16

*** This bug has been marked as a duplicate of bug 122320 ***