search

mdbassit / Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.
https://coloris.js.org/examples.html
MIT License
461 stars 58 forks source link

ARIA: issue with Inline `#clr-color-marker` #133

Open melloware opened 8 months ago

melloware commented 8 months ago

Using FastPass:

image

Looks like #clr-color-marker its saying there is no role attribute even though it uses aria-label.

Maybe it should be role="presentation"??

mdbassit commented 8 months ago

I did consider what ARIA role to add and I couldn't find anything that fits. There is an open issue related to this on the ARIA Github repo that I've been watching for a while now (https://github.com/w3c/aria/issues/432).

I haven't actually tested the impact of adding role="presentation" to #clr-color-marker on the popular screen readers (JAWS, VoiceOver, NVDA, ...). If you are willing to test it to make sure it doesn't have any negative impact on usability, I'll happily add the role.

jepsar commented 8 months ago

@melloware Maybe we can ask @christophs78 to test the change.

melloware commented 8 months ago

@mdbassit you are right role="presentation" is not correct as the docs say

Note: The element with role="presentation" is not part of the accessibility tree and should not have an accessible name. Do not use aria-labelledby or aria-label.

mdbassit commented 8 months ago

Indeed, role="presentation" is the same as role="none", so it shouldn't be applied to interactive elements.

I think for now we can safely ignore the warning from FastPass. I'm more concerned with how screen readers treat the UI elements than with strictly complying with the standards. I'm open to any suggestions to improve compliance though.

melloware commented 8 months ago

Agreed should we leave this open for tracking and so no one else re-reports it?

mdbassit commented 8 months ago

Alright, let's leave it open for now