feat(docs): added accessibility guide

[karsa-mistmere]

closes #2121

What is the purpose of this pull request?

• [x] Documentation update

Before Submitting

• [x] I've read the Contribution Guidelines.
• [x] I've checked if there was an existing PR that solves the same issue.

[jguddas]

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]

• 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]

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]

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]

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.)