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

Test: aria-describedby attribute on a text input

Screen Reader support level: partial (8/10)

Voice Control support level: not applicable (or no 'MUST' expectations)

On this page

About this test

This test ensures that the accessible description is computed correctly when aria-describedby on a text input.

Run this test and and submit your results

Age of results

Results in this test range from 8 months ago to 2 years ago. See detailed information about test dates and versions for more information.

Caution

Failing or partial results may be out of date. The oldest result is from 2 years ago. Consider running this test and contributing results.

Test HTML

open the test page
<!DOCTYPE html>
<html lang="en">
<head>
<title>ARIA describedby</title>
</head>
<body>

<h1>ARIA describedby test</h1>

<label for="target">Example label</label>
<input id="target" aria-describedby="error" type="text">
<div id="error">
error
</div>

</body>
</html>

Summary of Screen Reader support by expectation

aria-describedby attribute
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
MUST convey the value if valid applied to: input[type="text"] elementsupportedsupportedsupportednonesupportedsupportedpartialsupportedsupportedsupported

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

aria-describedby attribute
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
Not applicable

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the aria-describedby attribute: convey the value if valid - applied to the input[type="text"] element

This expectation is applied to the input[type="text"] element. Expectations and results might differ when the the feature is applied to different roles.

This expectation is from the aria-describedby attribute feature.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-describedby]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Example label, edit, error"
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-describedby]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Example label, edit, error"
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-describedby]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Example label, edit, error"
NarratorEdgenone
  • Result: (fail)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-describedby]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Example label, editing"
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-describedby]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Example label edit, error, blank"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-describedby]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Example label edit has auto complete, error, blank"
OrcaFirefoxpartial
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `*[ara-describedby]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "example label, entry"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-describedby]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "example label, entry, error, focus mode"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (Read next item) to navigate forward to `*[ara-describedby]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Edit box, example label, error"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `*[ara-describedby]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Example label, edit text, error"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `*[ara-describedby]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Example label, edit text, error"
Windows Speech RecognitionChromenot applicable-

Extended Support for: aria-describedby attribute: convey the value if valid

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2018.1811.2Edge 44none
  • Result: (fail)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `*[ara-describedby]`
      1. Launch JAWS and Edge.
      2. Navigate to the test page.
      3. Identify all elements that match this selector:*[ara-describedby]
        • If multiple elements match the target, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Example label, edit"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
JAWS2018.1811.2Chrome7218092019-03-08
JAWS2018.1811.2IE1118092019-03-08
JAWS2018.1811.2Firefox6018092019-03-08
Narrator1809Edge44.1776318092019-03-08
NVDA2019.2.1Chrome8019092020-02-14
NVDA2019.2.1Firefox7219092020-02-14
Orca3.31.4Firefox69Ubuntu 19.042019-09-16
TalkBack7.3.0Chrome757.02019-07-27
VoiceOver (iOS)12.1.4Safari12.1.412.1.42019-03-08
VoiceOver (macOS)10.14.3Safari12.0.310.14.32019-03-08

History

  • 2019-02-08 Test created
  • 2019-07-27 Talkback results added
  • 2019-09-16 Add orca results
  • 2020-02-15 retest NVDA with crome and firefox