New issue
Advanced search Search tips

Issue 860016 link

Starred by 3 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Chrome
Pri: 3
Type: Feature
Team-Accessibility



Sign in to add a comment

Alt text in CSS content is not supported

Project Member Reported by evn@google.com, Jul 3

Issue description

Chrome Version: 67.0.3396.99 (Official Build) (64-bit)
OS: ChromeOS

What steps will reproduce the problem?
(1) Create a CSS rule with:

<span class=new></span>
<style>
.new::before {
 content: url(./img/star.png) / "New!";
}
</style>
(2) Open the HTML with a screen reader
(3) Select the span.

What is the expected result?
It should speak "New!"

What happens instead?
Nothing

Please use labels and text to provide additional information.

See: crbug.com/80466
See: https://drafts.csswg.org/css-content/#alt

Content intended for visual media sometimes needs alternative text for speech output or other non-visual mediums. The content property thus accepts alternative text to be specified after a slash (/) after the last <content-list>. If such alternative text is provided, it must be used for speech output instead.

This allows, for example, purely decorative text to be elided in speech output (by providing the empty string as alternative text), and allows authors to provide more readable alternatives to images, icons, or text-encoded symbols.
 
Any idea of the status of this, does it work in any other browsers?

Is there someone on the CSS side who could implement the support for parsing this? I'd be happy to hook up the accessibility part.


When the additional list item is present, no items in the list are read by NVDA and JAWS in Chrome and Firefox. No CSS content is read in IE.

Chrome: 69.0.3480.0 Canary
Firefox: 61.0.1 (64-bit)
NVDA: 2018.2.1
JAWS: 2018

Example: 
<h1>before</h1>
<span class="new"></span>
<style>
.new::before {
 content: "hello" / "good-bye";
}
</style>
<h1>after</h1>

In this example, both screen readers in both browsers read nothing between the two <h1>'s

Cc: futhark@chromium.org
Status: Available (was: Untriaged)

Sign in to add a comment