Feature request: a11y - show population pourcentage in Accessibility Addon

[Aarbel]

Color-blinded Population pourcentage should be shown in Accessibility plugin.

Why ? To see if we test accessibility with a big pourcentage of color-blinded population, or people with low vision.

For example:

• maybe people with blurred vision on a device are much more than what we expect (idk, maybe 2% of web users), so maybe focusing more on making texts / buttons bigger should bring a better accessibility.
• maybe Tritanomaly just concerns 0,0001 % of we user, so maybe not a big thing to constraint too much the UI with this accessibility criteria (but surely make it readable for them)

[Aarbel]

Links

• https://en.wikipedia.org/wiki/Color_blindness
• https://www.reddit.com/r/ColorBlind/comments/j3qwj4/does_achromatomaly_exist/g7p2f4o?utm_source=share&utm_medium=web2x&context=3
• https://www.w3.org/TR/low-vision-needs/
• https://www.who.int/en/news-room/fact-sheets/detail/blindness-and-visual-impairment

- Normal Vision - 92%
- Deuteranomaly - 2,7%
- Protanomaly - 0,66%
- Protanopia - 0,59%
- Deuteranopia - 0,56%
- Tritanopia - 0,016%
- Tritanomaly - 0,01%
- Achromatopsia - 0,0001%
- Achromatomaly - 0,00001%

[Aarbel]

Can't find metrics about blurred or low vision vision, if someone can help me

cf https://webaim.org/articles/visual/lowvision

uncorrected refractive errors
cataract
age-related macular degeneration
glaucoma
diabetic retinopathy
corneal opacity
trachoma

[Aarbel]

Code to edit: https://github.com/storybookjs/storybook/blob/07c8974649e0fa95ce1fe8e1b8a0e553754bbdb0/addons/a11y/src/components/VisionSimulator.tsx

To obtain something like this (maybe sorting them by pourcentage would be great)

[Aarbel]

@maya maybe you can help ?

[shilman]

cc @MichaelArestad

[Aarbel]

@MichaelArestad @maya any help / news about it ?

[MichaelArestad]

@Aarbel Thanks for proposing this! In the screenshot above, where the percentages are next to the modes, it is not immediately clear to me what the percentages represent. I don't have any ideas for ways to include this information yet, but I will be thinking about it as I work on the accessibility addon.

It would be good if we could get this data via an API so it will remain updated.

[Aarbel]

@MichaelArestad i agree that in term of ui a text like "Deuteranomaly (2,7% of users)" would be better, but quite redundant with all dropdown items. That's just a UI detail anyway, before that "Deuteranomaly" has first nos sense for most users.

About API: i don't know an api that gives this "vision" metrics updated. We will surely have to update it every 5 years from Wikipedia, with certainly little variations. Not so a big maintance thing.

The only data i'm missing is the population percentage of low vision, cf https://github.com/storybookjs/storybook/issues/15866#issuecomment-900524401

[jsomsanith]

Hey everyone, What about this mockup ?

Agree that this is not some critical info that changes everytime, and an update maintenance each year doesn't cost anything instead of getting it from api

[MichaelArestad]

@jsomsanith I dig this mockup! I might change it to 2,7% of users (no "the")

[jsomsanith]

👍 I can remove the the If the visual is ok, I can work on a PR

[Aarbel]

@jsomsanith for blurred vision (mainly myopa):

22.9%

https://www.aaojournal.org/article/s0161-6420(16)00025-7/pdf#:~:text=We%20estimated%201406%20million%20people,e%206.3%25%5D)%20in%202000.

[Aarbel]

🙌

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-rc.0 containing PR #18003 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease