Important: This website does not attempt to establish a standard for how assistive technologies must behave. Read the FAQ for more information. Additionally, this is a work in progress. Please submit feedback or suggestions.

input[type="color"] element (html)

Screen Reader support level: partial (26/55)

Voice Control support level: partial (6/23)

On this page

About this feature

The input element represents a color well control, for setting the element's value to a string representing a simple color.

Age of results

Results across all tests for this feature range from 3 years ago to 4 years ago. Detailed dates and version information can be found in associated tests.

Caution

Failing or partial results may be out of date. The oldest result is from 4 years ago. Consider running the associated tests and contributing results.

Expectations

What are expectations?

Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its namenonenonesupportedsupportedsupportedsupportedsupportedsupportednonesupportedsupported
MUST convey its rolenonenonesupportedsupportednonenonesupportedsupportedsupportedsupportedsupported
MUST convey the current valuenonenonenonesupportedsupportedsupportednonenonesupportedsupportedsupported
MUST convey changes in valuenonenonenonepartialsupportedsupportednonenonesupportedsupportednone
SHOULD provide shortcuts to jump to this rolenonenonesupportedsupportednonenonesupportedsupportedsupportedsupportedsupported
MUST support the color picker widgetnonenonepartialpartialpartialpartialpartialpartialpartialsupportedpartial

Voice Control support by expectation

ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
MUST convey its namenonenonesupportednoneunknownsupportedunknownunknown
MUST convey its rolenonesupportednot applicablenoneunknownsupportedunknownunknown
MUST support the color picker widgetnonesupportedsupportednoneunknownnoneunknownunknown

Expectation: convey its name

Rationale:

A screen reader user needs to know what to enter.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Notes:

For form inputs - commands to read line by line (down and up arrows in most windows screen readers) will not always result in the name being explicitly conveyed when the virtual focus is moved to an input where the label is visually displayed and programmatically associated with the input. This is acceptable because the name is implied by the fact that it should be naturally found in the reading order. Some screen readers choose to not convey the name in these cases, likely in an effort to reduce verbosity.

Examples:

  • A screen reader will announce the name (label).
  • Voice control software will let the user say something like "click <name>" to activate the control.
Screen Reader support for 'MUST convey its name'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonenonesupportedsupportedsupportedsupportedsupportedsupportednonesupportedsupported
Voice Control support for 'MUST convey its name'
TestDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Basic html color input testnonenonesupportednoneunknownsupportedunknownunknown

Expectation: convey its 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 this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples:

  • 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.
Screen Reader support for 'MUST convey its role'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonenonesupportedsupportednonenonesupportedsupportedsupportedsupportedsupported
Voice Control support for 'MUST convey its role'
TestDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Basic html color input testnonesupportednot applicablenoneunknownsupportedunknownunknown

Expectation: convey the current value

Rationale:

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

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA
Screen Reader support for 'MUST convey the current value'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonenonenonesupportedsupportedsupportednonenonesupportedsupportedsupported

Expectation: convey changes in value

Rationale:

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

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • When the user enter text, the screen reader will announce it back to them.
Screen Reader support for 'MUST convey changes in value'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonenonenonepartialsupportedsupportednonenonesupportedsupportednone

Expectation: provide shortcuts to jump to this role

Rationale:

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

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA
Screen Reader support for 'SHOULD provide shortcuts to jump to this role'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonenonesupportedsupportednonenonesupportedsupportedsupportedsupportedsupported

Expectation: support the color picker widget

Rationale:

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

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples:

  • 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
Screen Reader support for 'MUST support the color picker widget'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonenonepartialpartialpartialpartialpartialpartialpartialsupportedpartial
Voice Control support for 'MUST support the color picker widget'
TestDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Basic html color input testnonesupportedsupportednoneunknownnoneunknownunknown