[Webkit-unassigned] [Bug 263583] New: AX: Critical bug regarding CSS content with accessibility

[bugzilla-daemon at webkit.org]

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

            Bug ID: 263583
           Summary: AX: Critical bug regarding CSS content with
                    accessibility
           Product: WebKit
           Version: Safari 17
          Hardware: iPhone / iPad
                OS: All
            Status: NEW
          Severity: Critical
          Priority: P2
         Component: Accessibility
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: hyongsop.kim at nvisions.co.kr
                CC: andresg_22 at apple.com,
                    webkit-bug-importer at group.apple.com

Hello, my name is Hyongsop Kim and I am working as an accessibility consultant in South Korea.

Today, I would like to talk about an issue where I want to provide alternative text for a specific string when displaying it using the CSS content property, but VoiceOver does not support it.

Currently, VoiceOver and Safari browsers support the CSS content property very well and read it well.
However, there are cases where you need to prevent the screen reader from reading the string provided by the CSS content property. This is similar to providing decorative images with the img tag, adding the alt="" attribute to ignore the image by the screen reader or using the aria-hidden true property to prevent the screen reader from reading specific decorative icons.
In CSS, you can provide a string like "screen reader text" with a / character inside the content property to make it behave like an alternative text.
Of course, if you set the value to an empty string "", the screen reader will ignore it and not read it.
.topic-games::before {
  content: '�� ' / "";
}
However, on iOS, there is a strange issue where if you put the / "" property along with the content string, it will be processed as the string behind the / on the screen, so the content string is not displayed.
If this is the case, there is no way to prevent VoiceOver from reading the content string at the moment.
If you go to the sample page below, you can see the CSS that has the regular content string and the content string with the / "" character added.
Please check the issue and request a quick fix as follows.
If there is a content string and a string after the /, the front string is processed on the screen, and the back string is processed by assistive technology.
Note that Android Chrome browser and TalkBack handle this property well.
Thank you.
https://khsruru.com/content.html

-- 
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/20231024/8c754e08/attachment.htm>