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

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

Screen reader support level: partial (21/49)

Voice Control support level: partial (6/14)

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 4 months ago to 7 months ago. Detailed dates and version information can be found in associated tests.

Failing and partial results are between 7 months ago and 7 months ago.

Expectations

What are expectations?

Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
MUST convey its namenonesupportedsupportedsupportedsupportedsupportedsupportednonesupportedpartial
MUST convey its rolenonesupportedsupportedsupportednonesupportedsupportedsupportedsupportedpartial
MUST convey the current valuenonesupportednonesupportednonenonenonepartialsupportedpartial
MUST convey changes in valuenonesupportednonepartialnonenonenonesupportedsupportednone
SHOULD provide shortcuts to jump to this rolenonesupportedsupportedsupportednonesupportedsupportedsupportedsupportedsupported
MUST support the color picker widgetnonenot applicablepartialpartialpartialpartialpartialpartialsupportedpartial

Voice Control support by expectation

ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
MUST convey its namenonenonesupportednonesupported
MUST convey its rolenonesupportednot applicablenonesupported
MUST support the color picker widgetnonesupportedsupportednonenone

Expectation: convey its 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

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 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.
Screen Reader support for 'MUST convey its name'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonesupportedsupportedsupportedsupportedsupportedsupportednonesupportedpartial
Voice Control support for 'MUST convey its name'
TestDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
Basic html color input testnonenonesupportednonesupported

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 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.
Screen Reader support for 'MUST convey its role'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonesupportedsupportedsupportednonesupportedsupportedsupportedsupportedpartial
Voice Control support for 'MUST convey its role'
TestDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
Basic html color input testnonesupportednot applicablenonesupported

Expectation: 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
Screen Reader support for 'MUST convey the current value'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonesupportednonesupportednonenonenonepartialsupportedpartial

Expectation: 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.
Screen Reader support for 'MUST convey changes in value'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonesupportednonepartialnonenonenonesupportedsupportednone

Expectation: 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
Screen Reader support for 'SHOULD provide shortcuts to jump to this role'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonesupportedsupportedsupportednonesupportedsupportedsupportedsupportedsupported

Expectation: 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
Screen Reader support for 'MUST support the color picker widget'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
Basic html color input testnonenot applicablepartialpartialpartialpartialpartialpartialsupportedpartial
Voice Control support for 'MUST support the color picker widget'
TestDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
Basic html color input testnonesupportedsupportednonenone