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

Test: HTML label with CSS generated content

Current support: partial (8/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

Expectations are conditions that must be met for the feature to be considered as "supported". Only "MUST" expectations need to be met for minimal "support". "SHOULD" and "MAY" expectations indicates support that goes above and beyond. Note that there is not an explicit standard that dictates these expectations, and as such, they are likely opinionated. As such, a feature might not meet all "MUST" expectations but still be usable (potentially frustratingly so). Additionally, the assistive technology may provide many different commands to read, navigate, or otherwise interact with a feature. Only one command is required to pass for the expectation to be minimally supported.

Summary of support by expectation type

MUSTSHOULDMAY
partial (8/10)

Summary of support by expectation and assistive technology

ExpectationDragon Naturally SpeakingJAWSNarratorNVDATalkBackVoiceOver for iOSVoiceOver for macOS
generated content
MUST CSS generated content MUST be included as part of the accessible namenonepartial (2/3)supportedsupportedsupportedsupportedsupported

* means that some support is hidden behind settings

Detailed support results by expectation

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

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 Chromenone
  • Result: (fail)
    • command: "Click <text>" (Activate actionable item)
    • Output: (input was not focused)
More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "This is generated content"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • Output: "This is generated content, edit, type in text"
More information
JAWSInternet Explorernone
  • Result: (fail)
    • command: Down arrow (Read next item)
    • Output: "is generated"
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: "is generated"
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • Output: "This is generated content, clickable"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • Output: "This is generated content, edit"
More information
NarratorMicrosoft Edgeyes
  • Result: (pass)
    • command: Down arrow (Read next item (scan mode))
    • Output: "This is generated content, edit"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • Output: "This is generated content, edit"
More information
NVDAGoogle Chromeyes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: "This is generated content, edit"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • Output: "This is generated content, edit, blank"
More information
NVDAFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • Output: "This is generated content, clickable"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • Output: "This is generated content, edit, blank"
More information
TalkBackGoogle Chrome (android)yes
  • Result: (pass)
    • command: Swipe right (Read next item)
    • Output: "This is generated content, edit"
More information
VoiceOver for iOSSafari (iOS)yes
  • Result: (pass)
    • command: Swipe Right (Next item)
    • Output: "This is generated content, text field"
More information
VoiceOver for macOSSafari (macOS)yes
  • Result: (pass)
    • command: VO + Right arrow (Read next item)
    • Output: "This is generated content, edit text"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • Output: "This is generated content, edit text"
More information

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

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally Speaking 15.30Internet Explorer 11.134none
  • Result: (fail)
    • command: "Click <text>" (Activate actionable item)
    • Output: (input was not focused)
More information
Dragon Naturally Speaking 15.30Firefox (desktop) 63.0.1none
  • Result: (fail)
    • command: "Click <text>" (Activate actionable item)
    • Output: (input was not focused)
More information
JAWS 2019.1906.10Microsoft Edge 44none
  • Result: (fail)
    • command: Down arrow (Read next item)
    • Output: "This is generated content"
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • Output: "This is generated content, edit"
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
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
Back to top

Dates and Versions

ATAT VersionBrowserBrowser versionOS versionDate tested
Dragon Naturally Speaking15.30Google Chrome70.018092018-11-15
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)6019032019-07-10
TalkBack6.2Google Chrome (android)678.12018-07-21
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

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