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

Improve accessibility of record checkboxes and cursors for checkboxes and select elements #4124

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from

Conversation

ThoWagen
Copy link
Contributor

Currently the whole marked space in the screenshot can be used to click the checkbox. That might be confusing.

image

This PR fixes this by setting the height to fit the content.

@demiankatz
Copy link
Member

Thanks, @ThoWagen. Next week, after the holiday here, I'm hoping that @sturkel89 can find time to take a look at this and test checkbox behavior in search results (with showBulkOptions on in config.ini) and favorite lists and make sure things work consistently across themes, etc.

Copy link
Contributor

@sturkel89 sturkel89 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have tested checkbox functionality in the test branch and compared it with dev. (I had to make up some work time from earlier in the week, so I was able to get to this during the long weekend off.)

In dev, the highlighted area below the checkbox is all clickable, as illustrated in Thomas's screenshot above. This can be confusing.

In the test branch, only the checkbox itself is clickable. I tested this in saved lists and in search results. So, the test branch has successfully accomplished its goal.


I have two questions about this change to the code.

My first question has to do with accessibility. For some users, it might be difficult to point the mouse precisely at the checkbox, which is the smallest element on any VuFind page. However, I think there are accessibility tools that users with hand tremors can use to get around this, including adjustable sized mouse pointers and customizations for movement sensitivity. Do we have any concerns about the need to point the mouse precisely at such a small element?

My other question has to do with the visual signals one gets from the interface. As I move my mouse around the screen in dev, the pointer turns into a hand when I hover over almost every clickable element, e.g. buttons, badges, linked text like titles and filters, clickable text like "Select all entries on the page". In the dev branch, the mouse pointer is a hand in when I move over the area directly below the checkbox; it turns back to an arrow over the checkbox itself.

In the test branch, the mouse pointer is a pointer in that no-longer-clickable area below the checkbox, and it remains a pointer at the checkbox itself. Should it become a hand at that point, since the checkbox is clickable?

The only other exceptions I see where something can be clicked but the pointer remains an arrow are the two dropdowns with rounded corners: the All Fields/Author/Title etc. dropdown next to the search box, and the Relevance/Date Descending/Author etc. dropdown next to Sort. The pointer becomes a hand at the dropdowns at the top of the screen for Theme and Language (which also change color when moused over).

I wanted to raise those questions so that others with more knowledge of this aspect of interface design could provide their opinions. If those aspects are okay as they are, I'm fine with merging this PR. Thanks!

@ThoWagen ThoWagen changed the title Adjust record checkboxes height to fit content Improve accessibility of record checkboxes and improve several mouseover cursors Dec 2, 2024
@ThoWagen
Copy link
Contributor Author

ThoWagen commented Dec 2, 2024

@sturkel89 Thanks! I think those are some good points.

Concerning the accessibility I found https://www.w3.org/TR/WCAG22/#target-size-minimum. I increased the label around the checkboxes so that the clickable area is now 25x25 pixels.
image

I also changed the cursor for checkboxes and select elements.

@ThoWagen ThoWagen changed the title Improve accessibility of record checkboxes and improve several mouseover cursors Improve accessibility of record checkboxes and cursors for checkboxes and select elements Dec 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants