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

Test: HTML label with CSS generated content

Current support: partial (6/10)

This test uses ::before and ::after pseudo classes to add content to a label

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>HTML label element with css content</title>
    <style>
        #label::before {
            content: 'This '
        }

        #label::after {
            content: ' content.'
        }
    </style>
</head>
<body>
    <label for="target" id="label">is generated</label>
    <input type="text" id="target" />
</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 (6/10)nana

Assertion support summary by assertion

FeatureAssertionSupportHas failing tests
generated contentCSS generated content MUST be included as part of the accessible namepartial (6/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 Speaking 15.30Internet Explorer 11.134none
  • Result: (fail)
    • command: "Click <text>"
    • Output: (input was not focused)
Notes: It worked if I said "click generated", which means that the CSS generated content is not taken into account.
More information
JAWSGoogle Chromeunknown-More information
JAWS 2019.1903Internet Explorer 11none
  • Result: (fail)
    • command: Down arrow
    • Output: "is generated"
  • Result: (fail)
    • command: Tab
    • Output: "is generated"
More information
JAWS 2019Firefox (desktop) 65.0.1yes
  • Result: (pass)
    • command: Down arrow
    • Output: "This is generated content, clickable"
  • Result: (pass)
    • command: Tab
    • Output: "This is generated content, edit"
Notes: all content from the label (whether generated or not) becomes part of the input's accessible name and is announced by JAWS 2019 with Firefox 65.0.1 in both browse and forms mode.
More information
Narrator 10Microsoft Edge 17yes-More information
NVDAGoogle Chromeunknown-More information
NVDA 2018.1.1Firefox (desktop) 60yes-More information
TalkBack 6.2Google Chrome (android) 67yes-More information
VoiceOver for iOS 11.4Safari (iOS) 11.4yes-More information
VoiceOver for macOS 10.13.5Safari (macOS) 11.1.1yes-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 Speaking 15.30Firefox (desktop) 63.0.1none
  • Result: (fail)
    • command: "Click <text>"
    • Output: (input was not focused)
More information
Dragon Naturally Speaking 15.30Google Chrome 70.0none
  • Result: (fail)
    • command: "Click <text>"
    • Output: (input was not focused)
More information
JAWS 18Microsoft Edge 17yes-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-11-15 dragon_win/ie support updated
  • 2018-11-15 dragon_win/firefox support updated
  • 2018-11-15 dragon_win/chrome support updated
  • 2018-12-17 Removed the passing 'next focusable item' commands because we are testing CSS generated content, not the HTML input element.
  • 2019-02-24 jaws/firefox support updated
  • 2019-03-21 jaws/ie updated with latest versions