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

Test: HTML label with CSS generated content

Screen Reader support level: partial (9/10)

Voice Control support level: partial (1/5)

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
<!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>
    <p>Before target</p>
    <label for="target" id="label">is generated</label>
    <input type="text" id="target" />
    <p>After target</p>
</body>
</html>

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
Dragon Naturally Speaking15.30Chrome70.018092018-11-15
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.1Firefox6019032019-07-10
Orca3.31.4Firefox69Ubuntu 19.042019-09-14
TalkBack6.2Chrome678.12018-07-21
Voice Access (Android)3.1Chrome7772019-10-02
Voice Control (iOS)13.0Safari13.013.02019-09-23
Voice Control (MacOS)10.15Safari13.0.210.152019-10-07
VoiceOver (iOS)12.3.1Safari12.3.112.3.12019-07-10
VoiceOver (macOS)10.14.5Safari12.1.110.13.52019-07-10
Windows Speech Recognition1903Chrome7719032019-10-18

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 namenoneunknownpartialsupportednone

* 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 SpeakingChromenone
  • Result: (fail)
    • command: "Click <text>" (Activate item by name)
    • Output: (input was not focused)
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"
  • Result: (pass)
    • command: Tab (Read next focusable 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, edit, type in text"
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"
  • Result: (fail)
    • command: Tab (Read next focusable 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, clickable"
  • Result: (pass)
    • command: Tab (Read next focusable 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, edit"
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, edit"
  • Result: (pass)
    • command: Tab (Read next focusable 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, edit"
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, edit"
  • Result: (pass)
    • command: Tab (Read next focusable 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, edit, blank"
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, clickable"
  • Result: (pass)
    • command: Tab (Read next focusable 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, edit, blank"
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, entry"
  • Result: (pass)
    • command: Tab (Read next focusable 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, entry, focus mode"
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, edit"
More information
Voice Access (Android)Chromeunknown
  • Result: (unknown)
    • command: "Tap <text>" or just "<text>" (Activate item by name)
    • Output: button was not activated
    • Command Notes: said "tap this is generated content". VA does not support HTML form labels, so it is not known if this result is due to lack of CSS generated content support or lack of HTML form label support.
More information
Voice Control (iOS)Safaripartial
  • Result: (partial)
    • command: "Tap <text>" (Activate item by name)
    • Output: 3 names were created, "this", "is generated", and "content".
    • Command Notes: said "show names" and 3 names were displayed, while 1 is expected. said "tap this is generated content" and the command failed. said "tap content" and the command passed. said "tap is generated" and the command passed.
More information
Voice Control (MacOS)Safariyes
  • Result: (pass)
    • command: "Click <text>" (Activate item by name)
    • Output: input was focused
    • Command Notes: said "click this is generated content"
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, text field"
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, edit text"
  • Result: (pass)
    • command: Tab (Read next focusable 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, edit text"
More information
Windows Speech RecognitionChromenone
  • Result: (fail)
    • command: "Click <text>" (Activate item by name)
    • Output: role was not activated
    • Command Notes: said "click 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 Speaking 15.30IE 11.134none
  • Result: (fail)
    • command: "Click <text>" (Activate item by name)
    • Output: (input was not focused)
More information
Dragon Naturally Speaking 15.30Firefox 63.0.1none
  • Result: (fail)
    • command: "Click <text>" (Activate item by name)
    • Output: (input was not focused)
More information
JAWS 2019.1906.10Edge 44none
  • 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: "This is generated content"
  • Result: (fail)
    • command: Tab (Read next focusable 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, edit"
More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxunknown-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromeunknown-More information
Voice Control (MacOS)Firefoxunknown-More information
Windows Speech Recognition 1903Edge 44yes
  • Result: (pass)
    • command: "Click <text>" (Activate item by name)
    • Output: role was activated
    • Command Notes: said "click this is generated content"
More information
Back to top

History

  • 2018-07-06 Sample data has been added. This data has not been verified.
  • 2018-11-15 dragon_win/firefox support updated
  • 2018-11-15 dragon_win/chrome support updated
  • 2018-11-15 dragon_win/ie 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
  • 2019-09-14 Orca results added
  • 2019-09-23 Added vc_ios results
  • 2019-10-02 Add va_and results
  • 2019-10-07 Add vc_macos results
  • 2019-10-18 Add wsr results