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

Accessibility Best Practice: ARIA role should be appropriate for the element #13

Closed
beckej13820 opened this issue May 14, 2022 · 5 comments

Comments

@beckej13820
Copy link

I have been doing automated accessibility testing on an Omeka S site using the Item Carousel Block. The accessibility tool I am using for the testing is Axe Dev Tools, a free browser extension created by Deque. https://www.deque.com/axe/devtools/

The link to the item was flagged for using the ARIA Role tabpanel, which is more often used when creating a multitab display as below:
Screen Shot 2022-05-14 at 10 55 06 AM

Description from Mozilla: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role
Example cited by Mozilla as proper use of tab panel (URL to screenshot above): https://codepen.io/heydon/pen/veeaEa/

I suggest removing that ARIA label

@beckej13820
Copy link
Author

I have an update on this issue here.

I was trying to investigate this further, and I read that this carousel is an implementation of SlickJS, and that by inspecting that project, it seems as though the accessibility errors are coming from that upstream.

Going through the open tickets on SlickJS Github, there was an interesting comment from Accessible360. While they had reported several accessibility bugs to the repo, those were not getting closed.

They maintain a fork of SlickJS that they claim is a drop-in replacement for the library:

On Github: https://github.com/Accessible360/accessible-slick
Project Homepage and Demo: https://accessible360.github.io/accessible-slick/

I can confirm that when I use Axe Dev Tools (my preferred accessibility checking tool) I do not get the same ARIA errors from the Accessible360 fork that I do from the SlickJS project.

@matthewjmckinley
Copy link
Collaborator

Thanks for your accessibility testing and the heads up on accessible-slick! It isn't quite drop-in due to some of the customizations we've made in our carousel's appearance, but we're working on integrating and testing now and should hopefully have something working soon.

@beckej13820
Copy link
Author

Excellent! Thanks for sharing!

@matthewjmckinley
Copy link
Collaborator

accessible-slick library is integrated as of the latest release, which will update later tonight.

Curious, does this fix also address the other ARIA-based issues you've created? (i.e. can I close?)

@beckej13820
Copy link
Author

beckej13820 commented Jun 22, 2023

Just upgraded and tested. All of the ARIA errors and Link Errors were resolved by the upgrade to Accessible Slick.

The only issue that remains is #12

I think you could close the other three, and I will follow up on that issue there.

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

No branches or pull requests

2 participants