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

Test: CSS Generated Content with HTML span element

Screen Reader support level: partial (9/10)

Voice Control support level: unknown

This test uses ::before and ::after pseudo classes to add content to static text

Run this test and and submit your results

On this page

Test HTML

open the test page
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Generated Content with HTML span element</title>
    <style>
        #target::before {
            content: 'This '
        }

        #target::after {
            content: ' content.'
        }
    </style>
</head>
<body>
    <p>Before target</p>
    <span id="target">is generated</span>
    <p>After target</p>
</body>
</html>

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
JAWS2019.1906.10Google Chrome7519032019-07-10
JAWS2019.1906.10Internet Explorer1119032019-07-10
JAWS2019.1606.10Firefox (desktop)6719032019-07-10
Narrator1903Microsoft Edge4419032019-07-10
NVDA2019.1.1Google Chrome7519032019-07-10
NVDA2019.1.1Firefox (desktop)6719032018-07-21
Orca3.31.4Firefox (desktop)69Ubuntu 19.042019-09-14
TalkBack7.3.0Google Chrome (android)7672019-09-14
VoiceOver for iOS12.3.1Safari (iOS)12.3.112.3.12019-07-10
VoiceOver for macOS10.14.5Safari (macOS)12.1.110.13.52019-07-10

Summary of Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver for iOSVoiceOver for macOS
generated content
MUST CSS generated content MUST be included as part of the accessible namepartial (2/3)supportedsupportedsupportedsupportedsupportedsupported

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

ExpectationDragon Naturally SpeakingVoice Access for AndroidVoice Control for iOSVoice Control for MacOS
generated content
MUST CSS generated content MUST be included as part of the accessible nameunknownunknownunknownunknown

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the generated content: 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

Grading method: Just one of the listed commands must pass for the expectation to pass.

This expectation is from the generated content feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromeunknown-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: This is generated content.
More information
JAWSInternet Explorernone
  • Result: (fail)
    • command: Down arrow (Read next item)
    • Output: is generated
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: This is generated content.
More information
NarratorMicrosoft Edgeyes
  • Result: (pass)
    • command: Down arrow (Read next item (scan mode))
    • Output: This is generated content.
More information
NVDAGoogle Chromeyes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: This is generated content.
More information
NVDAFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: This is generated content.
More information
OrcaFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: This is generated content.
More information
TalkBackGoogle Chrome (android)yes
  • Result: (pass)
    • command: Swipe right (Read next item)
    • Output: this is generated content.
More information
Voice Access for AndroidGoogle Chrome (android)unknown-More information
Voice Control for iOSSafari (iOS)unknown-More information
Voice Control for MacOSSafari (macOS)unknown-More information
VoiceOver for iOSSafari (iOS)yes
  • Result: (pass)
    • command: Swipe Right (Next item)
    • Output: this. is generated. content.
  • Result: (pass)
    • command: two-finger + swipe down (Start reading from current position)
    • Output: this is generated content
Notes: When using the next/previous line command, you have to swipe left/right three times to hear the entire sentence. The first swipe right reads the before generated content 'this', the next swipe right reads the html contents 'is generated', and the final swipe right reads the after generated content 'content'.
More information
VoiceOver for macOSSafari (macOS)yes
  • Result: (pass)
    • command: VO + Right arrow (Read next item)
    • Output: This is generated content.
  • Result: (pass)
    • command: VO + A (start reading from current position)
    • Output: This is generated content.
More information

Extended Support for: generated content: CSS generated content MUST be included as part of the accessible name

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorerunknown-More information
Dragon Naturally SpeakingFirefox (desktop)unknown-More information
JAWS 2019.1906.10Microsoft Edge 44yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: This is generated content.
More information
NarratorFirefox (desktop)unknown-More information
NarratorGoogle Chromeunknown-More information
NarratorInternet Explorerunknown-More information
NVDAInternet Explorerunknown-More information
NVDAMicrosoft Edgeunknown-More information
TalkBackFirefox (Android)unknown-More information
Voice Access for AndroidFirefox (Android)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Voice Control for MacOSGoogle Chromeunknown-More information
Voice Control for MacOSFirefox (desktop)unknown-More information
Back to top

History

  • 2018-07-06 Sample data has been added. This data has not been verified.
  • 2018-08-12 vo_ios/ios_saf support updated
  • 2018-08-19 vo_macos/safari support updated
  • 2018-12-17 narrator/edge support updated
  • 2019-03-21 jaws/ie updated with latest versions
  • 2019-09-14 Add orca and talkback results