Infinite scroll > Accessibility Audit
Refer to the parent epic description for more information on this effort.
Purpose
Audit the accessibility of the GitLab UI Infinite Scroll component in all variants and states
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 infinite scroll 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)
- All 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.
-
All actions and functionality can be done with a keyboard. -
Loading state is announced by a screen reader. -
Infinite scroll doesn't prevent a user from easily tabbing to content after it in the DOM. -
Browser back button is able to return a user to the previous scroll area.
Results
Infinite scroll isn't an accessible pattern and should be replaced with a "load more" pattern. As-is, there isn't really anything that can be tested in GitLab UI since the example list of items doesn't have anything focusable, but even so there's no indication of the number of results or expected/actual behavior.
Infinite Scrolling and Accessibility (It’s Usually Bad), has a list of the issues with infinite scroll and additional resources.
A "load more" pattern gives the user control and allows them to opt in to more results being shown and to have a clear sense of what's happening.
Here are a few examples worth considering to replace the current behavior:
- https://bbc.github.io/gel/components/load-more/
- https://www.aleksandrhovhannisyan.com/blog/load-more-button-focus/
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.
accessibility Category:Design System component:infinite-scroll