Skeleton loader > Accessibility Audit
Refer to the parent epic description for more information on this effort.
Purpose
Audit the accessibility of the GitLab UI Skeleton Loader component in all variants and states in order to update the Pajamas component if necessary and provide more documentation on the component’s page in Pajamas.
Component description
A skeleton loader is a simplified preview of loading content.
Initial Methods and Tools
Review the initial testing methods in the parent epic. List the testing methods used for your audit below, including any additional testing methods needed for this component that is not listed in the parent epic.
- Evaluate all of the skeleton loader variants and options in GitLab UI.
- Visual review for contrast and states.
- Semantic and functional review.
- Screen reader: VoiceOver + Safari on macOS
- Screen reader: NVDA + Chrome on Windows
- axe DevTools extension in browser) variants and configurations in GitLab UI.
Audit Criteria
Review the general audit criteria in the parent epic. Add applicable criteria to this section, including any additional criteria needed for this component that is not listed in the parent epic. A check indicates that the audit has been performed, not that it passes.
-
Contrast should be at least 3:1 given that a skeleton is a graphic element conveying information and not a disabled control itself. Read this discussion ↗ ︎ for more. -
A skeleton animation should respect prefers-reduced-motion
. -
A user should be able to understand what is happening.
Results
Problem | Solution | Related Issue/MR |
---|---|---|
Contrast is less than 3:1. | Decrease opacity to increase contrast. | TBD |
Animation doesn't respect prefers-reduced-motion . |
Don't animate the skeleton if prefers-reduced-motion is set to true . |
TBD |
Not able to test what skeleton communicates in prod, but in GitLab UI it doesn't communicate anything about state to a user. | Include .gl-sr-only "Loading" text. |
TBD |
Pajamas docs mention the use of an ARIA live region, but this is likely not a good fit here. | Update skeleton docs to remove the live region recommendation. | TBD |
No way in GitLab UI to test full expected behavior | Similar to how you can launch a modal to test it's function, it'd be great to be able to simulate loading to test the entire skeleton loading experience. Example | TBD |
Completing the audit
After the solutions have been explored and applied, review the completing the audit section in the parent epic. Complete all items prior to closing this issue.
Resources
- https://adrianroselli.com/2020/11/more-accessible-skeletons.html
- https://github.com/w3c/wcag/issues/2048
accessibility ~"Category:FE/UX Foundations" component:skeleton-loader