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

Test: aria-errormessage attribute with aria-invalid="true"

Screen Reader support level: partial (12/20)

Voice Control support level: not applicable

Tests the aria-errormessage attribute with aria-invalid="true". The error message must be conveyed.

Run this test and and submit your results

On this page

Test HTML

open the test page
<!DOCTYPE html>
<html lang="en">
<head>
    <title>aria-errormessage examples</title>
</head>
<body>
<h1>aria-errormessage Examples</h1>

<!-- Initial valid state -->
<label for="invalid-false">Input with aria-invalid="false"</label>
<input id="invalid-false" type="text" aria-errormessage="invalid-false-msg" value="" aria-invalid="false">
<div id="invalid-false-msg" style="visibility:hidden">example error text</div>

<!-- User has input an invalid value -->
<label for="invalid-true">Input with aria-invalid="true"</label>
<input id="invalid-true" type="text" aria-errormessage="invalid-true-msg" aria-invalid="true" value="" >
<div id="invalid-true-msg">example error text</div>

<h2>Reference input with aria-invalid="true" but no aria-errormessage</h2>
<p>It may not always be clear if aria-invalid="true" is being conveyed" or if aria-errormessage is being conveyed, or both. So the following is used as a reference.</p>
<label for="reference-input">Reference input</label>
<input id="reference-input" type="text" aria-invalid="true" value="">

</body>
</html>

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
JAWS2019.1907.42Google Chrome7619032019-09-02
JAWS2019.1907.42Internet Explorer1119032019-09-02
JAWS2019.1907.42Firefox (desktop)6619032019-09-02
Narrator1903Microsoft Edge44.1776319032019-09-02
NVDA2019.0.1Google Chrome7619032019-09-02
NVDA2019.0.1Firefox (desktop)6819032019-04-02
Orca3.31.4Firefox (desktop)69Ubuntu 19.042019-09-16
TalkBack7.3.0Google Chrome (android)7672019-09-02
VoiceOver for iOS12.4.1Safari (iOS)12.4.112.4.12019-09-02
VoiceOver for macOS10.14.6Safari (macOS)12.1.210.14.62019-09-02

Summary of Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver for iOSVoiceOver for macOS
aria-errormessage attribute
MUST convey that the referenced error message is pertinentsupportednonenonesupportednonenonenone
MUST NOT convey the error when the error message is NOT pertinentpartial (2/3)supportedsupported with 1 unknown resultsupportedsupportedsupportedsupported

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

ExpectationDragon Naturally SpeakingVoice Access for AndroidVoice Control for iOSVoice Control for MacOS
Not applicable

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the aria-errormessage attribute: convey that the referenced error message is pertinent

Rationale: Users need to know that the error message exists when the input is in an aria-invalid="true" state

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples of assistive technologies support this expectation:

  • screen readers might convey the accessible name of the referenced ID
  • screen readers might announce that an error message is present and provide a shortcut to jump to the error message

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

This expectation is from the aria-errormessage attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "blank, edit, Input with aria-invalid="true", invalid entry, has error, example error text, type in text"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", edit, invalid entry, has error, example error text, type in text"
More information
JAWSInternet Exploreryes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "blank, edit, Input with aria-invalid="true", invalid entry, has error, example error text, type in text"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", edit, invalid entry, has error, example error text, type in text"
More information
JAWSFirefox (desktop)yes
  • Result: (fail)
    • command: Down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "edit, invalid entry"
    • Notes: not conveyed when either the target or its label are read
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", edit, invalid entry, has error, example error text, type in text"
More information
NarratorMicrosoft Edgenone
  • Result: (fail)
    • command: Down arrow (Read next item (scan mode))
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", edit, invalid, scan off"
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", edit, invalid"
More information
NVDAGoogle Chromenone
  • Result: (fail)
    • command: down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", edit, invalid entry"
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", edit, invalid entry, blank"
More information
NVDAFirefox (desktop)none
  • Result: (fail)
    • command: down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", edit, invalid entry has auto complete"
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", edit, invalid entry has auto complete, blank"
More information
OrcaFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", entry, invalid entry, example error text"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", entry, invalid entry, example error texte"
More information
TalkBackGoogle Chrome (android)none
  • Result: (fail)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Edit box, error: Invalid entry, input with aria-invalid="true""
    • Notes: the text "error: invalid entry" conveys the aria-invalid state, note the aria-errormessage property.
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)none
  • Result: (fail)
    • command: Swipe Right (Next item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", text field, invalid data, double tap to edit"
More information
VoiceOver for macOSSafari (macOS)none
  • Result: (fail)
    • command: VO + Right arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", invalid data, edit text"
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="true", invalid data, edit text"
More information

Extended Support for: aria-errormessage attribute: convey that the referenced error message is pertinent

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWS 2019.1907.42Microsoft Edge 44unknown-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
Voice Access for AndroidFirefox (Android)not applicable-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not applicable-More information
Back to top

Expectation for the aria-errormessage attribute: convey the error when the error message is NOT pertinent

Rationale: Users should not be made aware of the error message when the input is not in an error state

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST NOT
  • Voice Control: NA

Examples of assistive technologies support this expectation:

  • when an input has an error message but also has aria-invalid="false", the error message will not be conveyed because it is not pertinent

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

This expectation is from the aria-errormessage attribute feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingGoogle Chromenot applicable-More information
JAWSGoogle Chromeyes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "blank, edit, Input with aria-invalid="false", edit, type in text"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", edit, type in text"
More information
JAWSInternet Explorernone
  • Result: (fail)
    • command: Down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "edit, Input with aria-invalid="false", edit, has error, example error text, type in text"
  • Result: (fail)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", edit, has error, example error text, type in text"
More information
JAWSFirefox (desktop)yes
  • Result: (pass)
    • command: Down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "blank, edit"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", edit"
More information
NarratorMicrosoft Edgeyes
  • Result: (pass)
    • command: Down arrow (Read next item (scan mode))
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", edit, scan off"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", edit"
More information
NVDAGoogle Chromeunknown-More information
NVDAFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", entry"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", entry"
More information
OrcaFirefox (desktop)yes
  • Result: (pass)
    • command: down arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", entry"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", entry"
More information
TalkBackGoogle Chrome (android)yes
  • Result: (pass)
    • command: Swipe right (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Edit box, input with aria-invalid="false""
More information
Voice Access for AndroidGoogle Chrome (android)not applicable-More information
Voice Control for iOSSafari (iOS)not applicable-More information
Voice Control for MacOSSafari (macOS)not applicable-More information
VoiceOver for iOSSafari (iOS)yes
  • Result: (pass)
    • command: Swipe Right (Next item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", text field, double tap to edit"
More information
VoiceOver for macOSSafari (macOS)yes
  • Result: (pass)
    • command: VO + Right arrow (Read next item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", edit text"
  • Result: (pass)
    • command: Tab (Read next focusable item)
    • location before command: before target
    • location after command: target
    • Output: "Input with aria-invalid="false", edit text"
More information

Extended Support for: aria-errormessage attribute: convey the error when the error message is NOT pertinent

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingInternet Explorernot applicable-More information
Dragon Naturally SpeakingFirefox (desktop)not applicable-More information
JAWS 2019.1907.42Microsoft Edge 44unknown-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
Voice Access for AndroidFirefox (Android)not applicable-More information
VoiceOver for iOSGoogle Chrome (ios)unknown-More information
VoiceOver for macOSGoogle Chromeunknown-More information
VoiceOver for macOSFirefox (desktop)unknown-More information
OrcaGoogle Chromeunknown-More information
Voice Control for MacOSGoogle Chromenot applicable-More information
Voice Control for MacOSFirefox (desktop)not applicable-More information
Back to top

History

  • 2019-04-09 Test created
  • 2019-08-02 Updated results
  • 2019-09-16 Add orca results