Skip to content

small accessibility issue #13

@ecxmwo

Description

@ecxmwo

Hi,

your plugin was the only one which I found is lightweight, uses a real element and is nearly fully accessible. One accessibility issue I noticed when testing with NVDA screenreader is that the focused option is not read in screenreader. Only after you click on it or choose it with ENTER. This you can very easily solve. Just insert $dropdown.attr('aria-activedescendant', $li.attr('id')); in toggleHover() and give $dropdown as reference. This is what the aria-activedescendant is meant for (https://www.w3.org/WAI/GL/wiki/Using_aria-activedescendant_to_allow_changes_in_focus_within_widgets_to_be_communicated_to_Assistive_Technology) And be sure to reset the activedescendent in resetDropdown() - e.g. if ESC was pressed and the focused entry was not chosen: $dropdown.attr('aria-activedescendant', $dropdown.children('.selected').attr('id')); otherwise the currently selected entry will not be read correctly by the screenreader.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions