Bug 211176

Summary: AX: support alternative text for "content" property
Product: WebKit Reporter: Haroen Viaene <hello>
Component: AccessibilityAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: cfleizach, emilio, jorge.f, sander, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: All   
OS: All   
Attachments:
Description Flags
Picture none

Description Haroen Viaene 2020-04-29 02:41:32 PDT
By default, the text in a "before" or "after" generated content will be read by a screen reader, but it's often used for things like "★", which, if they were a DOM element would warrant an aria-label. Giving alternative text in the generated content directly will help people to give a better alternative, or to suppress certain decorative character

Chrome seems to have shipped this: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/nC5p6W8nM3g

Issue in FireFox: https://bugzilla.mozilla.org/show_bug.cgi?id=1281158

The spec seems to be here: https://drafts.csswg.org/css-content-3/#alt
Comment 1 Radar WebKit Bug Importer 2020-04-29 02:41:42 PDT
<rdar://problem/62585984>
Comment 2 chris fleizach 2020-04-29 09:47:23 PDT
It looks like we support

[aria-expanded="test6"]::before {
    content: "\25BC";
    alt: "test";
}

but probably not this style

.new::before {
 content: url(./img/star.png) / "New!";
  /* or a localized attribute from the DOM: attr("data-alt") */
}
Comment 3 Jorge Fernandes 2020-05-12 00:21:54 PDT
(In reply to chris fleizach from comment #2)
> It looks like we support
> 
> [aria-expanded="test6"]::before {
>     content: "\25BC";
>     alt: "test";
> }
> 
> but probably not this style
> 
> .new::before {
>  content: url(./img/star.png) / "New!";
>   /* or a localized attribute from the DOM: attr("data-alt") */
> }

I tried 

> [aria-expanded="test6"]::before {
>     content: "\25BC";
>     alt: "test";
> }

and VO don't read the alt.
Comment 4 chris fleizach 2020-05-12 09:45:47 PDT
This appears to work for me. see the screen shot

<style>
.new::before {
    content: "\25BC";
     alt: "test";
 }
</style>

<div class="new">hello</div>
Comment 5 chris fleizach 2020-05-12 09:46:08 PDT
Created attachment 399136 [details]
Picture