patternfly-elements icon indicating copy to clipboard operation
patternfly-elements copied to clipboard

bug: address a11y issues for the pfe docs demo pages

Open kelsS opened this issue 3 years ago • 2 comments

Description of the issue

The PFE docs site and demos have issues showing up on the audit tools (lighthouse, aXe devtools) as well as issues discovered through manual user testing. The docs are not in compliance with WCAG 2.1 A - AA guidelines.

Impacted component(s)

  • All of the PFE demos

Steps to reproduce

  1. Go to the PFE repo on your local machine
  2. Run npm start in the terminal
  3. Go to any component demo
  4. Run Lighthouse and aXe Devtools on the page
  5. Navigate through the page with your OS screen reader

Expected behavior

  • All the pages should pass the audit tests.
  • All the content should be usable and perceivable by all users
  • The docs should meet the WCAG 2.1 A - AA guidelines

Screenshots

Lighthouse report

pfe-docs-lh-report.pdf

aXe Devtools report

pfe-docs-axe-devtools-report

kelsS avatar Mar 01 '22 16:03 kelsS

This is great @kelsS

we recently merged a commit which should configure lighthouse to fail any page that has less than 100% a11y audits, so we should get more exposure for these in PRs

WDYT about taking these one-at-a-time?

bennypowers avatar Mar 01 '22 16:03 bennypowers

Please also consider the pages at /components/*/demo/, which we're using for our visual regression and lighthouse tests

bennypowers avatar Mar 01 '22 17:03 bennypowers