Rating component using ARIA attributes

[stn-swz]

In our project, we are using Quasars Rating component. Unfortunately, it seems this component is not WCAG compatible so it is accessible. Although its possible to operate the component with tab and enter keys, the star icons used in the component are automaticaly all set to aria-hidden=true, which means the component is not visible and operable by a screenreader. Is there a way to change this and to set aria attributes like aria-label etc. to the rating icons? Else we would have to create a complete new Rating component, which would be a pity and we want to avoid.

[dobbel]

@stn-swz

You can always look for other Vue based Rating component/libary that is WCAG compatible.

You could also make a github issue. Quasar claims to have Accessibility features on their home page but what that means is very unclear.

You’re not the first to ask about Quasar & Accessibility btw:
https://github.com/quasarframework/quasar/issues/5549
https://forum.quasar-framework.org/topic/4450/q-btn-dropdown-aria-accessibility-arrow-keys

I found this , could be useful:
https://vue-a11y.com/