Test a11y

[ai]

Test tools with screen reader and then ask a friend who really use screen reader for integration testings

[AleksandrSl]

Excuse me for breaking in.

Tried a little with orca on fedora.

Some moments:

• links for personal socials could contain info about the platform?
• links in the description are very vague. Not sure how real screen reader users would use them, but hearing "were created" link gives no context. Though reading the whole text adds this context.
• keyboard shortcut is read when you focus input field, but label is not, so we got "c 0.205". Took a look at the code, c is an actual label, maybe the full name will be better?
• it says invalid entry for all inputs with numbers, orca bug?
• setting don't pronounce the state they are in, so just "show graphs". there is also no way to change that value from the keyboard? Though settings are actually not needed for users with screenreaders, because they only affects charts.
• keyboard shortcuts overlaps with screenreader shortcuts, e.g. c is for comboboxes in orca, h for headers.

Some general thoughts:

• icons are usually hidden via aria-hidden=true to prevent screenreader from reading 'image'. Orca doesn't do this, but I'm not sure for other readers.
• contrast of keyboard shortcuts, it was a battle to see whether it's an i or r on the first input, though I don't have such bad vision :sweat_smile:
• having links without href is bad, because it can confuse some screenreaders (proofs needed), anyway it's not treated as a link by most screenreaders, so could be rendered as span. Or a link with aria-current.
• Maybe we need some description how color picker works for screenreaders, when you see the buttons and charts it's easier, that just hearing headers with inputs

What is the purpose of aria-live="polite" aria-label="Benchmark" aria-hidden="true" of aria attributes on hidden element is it in development?

[AleksandrSl]

By the way, system theme is working in firefox, and that's great!

[ai]

links for personal socials could contain info about the platform?

links in the description are very vague. Not sure how real screen reader users would use them, but hearing "were created" link gives no context. Though reading the whole text adds this context.

Visual users doesn’t know about the destination too. I think it is OK.

But if you know a good pattern, I am open for suggestions.

keyboard shortcut is read when you focus input field, but label is not, so we got "c 0.205". Took a look at the code, c is an actual label, maybe the full name will be better?

L, C, H are widely used in LCH texts.

setting don't pronounce the state they are in, so just "show graphs". there is also no way to change that value from the keyboard? Though settings are actually not needed for users with screenreaders, because they only affects charts.

Fixed checkbox a11y 5625d66

Can you check it again?

it says invalid entry for all inputs with numbers, orca bug?

Need investigate later

keyboard shortcuts overlaps with screenreader shortcuts, e.g. c is for comboboxes in orca, h for headers.

Have no idea how to fix it.

icons are usually hidden via aria-hidden=true to prevent screenreader from reading 'image'. Orca doesn't do this, but I'm not sure for other readers.

I had a problem with Lighthouse and aria-hidden=true on images. But maybe I did something wrong.

contrast of keyboard shortcuts, it was a battle to see whether it's an i or r on the first input, though I don't have such bad vision sweat_smile

Fixed b42b11d

What is the purpose of aria-live="polite" aria-label="Benchmark" aria-hidden="true" of aria attributes on hidden element is it in development?

Press b to see benchmark results.

I added aria-live to read them on updates.

Does Orca read Benchmark when it is hidden?

having links without href is bad, because it can confuse some screenreaders (proofs needed), anyway it's not treated as a link by most screenreaders, so could be rendered as span. Or a link with aria-current.

Good point.

Fixed 5fd47eb

Maybe we need some description how color picker works for screenreaders, when you see the buttons and charts it's easier, that just hearing headers with inputs

I added a hidden block with aria-live to read the current color space of the selected color.

Does it work?