304137 2025-12-13 18:33:44 -0800 VoiceOver on iOS fails to expose list semantics for <ul> elements with list-style: none 2026-02-23 16:59:55 -0800 1 1 1 Unclassified WebKit Accessibility WebKit Nightly Build iPhone / iPad iOS 18 RESOLVED DUPLICATE 122320 InRadar P2 Normal --- 1 khsbory webkit-unassigned andresg_22 jcraig webkit-bug-importer oldest_to_newest 2165717 0 khsbory 2025-12-13 18:33:44 -0800 ## 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. 2165718 1 webkit-bug-importer 2025-12-13 18:33:52 -0800 <rdar://problem/166462573> 2184238 2 jcraig 2026-02-23 16:59:55 -0800 See explanation here: https://bugs.webkit.org/show_bug.cgi?id=122320#c16 *** This bug has been marked as a duplicate of bug 122320 ***