Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move accessibility concerns on datalist to a more prominent position #28189

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions files/en-us/web/html/element/datalist/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@ Only certain types of {{HTMLElement("input")}} support this behavior, and it can

> **Note:** The `<option>` element can store a value as internal content and in the `value` and `label` attributes. Which one will be visible in the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the `value` attribute.

## Accessibility concerns

When deciding to use the `<datalist>` element, here are some accessibility issues to be mindful of:

- The font size of the data list's options does not zoom, always remaining the same size. The contents of the autosuggest do not grow or shrink when the rest of the contents are zoomed in or out.
- As targeting the list of options with CSS is very limited to non-existent, rendering can not be styled for high-contrast mode.
- Some screen reader/browser combinations, including NVDA and Firefox, do not announce the contents of the autosuggest popup.

## Attributes

This element has no other attributes than the [global attributes](/en-US/docs/Web/HTML/Global_attributes), common to all elements.
Expand Down Expand Up @@ -168,14 +176,6 @@ The specification allows linking `<datalist>` with a {{HTMLElement("input/passwo
</tbody>
</table>

## Accessibility concerns

When deciding to use the `<datalist>` element, here are some accessibility issues to be mindful of:

- The font size of the data list's options does not zoom, always remaining the same size. The contents of the autosuggest do not grow or shrink when the rest of the contents are zoomed in or out.
- As targeting the list of options with CSS is very limited to non-existent, rendering can not be styled for high-contrast mode.
- Some screen reader/browser combinations, including NVDA and Firefox, do not announce the contents of the autosuggest popup.

## Specifications

{{Specifications}}
Expand Down