Conduct testing with users with disabilities

[jasonwebb]

Before publishing this package out to NPM and elsewhere (#3), it'd be a good idea to do some final testing with users with disabilities to verify that the package is feature-complete (at least for an initial launch).

At Accessible360, a number of our expert auditors are blind or visually impaired, so I will work on snagging some time with them as soon as is feasible to test out key samples from the demo page and the CodePen collection.

• [x] Demo page samples
  • [x] Single item
  • [x] Multiple items
  • [x] Responsive display (with disabled arrows)
  • [x] Autoplay
  • [x] Center mode - any ideas for conveying the center slide to screen reader users?
• [x] CodePen samples
  • [x] Dual image sliders for e-commerce PDP main image.
  • [x] Product cards
  • [x] Hero banner

[jasonwebb]

The team at @Accessible360 is currently experiencing a higher-than-normal workload due to increased end-of-year needs from clients, so testing will need to be delayed for a short time. I am (tentatively) expecting that their availability will open up after Jan 1, so I would estimate that this package will be tested and published before the end of January 2021.

If you are a user with a disability, or have access to anyone willing to help, please feel free to reach out to me about how you can help. Everyone is welcome to participate, especially native screen reader or keyboard-only users!

[jasonwebb]

Today I conducted testing with a native screen reader user who uses both JAWS and NVDA on a Windows 10 machine, and the following feedback was received:

• [X] The headings for the blue information boxes ("tips") throughout the docpage should be <h4>s, not <h3>s.
• [x] When centerMode is enabled, it is possible (maybe likely) that developers will use CSS to style the center slide differently than the other slides (as shown in the official docpage example). Therefore the centered slide should be identified as such for screen readers somehow. The tester recommended appending (centered) to the aria-label of the slide that is currently centered.
  • It seems like some JS logic already exists to dynamically apply the .slick-center class to the centered slide. Just need to extend this to also apply the aria-label adjustment at the same time.
• [x] When there are multiple adjacent sliders, it would be helpful for them to be identified using different aria-labels, especially if they are synched. I've already added support for this using the new regionLabel setting, but I should update the examples in the docpage to demo and explain its use.
• [x] When slides are dynamically added, they do not get the necessary role="group" and aria-label attributes. See the Add & Remove demo on the docpage.

Aside from these relatively minor issues, the tester's feedback was overwhelmingly positive for all of the docpage examples and the real-world use cases up on CodePen. I will go ahead and integrate the changes outlined above, then get this package officially published out to NPM and elsewhere ASAP (by the end of Jan. 2021 at the latest)!

[jasonwebb]

Finished integrating changes based on user feedback, so I'm closing this issue out and moving on to final cleanup and launch.