Accessibility Additions to Swagger UI #10679
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Since at least 2019, there have been requests to make Swagger UI more accessible. When I ran the WAVE Chrome plugin against the Petstore API, Swagger UI had a score of 4.4 out of 10 for accessibility. By adding ARIA labels and increasing contrast on many elements, I was able to increase the WAVE score to 9.5 out of 10.
Motivation and Context
Having worked in, and as an agent of, the US government for the last 22 years, our websites are required to adhere to Section 508 of the Rehabilitation Act. With API usage increasing amongst multiple Federal agencies and Swagger UI being the de facto standard for documentation, I volunteered to step up and get the application to at least the WCAG 2.2 AA standard. I left the deprecated APIs alone or fix several warnings.
Fixes #7350
How Has This Been Tested?
Tested on Debian 13 (Trixie) in Chromium 143.0.7499.109 and Firefox 140.6.0esr using Orca screen reader, on Windows 11 (22H2) using Edge and NVDA screen reader, and in Safari on MacOS Tahoe. Ran application in dev mode (
npm run dev) from the Debian box. Ensured site rendered in all browsers and screen readers were accurate. Checked Developer Tools to see if any errors popped up; there is one, to use 'react-dom/client' when running createRoot. However, that is outside the scope of this PR.Also ran lint and Jest tests to ensure everything was green across the board. Tested using Node 22.19.4.
Screenshots (if appropriate):
Petstore API
WAVE Score
Checklist
My PR contains...
src/is unmodified: changes to documentation, CI, metadata, etc.)package.json)My changes...
Documentation
Automated tests