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

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

Screen reader support level: partial (23/49)

Voice Control support level: partial (6/14)

On this page

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

Expectations

What are expectations?

Screen Reader support by expectation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
MUST convey an appropriate namesupportedsupportedsupportedsupportednonesupportedpartial
MUST convey an appropriate rolesupportedsupportedpartial (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 widgetpartialpartialpartialpartialpartialsupportedpartial

Voice Control support by expectation

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

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

Expectation: 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
Screen Reader support for 'MUST convey an appropriate role'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
Basic html color input testsupportedsupportedsupportedsupportednonesupportedsupportedsupportedsupportedpartial
Voice Control support for 'MUST convey an appropriate 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
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
Screen Reader support for 'MUST support the color picker widget'
TestJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeIEFirefoxEdgeChromeFirefoxFirefoxChromeSafariSafari
Basic html color input testpartialnot 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