[Webkit-unassigned] [Bug 285261] New: VoiceOver does not announce del/ins elements within buttons on iOS

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=285261

            Bug ID: 285261
           Summary: VoiceOver does not announce del/ins elements within
                    buttons on iOS
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: khsbory at naver.com

**OS:** iOS 18 latest beta version (or iOS 18 latest version - after official release)

**Steps to Reproduce:**

1.  Enable VoiceOver in the Accessibility settings of your iPhone.
2.  Open the Safari browser.
3.  Navigate to the following URL: [https://khsruru.com/product.html](https://khsruru.com/product.html)
4.  Use VoiceOver to explore and read each product item.

**Expected Result:**

VoiceOver should recognize the `<del>` and `<ins>` tags within the button elements and announce the text as "deleted" or "inserted" accordingly. For example, markup like "<del>10,000 won</del> <ins>9,000 won</ins>" should be read as "deleted 10,000 won inserted 9,000 won."

**Actual Result:**

VoiceOver ignores the `<del>` and `<ins>` tags within the buttons and only reads the text without the tags. Using the example above, it only reads "10,000 won 9,000 won," making it impossible for screen reader users to know which price is the original price and which is the discounted price.

**Additional Information:**

Product list web pages often display both the original price and the discounted price. Using `<del>` and `<ins>` tags is a common practice to enhance accessibility. While VoiceOver correctly reads these tags when they are focused on as separate text nodes, it fails to read the tag information when they are included within buttons. This is because the focus merges into a single point.

While it is correct that the focus is merged into one for a single clickable element such as a button, the information from `<del>` and `<ins>` tags should also be read aloud as it provides crucial price information to visually impaired users. Currently, this information is omitted, making it difficult for screen reader users to understand the correct price information.

**Request:**

We request that you improve VoiceOver to accurately read `<del>` and `<ins>` tags even when they are nested within buttons. This will help screen reader users to clearly understand and use the price information on web pages.

**Sample Code:**

A sample page that reproduces the problem can be found at [https://khsruru.com/product.html](https://khsruru.com/product.html). Each product item on this page includes a button containing `<del>` and `<ins>` tags.

**Note:**

This is a common accessibility issue that occurs when displaying price information on web pages. We hope that this issue can be resolved quickly so that more users can benefit from web accessibility.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20241231/9d7e7f04/attachment.htm>