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

Test: CSS Generated Content with HTML span element

Current support: partial (5/10)

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 in a new tab
<!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>
    <span id="target">is generated</span>
</body>
</html>

Support tables

Assertions are conditions that must be met for the feature to be considered as "supported". Only "MUST" assertions need to be met for minimal "support". "SHOULD" and "MAY" assertions indicates support that goes above and beyond. Note that there is not an explicit standard that dictates these assertions, and as such, they are likely opinionated. Minimal support reflects that the structure, relationships, and functionality of the feature are conveyed and operable by assistive technology rather than minimal conformance to any specific WCAG SC. As such, a feature might not meet all "MUST" assertions but still be usable (potentially frustratingly so).

Assertion support summary by type of assertion
MUSTSHOULDMAY
partial (5/10)nana

Assertion support summary by assertion

FeatureAssertionSupportHas failing tests
generated contentCSS generated content MUST be included as part of the accessible namepartial (5/10)Yes

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

This assertion is from the generated content feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorerunknown-More information
JAWSGoogle Chromeunknown-More information
JAWS 2019.1903Internet Explorer 11none
  • Result: (fail)
    • command: Down arrow
    • Output: is generated
More information
JAWS 18Firefox (desktop) 60yes
  • Result: (pass)
    • command: Down arrow
    • Output: This is generated content.
More information
Narrator 1809Microsoft Edge 44yes
  • Result: (pass)
    • command: Down arrow
    • Output: This is generated content.
More information
NVDAGoogle Chromeunknown-More information
NVDA 2018.1.1Firefox (desktop) 60yes
  • Result: (pass)
    • command: down arrow
    • Output: This is generated content.
More information
TalkBackGoogle Chrome (android)unknown-More information
VoiceOver for iOS 11.4.1Safari (iOS) 11.4.1yes
  • Result: (pass)
    • command: Swipe Right
    • Output: this. is generated. content.
  • Result: (pass)
    • command: two-finger + swipe down
    • 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 macOS 10.13.6Safari (macOS) 11.1.2yes
  • Result: (pass)
    • command: VO + Right arrow
    • Output: This is generated content.
  • Result: (pass)
    • command: VO + A
    • 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 SpeakingFirefox (desktop)unknown-More information
Dragon Naturally SpeakingGoogle Chromeunknown-More information
JAWS 18Microsoft Edge 17yes
  • Result: (pass)
    • command: Down arrow
    • 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 (desktop)unknown-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information

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