Closed Bug 1896047 Opened 2 months ago Closed 2 months ago

Expose CSS content alt text in the a11y tree


(Core :: Disability Access APIs, enhancement)




128 Branch
Tracking Status
firefox128 --- fixed


(Reporter: Jamie, Assigned: Jamie)


(Blocks 1 open bug)



(6 files)

Spun off bug 1878355 comment 4.

Now that bug 1281158 is fixed, we can get alt text from the CSS content property from layout. However, this isn't sufficient alone to get this exposed in the a11y tree.

Simple test case for pseudo-element:

data:text/html,<style> button::before { content: url("") / "before"; } </style><button>button

For this case, we should expose an image Accessible in the tree.

Simple test case for replaced element:

data:text/html,<blockquote style="content: url('') / 'before';">replaced

This one is a bit trickier. Layout creates an image frame for the replacement image, but that frame becomes the primary frame for the blockquote element. There is no child DOM node (not even an anonymous one), so we can't create a child Accessible. We can't use an image accessible because we'd lose the semantics of this being a blockquote element. So, we need to expose a block quote accessible, but with the CSS alt text as the name. This is also what Chromium does.

There is a third case: alt text for text content:

data:text/html,<style>button::before { content: "before" / "alt-before"; } </style><button>content

This seems like a terrible use case IMO, but it is what it is. 😒

Unfortunately, the WPT tests in accname/name/comp_name_from_content.html test exactly this case.

All of these cases can have multiple alt strings:

data:text/html,<style> button::before { content: url("") / "be" "fore"; } </style><button>button

The alt text can also come from an attribute:

data:text/html,<style> button::before { content: url("") / attr(alt); } </style><button alt="before">button

Without this, a new source file introduced in a subsequent patch causes the compiler to become confused about which TreeWalker we mean: a11y::TreeWalker or dom::TreeWalker.
I don't really understand why this starts happening, but I'm guessing it is related to our unified builds.

This allows us to check for alt text and also to output all of it to a string.
For now, this only supports plain strings.

This directly handles the case where the CSS content property replaces the content of an element with an image plus alt text.
It is also needed to correctly return the alt text for a pseudo-element ImageAccessible, as implemented in a subsequent patch.

CSS alt text makes most sense for an image.
However, even when the content property specifies text, you can still specify alt text!
To support this, this patch does two things:

  1. Uses the alt text for the TextLeafAccessible instead of the primary text.
  2. Tweaks nsTextEquivUtils to use the alt text when gathering text from a subtree.

As well as plain strings, alt text items can get their text from an attribute on the Element.

Attachment #9401066 - Attachment description: Bug 1896047 part 6: Support the CSS attr() function in CssAltText. → Bug 1896047 part 6: Support the CSS attr() function in CssAltContent.

I feel nervous introducing this stuff without proper change notification and cache updates, as uncommon as this type of content is. How hard would it be to do that in a followup?

That's fair. I'm mostly just trying to get us over the Interop hump without investing a lot of time in rare edge cases, but I agree it's not ideal to not handle changes correctly. Some cases probably already work, but handling the others could be a bit tricky. I'll put some time into at least writing tests for the cases that do work and scoping out the effort for a follow-up.

I ended up just updating all the patches to support changes.

Pushed by
part 1: Enclose TreeWalker implementation in a namespace block. r=eeejay
part 2: Introduce CssAltContent class to query alternative text specified in the CSS content property. r=eeejay
part 3: Use CSS alt text as the name for an Accessible if all else fails. r=eeejay
part 4: Create an ImageAccessible for a pseudo-element image if there is CSS alt text. r=eeejay
part 5: Support CSS alt text for text content. r=eeejay
part 6: Support the CSS attr() function in CssAltContent. r=eeejay
Regressions: 1897349
Regressions: 1897430
Regressions: 1897440
Blocks: 1899723
You need to log in before you can comment on or make changes to this bug.