Create a more accessible theme with better focus indicators

[jasonwebb]

Currently the focus indicators on the previous / next buttons and slide dots are not very ineffective for most people with vision impairments. All that happens is that their opacity is changed, but that change is very subtle and lacks an outline, border, or shadow that many people would expect.

WCAG 2.4.7 says that focus indicators must be "visible", but does a pretty bad job of defining what exactly "visible" means. Technically a subtle change in opacity might be argued as compliant with the exact wording of the guideline, but it clearly does not honor the spirit of the guideline. In a legal scenario, it could really come down to which side has the better lawyers. Why even risk it? Let's add great focus indicators so legal teams don't have to split hairs!

Unfortunately, adding effective focus indicators would be a very noticeable change that could design / dev teams that are used to the current styles. So rather than introducing these indicators to the main slick-theme.scss file, it might be a better idea to spin up an alternative stylesheet and promoting it over the original (without replacing it) for teams who want it.

• Create a new theme source file (accessible-slick-theme.scss?).
• Improve focus indicators for the Previous and Next buttons.
• Improve focus indicators for the slide dots.
• Ensure the new Sass file is built properly by all the build systems.
• Add documentation to the main README, with installation instructions.

[LuomaJuha]

Hello, I just wanted to comment on the focus indicators of those buttons. Could there be any chance for the following: Normally outlines are always shown for focusable elements, but there could be an option to use color change instead. The outline: none causes an annoyance, where returning them to the original state of browsers requires some work.

[jasonwebb]

I like that idea! I agree that the browser default focus indicators are far superior to the styles in place currently. I'd love to enable them by default, but I was concerned that there might be a lot of teams who might feel that those indicators are too disruptive to their visual design and then end up not switching to accessible-slick. Its a dumb thing to have to be concerned about, I've just seen a large number of designers who are rather touchy about those focus indicators.

I really like the idea of enabling them by default, then exposing a new setting to allow people to opt out of them and rely only on the color/size change that is there now. In the documentation for that setting there could be clear, strong language explaining the impacts on real users and the potential for an increased risk of violating WCAG 2.4.7. If you agree, I'll go ahead and build that out in a branch and we can play around with it before integrating into the main branch :)

[LuomaJuha]

Hey, that sounds great imo!

[jasonwebb]

I've added back browser-default focus indicators in accessible-slick-theme.scss for all interactive elements. This means that they will be enabled automatically for any devs who opt-in to the new accessible theme. If they continue to use the original theme (slick-theme.scss) nothing will change, since they may have built additional custom styling on top that we wouldn't want to break.

See the demo page to see the updated focus indicators in action: https://accessible360.github.io/accessible-slick

[jasonwebb]

Theme is now complete, and documentation added to the main README. Closing!

[jasonwebb]

Here's an image of two carousels side-by-side using the two themes that are available, with the differences annotated. Note that the accessible theme has better previous/next arrows (darker and consistent with the slide dots), all of the slide dots are larger with the current slide being bigger than the rest, and there are browser-default focus styles on all interactive elements.