-
Notifications
You must be signed in to change notification settings - Fork 355
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
base: dev
Are you sure you want to change the base?
Improve accessibility of record checkboxes and cursors for checkboxes and select elements #4124
Conversation
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. |
There was a problem hiding this 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!
@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. I also changed the cursor for checkboxes and select elements. |
Currently the whole marked space in the screenshot can be used to click the checkbox. That might be confusing.
This PR fixes this by setting the height to fit the content.