Notice: This is a work in progress. Please submit feedback or suggestions.

generated content (css)

Screen reader support level: partial (18/20)

Voice Control support level: partial (1/5)

On this page

CSS Generated Content is content that is added to the DOM via CSS such as ::before and ::after content.

Avoid using CSS generated content for meaningful textual additions.

Expectations

What are expectations?

Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
MUST CSS generated content MUST be included as part of the accessible namepartial (4/6)supportedsupportedsupportedsupportedsupportedsupported

Voice Control support by expectation

ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
MUST CSS generated content MUST be included as part of the accessible namenoneunknownpartialsupportednone

Expectation: CSS generated content MUST be included as part of the accessible name

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST
Screen Reader support for 'MUST CSS generated content MUST be included as part of the accessible name'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
CSS Generated Content with HTML span elementsupportednonesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
HTML label with CSS generated contentsupportednonesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
Voice Control support for 'MUST CSS generated content MUST be included as part of the accessible name'
TestDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
CSS Generated Content with HTML span elementnoneunknownpartialsupportednone
HTML label with CSS generated contentnoneunknownpartialsupportednone