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

Fix and add Accessible Names and improve tooltip accessibility #537

Closed
markusjt opened this issue Apr 18, 2023 · 1 comment · Fixed by cessda/cessda.cdc.searchkit#82
Closed
Assignees
Milestone

Comments

@markusjt
Copy link

Accessible Name

1.1.1: Non-text Content, 2.4.4: Link Purpose (In Context): Add alt text for CESSDA logo (header and footer).
1.3.1: Info and Relationships: Make sure labels are programmatically tied to input fields (search filters, results per page, sort by), check aria relationships + accessible name of language selector and add (non-visible) label for tooltips and search (both currently rely on icons and positioning for understanding their usage).
1.3.3: Sensory Characteristics: Add aria-label for < (previous page of search results) and > (next page of search results) pagination buttons. Should also help with understanding the other pagination buttons so for example 1 can probably just be 1 instead of "Page 1 of search results".

This issue is focused on accessible names even if some other minor accessibility issues might be fixed at the same time but for example landmarks are also part of 1.3.1 but will still be in a separate issue.

@markusjt markusjt added this to the 3.3.0 milestone Apr 18, 2023
@markusjt markusjt self-assigned this Apr 18, 2023
@markusjt markusjt changed the title Fixing and adding Accessible Names Fix and add Accessible Names and improve tooltip accessibility May 22, 2023
@markusjt
Copy link
Author

Issues still remaining: Not possible to easily add accessible names to elements from searchkit: SearchBox (main search in header), InputFilter (keywords filter) and RangeFilter/RangeSliderInput (Collection years filter). They don't support adding aria-label (or aria-labelledby) or id.

Issue with empty aria attributes in language select is a bug in react-select that has been fixed in a later version: JedWatson/react-select#5131.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant