CSS Accessibility HTML Accessibility

Super short note on CSS text (again)

on a t-shirt: text - 2.4.7 Focus Visible, pic of doctor S smiling coquettishly. text - SHOW THYSELF DEMON,pic of doctor S smiling coquettishly with a halo of many colours.

Why does CSS text get announced by screen readers?

Because it’s included as text in the accessibility tree in modern browsers.

aViewer object inspection tool displaying the iAccessible2 properties for the CSS text: name=Neon Meat Dream of an Octofish, role=text

See the Pen
CSS text example
by steve faulkner (@stevef)
on CodePen.

Accessibility Tree

Tree of accessible objects that represents the structure of the user interface (UI). Each node in the accessibility tree represents an element in the UI as exposed through the accessibility API; for example, a push button, a check box, or container.


Why is [insert some symbol or punctuation mark here] not announced in CSS generated text?

It’s not because it’s CSS text, it’s because each screen reader has preferences for announcing symbols and punctuation, which may preclude the content being announced in the context being used.

See the Pen
CSS text example ?
by steve faulkner (@stevef)
on CodePen.

For example, NVDA announces question marks at the end of a sentence, but otherwise ignores them.

NVDA symbol pronunciation dialog.

Further reading

Leave a Reply

Your email address will not be published. Required fields are marked *