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: not applicable

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.10Chrome7519032019-07-10
JAWS2019.1906.10IE1119032019-07-10
JAWS2019.1606.10Firefox6719032019-07-10
Narrator1903Edge4419032019-07-10
NVDA2019.1.1Chrome7519032019-07-10
NVDA2019.1.1Firefox6719032018-07-21
Orca3.31.4Firefox69Ubuntu 19.042019-09-14
TalkBack7.3.0Chrome7672019-09-14
VoiceOver (iOS)12.3.1Safari12.3.112.3.12019-07-10
VoiceOver (macOS)10.14.5Safari12.1.110.13.52019-07-10

Summary of Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (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 (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
generated content
MUST CSS generated content MUST be included as part of the accessible namenot applicablenot applicablenot applicablenot applicablenot applicable

* 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 SpeakingChromenot applicable-More information
JAWSChromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: This is generated content.
More information
JAWSIEnone
  • Result: (fail)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: is generated
More information
JAWSFirefoxyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: This is generated content.
More information
NarratorEdgeyes
  • Result: (pass)
    • command: Down arrow (Read next item (scan mode))
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: This is generated content.
More information
NVDAChromeyes
  • Result: (pass)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: This is generated content.
More information
NVDAFirefoxyes
  • Result: (pass)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: This is generated content.
More information
OrcaFirefoxyes
  • Result: (pass)
    • command: down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: This is generated content.
More information
TalkBackChromeyes
  • Result: (pass)
    • command: Swipe right (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: this is generated content.
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • command: Swipe Right (Next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: this. is generated. content.
  • Result: (pass)
    • command: two-finger + swipe down (Start reading from current position)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • 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 (macOS)Safariyes
  • Result: (pass)
    • command: VO + Right arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: This is generated content.
  • Result: (pass)
    • command: VO + A (start reading from current position)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: This is generated content.
More information
Windows Speech RecognitionChromenot applicable-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 SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWS 2019.1906.10Edge 44yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: before target
      • virtual cursor location: before target
    • location after command: target
    • Output: This is generated content.
More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot applicable-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