Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conduct testing with users with disabilities #21

Closed
10 tasks done
jasonwebb opened this issue Oct 5, 2020 · 3 comments
Closed
10 tasks done

Conduct testing with users with disabilities #21

jasonwebb opened this issue Oct 5, 2020 · 3 comments
Labels
documentation Improvements or additions to documentation

Comments

@jasonwebb
Copy link

jasonwebb commented Oct 5, 2020

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.

  • Demo page samples
    • Single item
    • Multiple items
    • Responsive display (with disabled arrows)
    • Autoplay
    • Center mode - any ideas for conveying the center slide to screen reader users?
  • CodePen samples
    • Dual image sliders for e-commerce PDP main image.
    • Product cards
    • Hero banner
@jasonwebb jasonwebb added the documentation Improvements or additions to documentation label Oct 5, 2020
@jasonwebb
Copy link
Author

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
Copy link
Author

jasonwebb commented Jan 7, 2021

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:

  • The headings for the blue information boxes ("tips") throughout the docpage should be <h4>s, not <h3>s.
  • 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.
  • 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.
  • 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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

1 participant