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

Test: Basic html color input test

Screen Reader support level: partial (21/49)

Voice Control support level: partial (6/14)

A basic html color input test.

Run this test and and submit your results

On this page

Test HTML

open the test page

HTML source is too long to display here.

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
Dragon Naturally Speaking15.30Chrome7719032019-10-29
JAWS2020.1912.11Chrome7919092020-01-27
JAWS2020.1912.11IE1119092020-01-27
JAWS2020.1912.11Firefox72.0.119092020-01-27
Narrator1903Edge4419032019-10-29
NVDA2019.2.1Chrome7719032019-10-29
NVDA2019.2.1Firefox6919032019-10-29
Orca3.31.4Firefox69Ubuntu 19.042019-10-29
TalkBack7.3.0Chrome777.02019-10-29
Voice Access (Android)3.1Chrome777.02019-10-29
Voice Control (iOS)13.2Safari13.213.22019-10-29
Voice Control (MacOS)10.15Safari13.0.210.152019-10-29
VoiceOver (iOS)13.2Safari13.213.22019-10-29
VoiceOver (macOS)10.15Safari13.0.210.152019-10-29
Windows Speech Recognition1903Chrome7719032019-10-29

Summary of Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
input[type="color"] element
MUST convey an appropriate namepartial (2/3)supportedsupportedsupportednonesupportedpartial
MUST convey an appropriate rolepartial (2/3)supportedpartial (1/2)supportedsupportedsupportedpartial
MUST convey the current valuepartial (1/3)supportednonenonepartialsupportedpartial
MUST convey changes in valuepartial (1/3)partialnonenonesupportedsupportednone
SHOULD provide shortcuts to jump to this rolepartial (2/3)supportedpartial (1/2)supportedsupportedsupportedsupported
MUST support the color picker widgetsome partial supportpartialpartialpartialpartialsupportedpartial

* 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
input[type="color"] element
MUST convey an appropriate namenonenonesupportednonesupported
MUST convey an appropriate rolenonesupportednot applicablenonesupported
MUST support the color picker widgetnonesupportedsupportednonenone

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the input[type="color"] element: convey an appropriate name

Rationale: A screen reader user needs to know what to enter.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples of assistive technologies support this expectation:

  • A screen reader will announce the name (label).
  • Voice control software will let the user say something like "click <name>" to activate the control.

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

This expectation is from the input[type="color"] element feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenone
  • Result: (fail)
    • command: "Click <text>" (Activate item by name)
    • Output: button was not clicked
    • Command Notes: said "click your favorite color"
More information
JAWSChromenone
  • 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: "your favorite color?"
    • Command Notes: button was not conveyed at all
  • 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: previous input was announced, not the color picker button
  • Result: (na)
    • command: f (Next form field)
    • 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: control not found
  • Result: (na)
    • command: b (Next button)
    • 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: control not found
  • Result: (na)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: not in list of form controls
More information
JAWSIEyes
  • 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: "edit, number e66465, your favorite color, edit, number e66465, type in 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: "Your favorite color?, edit, number e66465, type in text"
  • Result: (pass)
    • command: f (Next form field)
    • 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: "Your favorite color?, edit, number e66465"
  • Result: (pass)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form fields as "Your favorite color? edit, #e66465"
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: "your favorite color, button"
  • 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: "your favorite color, button, to activate press space bar"
  • Result: (pass)
    • command: f (Next form field)
    • 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: "your favorite color, button"
  • Result: (pass)
    • command: b (Next button)
    • 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: "your favorite color, button"
  • Result: (pass)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form controls as "your favorite color, button"
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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
  • 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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
  • Result: (pass)
    • command: f (Next form field)
    • 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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
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: "your favorite color? Your favorite color?"
  • 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: "your favorite color?"
  • Result: (pass)
    • command: f (Next form field)
    • 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: control not found
  • Result: (na)
    • command: b (Next button)
    • 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: control not found
  • Result: (na)
    • command: NVDA + F7 (Open Elements List)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: not in list of form controls
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: "clickable, your favorite color? button, Your favorite color?"
  • 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: "your favorite color? button"
  • Result: (pass)
    • command: f (Next form field)
    • 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: your favorite color, button
  • Result: (pass)
    • command: b (Next button)
    • 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: your favorite color, button
  • Result: (pass)
    • command: NVDA + F7 (Open Elements List)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form fields as "your favorite color, button"
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: "your favorite color, push button"
  • 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: "your favorite color, push button"
  • Result: (pass)
    • command: b (Next button)
    • 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: "your favorite color, push button"
More information
TalkBackChromenone
  • Result: (fail)
    • 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: "#e66465, color picker, double tap to change"
  • Result: (fail)
    • command: Swipe right (next control (correct item type must be selected))
    • 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: "#e66465, color picker, double tap to change"
More information
Voice Access (Android)Chromenone
  • Result: (fail)
    • command: "Tap <text>" or just "<text>" (Activate item by name)
    • Output: button was not tapped
    • Command Notes: said "tap your favorite color"
More information
Voice Control (iOS)Safariyes
  • Result: (pass)
    • command: "Tap <text>" (Activate item by name)
    • Output: input was tapped
    • Command Notes: said "tap your favorite color"
More information
Voice Control (MacOS)Safarinone
  • Result: (fail)
    • command: "Click <text>" (Activate item by name)
    • Output: button was not clicked
    • Command Notes: said "click your favorite color"
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: "your favorite color? red, color well"
  • Result: (pass)
    • command: Swipe down (next form control (correct item type must be selected))
    • 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: "your favorite color? red, color well"
More information
VoiceOver (macOS)Safaripartial
  • 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: "indian red 2, your favorite color? color well"
  • 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: input was not focused
  • Result: (pass)
    • command: VO + Command + J (Next Form Control)
    • 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: "indian red 2, your favorite color? color well"
  • Result: (pass)
    • command: VO + U (Open Rotor)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form controls as "indian red 2, your favorite color? color well"
More information
Windows Speech RecognitionChromeyes
  • Result: (pass)
    • command: "Click <text>" (Activate item by name)
    • Output: button was clicked
    • Command Notes: said "click your favorite color"
More information

Extended Support for: input[type="color"] element: convey an appropriate name

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingIEunknown-More information
Dragon Naturally SpeakingFirefoxunknown-More information
JAWSEdgeunknown-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 RecognitionEdgeunknown-More information
Back to top

Expectation for the input[type="color"] element: convey an appropriate role

Rationale: A screen reader user needs to know how they can interact with the element. Voice control software might use the role to help users activate controls that do not have a visible name.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples of assistive technologies support this expectation:

  • If implemented as a text field, the screen reader might be announce the role as "text input", "edit", "edit text", etc.
  • If implemented as a color picker, the screen reader might be announce the role as "button", "color chooser", "color well", etc.
  • Voice control software will let the user say something like "click text box" or "click button" or flag the role with a number.

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

This expectation is from the input[type="color"] element feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenone
  • Result: (fail)
    • command: Click <role> (Click Type)
    • Output: button was not clicked
    • Command Notes: said "click button" and "click edit"
More information
JAWSChromenone
  • 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: "your favorite color?"
    • Command Notes: button was not conveyed at all
  • 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: previous input was announced, not the color picker button
  • Result: (na)
    • command: f (Next form field)
    • 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: control not found
  • Result: (na)
    • command: b (Next button)
    • 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: control not found
  • Result: (na)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: not in list of form controls
More information
JAWSIEyes
  • 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: "edit, number e66465, your favorite color, edit, number e66465, type in 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: "Your favorite color?, edit, number e66465, type in text"
  • Result: (pass)
    • command: f (Next form field)
    • 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: "Your favorite color?, edit, number e66465"
  • Result: (pass)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form fields as "Your favorite color? edit, #e66465"
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: "your favorite color, button"
  • 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: "your favorite color, button, to activate press space bar"
  • Result: (pass)
    • command: f (Next form field)
    • 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: "your favorite color, button"
  • Result: (pass)
    • command: b (Next button)
    • 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: "your favorite color, button"
  • Result: (pass)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form controls as "your favorite color, button"
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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
  • 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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
  • Result: (pass)
    • command: f (Next form field)
    • 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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
More information
NVDAChromenone
  • 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: "your favorite color? Your favorite color?"
  • 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: "your favorite color?"
  • Result: (na)
    • command: f (Next form field)
    • 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: control not found
  • Result: (na)
    • command: b (Next button)
    • 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: control not found
  • Result: (na)
    • command: NVDA + F7 (Open Elements List)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: not in list of form controls
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: "clickable, your favorite color? button, Your favorite color?"
  • 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: "your favorite color? button"
  • Result: (pass)
    • command: f (Next form field)
    • 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: your favorite color, button
  • Result: (pass)
    • command: b (Next button)
    • 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: your favorite color, button
  • Result: (pass)
    • command: NVDA + F7 (Open Elements List)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form fields as "your favorite color, button"
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: "your favorite color, push button"
  • 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: "your favorite color, push button"
  • Result: (pass)
    • command: b (Next button)
    • 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: "your favorite color, push button"
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: "#e66465, color picker, double tap to change"
  • Result: (pass)
    • command: Swipe right (next control (correct item type must be selected))
    • 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: "#e66465, color picker, double tap to change"
More information
Voice Access (Android)Chromeyes
  • Result: (pass)
    • command: "Show numbers" (Turn on the numbers overlay)
    • Output: input was flagged with a number
More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinone
  • Result: (fail)
    • command: "Show numbers" (Turn on the numbers overlay)
    • Output: input was not flagged with a number
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: "your favorite color? red, color well"
  • Result: (pass)
    • command: Swipe down (next form control (correct item type must be selected))
    • 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: "your favorite color? red, color well"
More information
VoiceOver (macOS)Safaripartial
  • 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: "indian red 2, your favorite color? color well"
  • 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: input was not focused
  • Result: (pass)
    • command: VO + Command + J (Next Form Control)
    • 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: "indian red 2, your favorite color? color well"
  • Result: (pass)
    • command: VO + U (Open Rotor)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form controls as "indian red 2, your favorite color? color well"
More information
Windows Speech RecognitionChromeyes
  • Result: (pass)
    • command: "Show numbers" (Turn on the numbers overlay)
    • Output: input was flagged with a number
More information

Extended Support for: input[type="color"] element: convey an appropriate role

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingIEunknown-More information
Dragon Naturally SpeakingFirefoxunknown-More information
JAWSEdgeunknown-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 RecognitionEdgeunknown-More information
Back to top

Expectation for the input[type="color"] element: convey the current value

Rationale: A screen reader user needs to know the current value of the input.

Strength of these expectations 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.

This expectation is from the input[type="color"] element feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenot applicable-More information
JAWSChromenone
  • 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: "your favorite color?"
    • Command Notes: button was not conveyed at all
  • 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: previous input was announced, not the color picker button
  • Result: (na)
    • command: f (Next form field)
    • 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: control not found
  • Result: (na)
    • command: b (Next button)
    • 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: control not found
  • Result: (na)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: not in list of form controls
More information
JAWSIEyes
  • 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: "edit, number e66465, your favorite color, edit, number e66465, type in 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: "Your favorite color?, edit, number e66465, type in text"
  • Result: (pass)
    • command: f (Next form field)
    • 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: "Your favorite color?, edit, number e66465"
  • Result: (pass)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form fields as "Your favorite color? edit, #e66465"
More information
JAWSFirefoxnone
  • 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: "your favorite color, button"
  • 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: "your favorite color, button, to activate press space bar"
  • Result: (fail)
    • command: f (Next form field)
    • 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: "your favorite color, button"
  • Result: (fail)
    • command: b (Next button)
    • 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: "your favorite color, button"
  • Result: (fail)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form controls as "your favorite color, button"
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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
  • 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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
  • Result: (pass)
    • command: f (Next form field)
    • 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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
More information
NVDAChromenone
  • 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: "your favorite color? Your favorite color?"
  • 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: "your favorite color?"
  • Result: (na)
    • command: f (Next form field)
    • 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: control not found
  • Result: (na)
    • command: b (Next button)
    • 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: control not found
  • Result: (na)
    • command: NVDA + F7 (Open Elements List)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: not in list of form controls
More information
NVDAFirefoxnone
  • 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: "clickable, your favorite color? button, Your favorite color?"
  • 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: "your favorite color? button"
  • Result: (fail)
    • command: f (Next form field)
    • 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: your favorite color, button
  • Result: (fail)
    • command: b (Next button)
    • 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: your favorite color, button
  • Result: (fail)
    • command: NVDA + F7 (Open Elements List)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form fields as "your favorite color, button"
More information
OrcaFirefoxnone
  • 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: "your favorite color, push button"
  • 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: "your favorite color, push button"
  • Result: (fail)
    • command: b (Next button)
    • 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: "your favorite color, push button"
More information
TalkBackChromepartial
  • Result: (fail)
    • 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: "#e66465, color picker, double tap to change"
  • Result: (pass)
    • command: Swipe right (next control (correct item type must be selected))
    • 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: "#e66465, color picker, double tap to change"
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-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: "your favorite color? red, color well"
  • Result: (pass)
    • command: Swipe down (next form control (correct item type must be selected))
    • 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: "your favorite color? red, color well"
More information
VoiceOver (macOS)Safaripartial
  • 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: "indian red 2, your favorite color? color well"
  • 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: input was not focused
  • Result: (pass)
    • command: VO + Command + J (Next Form Control)
    • 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: "indian red 2, your favorite color? color well"
  • Result: (pass)
    • command: VO + U (Open Rotor)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form controls as "indian red 2, your favorite color? color well"
More information
Windows Speech RecognitionChromenot applicable-More information

Extended Support for: input[type="color"] element: convey the current value

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot applicable-More information
Back to top

Expectation for the input[type="color"] element: convey changes in value

Rationale: The user needs to know that the value was successfully changed.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples of assistive technologies support this expectation:

  • When the user enter text, the screen reader will announce it back to them.

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

This expectation is from the input[type="color"] element feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenot applicable-More information
JAWSChromenone
  • Result: (fail)
    • command: Enter or Space (Activate Button)
    • 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: focus was sent back to the previous control
More information
JAWSIEyes
  • Result: (pass)
    • command: <enter text> (enter text)
    • before the command was executed
      • mode: auto (mode not explicitly)
      • keyboard focus location: target
      • virtual cursor location: target
    • location after command: target
    • Output: character was announced.
More information
JAWSFirefoxnone
  • Result: (fail)
    • command: Enter or Space (Activate Button)
    • 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: input was announced without the new value
    • Result Notes: pressed enter on the okay button within the widget dialog after selecting a new color.
More information
NarratorEdgepartial
  • Result: (partial)
    • command: Enter or Space Bar (Activate Item (primary action))
    • 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: earcon was announced after clicking the accept button, but new value was not conveyed.
    • Result Notes: partial because the new color was conveyed via the 'output' in the color picker just before the accept button.
More information
NVDAChromenone
  • Result: (fail)
    • command: Enter or Space (Activate Button)
    • 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: title of the document was announced after clicking okay
    • Result Notes: pressed enter on the okay button within the widget dialog after selecting a new color.
More information
NVDAFirefoxnone
  • Result: (fail)
    • command: Enter or Space (Activate Button)
    • 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: title of the document was announced after clicking okay
    • Result Notes: pressed enter on the okay button within the widget dialog after selecting a new color.
More information
OrcaFirefoxnone
  • Result: (fail)
    • command: Enter or Space (Activate Button)
    • 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: input was announced without the new value
    • Result Notes: activated the button to set the value within the widget after selecting a new color.
More information
TalkBackChromeyes
  • Result: (pass)
    • command: double tap (Activate button)
    • 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: new value was announced
    • Result Notes: activated the button to set the value within the widget dialog after selecting a new color.
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • command: Double tap (Activate Button)
    • 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: input was announced with the new value
    • Result Notes: tapped the "done" button
More information
VoiceOver (macOS)Safarinone
  • Result: (fail)
    • command: Enter or Space (Activate Button)
    • 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: color picker was closed and re-opened, and focus was sent back to the top of the widget
    • Result Notes: pressed enter on a color button within the widget.
More information
Windows Speech RecognitionChromenot applicable-More information

Extended Support for: input[type="color"] element: convey changes in value

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot applicable-More information
Back to top

Expectation for the input[type="color"] element: provide shortcuts to jump to this role

Rationale: Screen reader users might want to quickly navigate to elements of this type.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

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

This expectation is from the input[type="color"] element feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenot applicable-More information
JAWSChromenone
  • Result: (fail)
    • command: f (Next form field)
    • 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: control not found
  • Result: (fail)
    • command: b (Next button)
    • 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: control not found
  • Result: (fail)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: not in list of form controls
More information
JAWSIEyes
  • Result: (pass)
    • command: f (Next form field)
    • 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: "Your favorite color?, edit, number e66465"
  • Result: (pass)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form fields as "Your favorite color? edit, #e66465"
More information
JAWSFirefoxyes
  • Result: (pass)
    • command: f (Next form field)
    • 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: "your favorite color, button"
  • Result: (pass)
    • command: b (Next button)
    • 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: "your favorite color, button"
  • Result: (pass)
    • command: Insert + F3 (Open element list)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form controls as "your favorite color, button"
More information
NarratorEdgeyes
  • Result: (pass)
    • command: f (Next form field)
    • 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: "your favorite color? color picker, 90% red 39% red, 39% blue, scan"
More information
NVDAChromenone
  • Result: (fail)
    • command: f (Next form field)
    • 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: control not found
  • Result: (fail)
    • command: b (Next button)
    • 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: control not found
  • Result: (fail)
    • command: NVDA + F7 (Open Elements List)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: not in list of form controls
More information
NVDAFirefoxyes
  • Result: (pass)
    • command: f (Next form field)
    • 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: your favorite color, button
  • Result: (pass)
    • command: b (Next button)
    • 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: your favorite color, button
  • Result: (pass)
    • command: NVDA + F7 (Open Elements List)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form fields as "your favorite color, button"
More information
OrcaFirefoxyes
  • Result: (pass)
    • command: b (Next button)
    • 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: "your favorite color, push button"
More information
TalkBackChromeyes
  • Result: (pass)
    • command: Swipe right (next control (correct item type must be selected))
    • 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: "#e66465, color picker, double tap to change"
More information
Voice Access (Android)Chromenot applicable-More information
Voice Control (iOS)Safarinot applicable-More information
Voice Control (MacOS)Safarinot applicable-More information
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • command: Swipe down (next form control (correct item type must be selected))
    • 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: "your favorite color? red, color well"
More information
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • command: VO + Command + J (Next Form Control)
    • 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: "indian red 2, your favorite color? color well"
  • Result: (pass)
    • command: VO + U (Open Rotor)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: in list of form controls as "indian red 2, your favorite color? color well"
More information
Windows Speech RecognitionChromenot applicable-More information

Extended Support for: input[type="color"] element: provide shortcuts to jump to this role

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxnot applicable-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEunknown-More information
NVDAIEunknown-More information
NVDAEdgeunknown-More information
TalkBackFirefoxunknown-More information
Voice Access (Android)Firefoxnot applicable-More information
VoiceOver (iOS)Chromeunknown-More information
VoiceOver (macOS)Chromeunknown-More information
VoiceOver (macOS)Firefoxunknown-More information
OrcaChromeunknown-More information
Voice Control (MacOS)Chromenot applicable-More information
Voice Control (MacOS)Firefoxnot applicable-More information
Windows Speech RecognitionEdgenot applicable-More information
Back to top

Expectation for the input[type="color"] element: support the color picker widget

Rationale: A screen reader user needs to be able to operate the color picker widget.

Strength of these expectations for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples of assistive technologies support this expectation:

  • If implemented as a text field, this is not applicable
  • If implemented as a color picker, the screen reader must convey appropriate semantics
  • Voice control software will let the user activate appropriate items

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

This expectation is from the input[type="color"] element feature.

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingChromenone
  • Result: (fail)
    • command: (multiple commands) (Multiple commands were used)
    • Output: unable to open
More information
JAWSChromenone
  • Result: (fail)
    • command: (multiple commands) (Multiple commands were used)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: Not possible to open the control
More information
JAWSIEnot applicable-More information
JAWSFirefoxpartial
  • Result: (partial)
    • command: (multiple commands) (Multiple commands were used)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: No keyboard commands worked until I used alt+tab to refocus the browser. It was possible to navigate around the dialog using the tab and arrow keys, but buttons to select colors were missing names. It was possible to navigate around the dialog using the tab and arrow keys, but buttons to select colors were missing names.
More information
NarratorEdgepartial
  • Result: (partial)
    • command: (multiple commands) (Multiple commands were used)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: most semantics were correctly conveyed, however the value of the sliders was never conveyed.
More information
NVDAChromepartial
  • Result: (partial)
    • command: (multiple commands) (Multiple commands were used)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: It was possible to navigate around the dialog using the tab and arrow keys, but buttons to select colors were missing names.
More information
NVDAFirefoxpartial
  • Result: (partial)
    • command: (multiple commands) (Multiple commands were used)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: No keyboard commands worked until I used alt+tab to refocus the browser. It was possible to navigate around the dialog using the tab and arrow keys, but buttons to select colors were missing names.
More information
OrcaFirefoxpartial
  • Result: (partial)
    • command: (multiple commands) (Multiple commands were used)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: It is possible to navigate and change the value of the color, however some information is not conveyed. For example, it is possible to change the value within the ring and triangle, but changes in value are not automatically announced.
More information
TalkBackChromepartial
  • Result: (partial)
    • command: (multiple commands) (Multiple commands were used)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: was able to open, navigate, and select a value.
    • Result Notes: some elements were missing appropriate semantics. For example, the color buttons were not conveyed as buttons and the slider controls were missing names.
More information
Voice Access (Android)Chromeyes
  • Result: (pass)
    • command: (multiple commands) (Multiple commands were used)
    • Output: was able to select and set a color using commands like "tap <name>" and "tap <number>"
More information
Voice Control (iOS)Safariyes
  • Result: (pass)
    • command: (multiple commands) (Multiple commands were used)
    • Output: was able to operate the widget and select a value using commands like "tap <number>" and "tap <name>"
More information
Voice Control (MacOS)Safarinone
  • Result: (fail)
    • command: (multiple commands) (Multiple commands were used)
    • Output: unable to open or operate the widget
More information
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • command: (multiple commands) (Multiple commands were used)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: was able to select and set a color. appropriate semantics were conveyed.
More information
VoiceOver (macOS)Safaripartial
  • Result: (partial)
    • command: (multiple commands) (Multiple commands were used)
    • before the command was executed
      • mode: auto (mode not explicitly)
    • Output: was able to navigate and select a color within the widget. However, after choosing a color, the widget was closed, re-opened, and focus was sent to the top of the widget.
More information
Windows Speech RecognitionChromenone
  • Result: (fail)
    • command: (multiple commands) (Multiple commands were used)
    • Output: unable to use any commands within the color picker
More information

Extended Support for: input[type="color"] element: support the color picker widget

These are less common combinations

ATBrowserHas SupportOutputAction
Dragon Naturally SpeakingIEnot applicable-More information
Dragon Naturally SpeakingFirefoxunknown-More information
JAWSEdgeunknown-More information
NarratorFirefoxunknown-More information
NarratorChromeunknown-More information
NarratorIEnot applicable-More information
NVDAIEnot applicable-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 RecognitionEdgeunknown-More information
Back to top

History

  • 2019-10-20 Added test
  • 2020-01-27 Updated with JAWS 2020