Bugzilla

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("https://via.placeholder.com/10x10.png") / "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('https://via.placeholder.com/10x10.png') / 'before';">replaced`

This one is a bit trickier. 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.

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("https://via.placeholder.com/10x10.png") / "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('https://via.placeholder.com/10x10.png') / '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.