NO BUG: Accessibility Issue Slider: "Values assigned to `role=""` are not valid ARIA roles"

Bugs
1

Values assigned to role="" are not valid ARIA roles.

ARIA roles enable assistive technologies to know the role of each element on the web page. If the role values are misspelled, not existing ARIA role values, or abstract roles, then the purpose of the element will not be communicated to users of assistive technologies.

<article class="brxe-646556 brxe-div fr-testimonial-card-echo splide__slide is-active is-v…" data-bg-color="#887bb6" data-id="" id="brxe-5f7d7f-slide01" role="group" aria-roledescription="slide" aria-label="1 of 5" style="margin-right: var(--grid-gap); width: calc((100% + var(--grid-gap))/1 - va…;">

Possible solutions:
Change role: If the element is actually acting as a slide in a slideshow, the group role might not be the best choice. You could change the role to tabpanel to make it clear that it is part of a slideshow.

1 Like
2

Hi Jan,
Thanks so much for your report!

I’m a bit confused because the code example is from the nestable slider (because it’s a splide__slide), which by default already contains role=“tabpanel”. How do I get it to change the role to group?

Best regards,
timmse

image
image1138Ă—804 193 KB

3

That’s odd. I have used an ACSS Frame for the slider, but since it does only the styling, it should not be an issue. I will also check if any scripts from my end might interfere.

You can check the slider on my site: https://janfehlis.de/

4

Thats an ACSS issue as they built their own slider and are not using Bricks’ one. They are using the carousel & presentation role for the slider - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role

You will need to report it as a bug in the community if you think anything is wrong.

5

Hi Jan,
Please insert the nestable slider (which is not from a frames template) somewhere and have a look at the attributes. If frames changes anything in any way, it is unfortunately out of our hands.