search

lucide-icons / lucide

Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
https://lucide.dev
ISC License
8.94k stars 380 forks source link

feat(docs): added accessibility guide #2122

Open karsa-mistmere opened 2 weeks ago

karsa-mistmere commented 2 weeks ago

closes #2121

What is the purpose of this pull request?

Before Submitting

jguddas commented 2 weeks ago

We can also point people to resources that they should reference, be it just the WCAG or even component libraries or guides like https://inclusive-components.design/toggle-button/

karsa-mistmere commented 2 weeks ago
  • The content of the images is not accessible, the alt text is different from the content of the image. I would generally prefer if we moved the text out of the images and made them just normal text.

For the most part this is entirely intentional, these are illustrations, I've added accessible text where there was information otherwise missing, but most of these illustrations contain redundant information that is not useful to be read out as is. There's probably room for improvement, on that I can agree.

Would be nice to have a section on flashing images and use reduce motion as well

We don't really have ootb support for such animations, so I'm not entirely sure if it's relevant within the context of Lucide.

Also aria-label is not perfect, using something like RadixUIs AccessibleIcon is something that we should point people to use instead.

Well, the current guide does recommend not using it in places where it's problematic, but you're right, there probably space for some more nuance about this.

A section on who this for and why you should do this would also be nice.

Is it not for everyone using Lucide? 🧌

We can also point people to resources that they should reference, be it just the WCAG or even component libraries or guides like https://inclusive-components.design/toggle-button/

Great idea, we should definitely add a "Further resources" section!

jguddas commented 2 weeks ago

A section on who this for and why you should do this would also be nice.

Is it not for everyone using Lucide? 🧌

Example: Your should give your icons enough contrast so people with visual impairments, be it physical or just them being outside in the glaring sun can still get the amazing benefit of looking at those cute icons.

jguddas commented 2 weeks ago

Would be nice to have a section on flashing images and use reduce motion as well

We don't really have ootb support for such animations, so I'm not entirely sure if it's relevant within the context of Lucide.

Tailwind based example: You can do <DogIcon className="animate-ping" /> but what you should consider using <DogIcon className="motion-safe:animate-ping" /> instead.

karsa-mistmere commented 2 weeks ago

Would be nice to have a section on flashing images and use reduce motion as well

We don't really have ootb support for such animations, so I'm not entirely sure if it's relevant within the context of Lucide.

Tailwind based example: You can do <DogIcon className="animate-ping" /> but what you should consider using <DogIcon className="motion-safe:animate-ping" /> instead.

Yeah, but this is entirely dependant on Tailwind, I think it should be their responsibility to educate people about using their animations responsibly. :)

(To be frank, this should be their default, it shouldn't be something to opt into.)