search

zenexpert / zxslideshow

0 stars 0 forks source link

Accessibility Issue #1

Open dbltoe opened 1 year ago

dbltoe commented 1 year ago

Really appreciate all your work.

A quick accessibility assessment.

Images with text can work with ADA/WCAG standards in some cases. If the image is the company logo, it is generally fine. If the text is mixed and contains links, it is often a violation UNLESS the alt contains the same words as in the image.

Site Improve's Chrome extension does find the embedded links (wrong contrast) and I do see some text pointers on some images but it does not seem that the text can be determined by a screen reader. I see that the text based on SwiperJS image has some h tags and some as divs. Although the image animated text using animate.css may be picked up by a screen reader, it is not legible to the average user.

https://www.w3.org/WAI/tutorials/images/#:~:text=Images%20of%20text%3A%20Readable%20text,words%20as%20in%20the%20image. Folks are often looking for a good slider. Hopefully it can also incorporate all that is ADA/WCAG

zenexpert commented 1 year ago

Thanks, John, much appreciated! One would think I had learnt my lesson about the alt tags, but guess not... Will add that shortly.

As for colors and contrast, yes, I get that, but the colors are controlled from the admin so this is not something I can influence expect maybe for the demo. This is up to the store owner to define which color is used, and that will pretty much depend on the photo that is uploaded.

What are your suggestions on making the entire slider to comply with ADA/WCAG? Animate.css is widely used and I wasn't aware screen readers would have an issue with it. Open to your suggestions.

dbltoe commented 1 year ago

Yes, the instant a store owner makes a change to their site, the chances are that they will make an accessibility error in one way or another. You can only try to guide them with the demo and hope that they actually rip the shrinkwrap off the readme.

As I said, the only problem I see is when the text is "absorbed" by the background image. Just like a Search Engine, accessibility checkers have no idea what is in the image and whether or not the text on top is legible to the user.

Another thing with sliders is control. There's a good discussion at https://ux.stackexchange.com/questions/118607/content-slider-carousel-accessibility-best-practices that, although slightly outdated, still brings up navigation by keyboard which is probably in the top ten things most checkers are looking for when they drop by.

Rule of thumb is <= 125 characters on the Alt Text and the screen reader will notify the reader that it's looking at an image so there's no need for "image of" "graph of", or "picture of" when building the alt text.

zenexpert commented 1 year ago

I hope the latest commit solves all these issues. Alt text is now optionally controlled from the admin so you can add some descriptive text, and if you don't add anything it's dynamically created based on slide's lead in text, title, subtitle, text and button text. Keyboard control is an option in the admin and is enabled by default.