Add aria-label to the listbox for autocomplete, for accessibility

sfc-gh-klin commented

2022-05-19 19:24:48 +02:00

(Migrated from github.com)

Hi there!

I'm interested in adding an aria-label field for this autocomplete tooltip to meet the guidelines of this accessibility check.

Since the autocomplete is an input field, I propose providing it with an aria-label indicating that it's the input field for the autocomplete. What do you think?

Hi there! I'm interested in adding an aria-label field for this autocomplete tooltip to meet the guidelines of this [accessibility check. ](https://dequeuniversity.com/rules/axe/4.3/aria-input-field-name?application=axeAPI) Since the autocomplete is an input field, I propose providing it with an aria-label indicating that it's the input field for the autocomplete. What do you think?

marijnh commented

2022-05-20 09:06:18 +02:00

(Migrated from github.com)

This field will be associated with the editor via an aria-haspop attribute, and is not something people will be directly navigating to. Can you describe concretely how adding a label to it improves the quality of the read content during completion?

sfc-gh-klin commented

2022-05-20 20:32:06 +02:00

(Migrated from github.com)

When I'm in the CM6 editor and I type "." to get the autocomplete selections, the Mac screen reader says:

<the function name> selected
1 out of 100
main
You are currently in a text element inside of a listbox

I thought that having it read out autocomplete would be beneficial because the aria-label field seems to be strongly recommended for input fields (the listbox in question), at least according to the accessibility guidelines I'm following in the link on the OP.

It sounds like you feel that it's too chatty to also add that in. Would you say that the accessibility guidelines about listboxes needing aria-labels are inaccurate in this instance?

When I'm in the CM6 editor and I type "." to get the autocomplete selections, the Mac screen reader says: ``` <the function name> selected 1 out of 100 main You are currently in a text element inside of a listbox ``` I thought that having it read out autocomplete would be beneficial because the aria-label field seems to be strongly recommended for input fields (the listbox in question), at least according to the accessibility guidelines I'm following in the link on the OP. It sounds like you feel that it's too chatty to also add that in. Would you say that the accessibility guidelines about listboxes needing aria-labels are inaccurate in this instance?

marijnh commented

2022-05-25 08:22:27 +02:00

(Migrated from github.com)

Attached patch does something similar, including support for internationalization.

Pull request closed

Please reopen this pull request to perform a merge.

Rows
Columns

Add aria-label to the listbox for autocomplete, for accessibility #11

Pull request closed