Test page: alt text for CSS generated content

Start a screen reader and navigate through the examples in the table to see how the CSS content is announced (or not!)
Open the browser DevTools and check whether the pseudo-content is exposed in the accessibility tree, and how.

Type of pseudo-content inserted	Without alt text (default)	With non-empty alt text	With empty alt text
Unicode character (Meaningful)
Image (Decorative)
Unicode character (Meaningful)	CSS Generated Content Module Level 3	CSS Generated Content Module Level 3	CSS Generated Content Module Level 3
Emoji (Decorative)	Get Support	Get Support	Get Support
Image (Broken reference) Alt text for the image is "LinkedIn"	Connect with us	Connect with us	Connect with us

For comparison: HTML image alt text treatment

Use a screen reader to check how an HTML image is announced when it has non-empty and empty alt text. The second row shows how the image is rendered in your browser when the image is broken.

	With non-empty alt text	With empty alt text
HTML image
HTML image with broken reference