Bug 263583 – AX: Critical bug regarding CSS content with accessibility

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Accessibility

[Hyongsop Kim]

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

[Radar WebKit Bug Importer]

<rdar://problem/117399979>

[James Craig]

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