Accessible scrollable containers ensure all users can navigate content effectively, regardless of input method or assistive technology.
Scrollable containers support standard keyboard scrolling.
Users can scroll content using keyboard.
- Arrow Keys: Scroll content in the direction of the arrow
- Page Up/Page Down: Scroll by page
- Home/End: Scroll to beginning or end
- Space: Scroll down (when focused)
- Shift + Space: Scroll up (when focused)
Focus moves appropriately within scrollable content.
Focusable elements within scrollable content remain keyboard accessible, and focus moves with content as users scroll.
Scrollable containers use appropriate ARIA attributes when needed.
Scrolling areas are properly identified.
Use role="region" and aria-label when the scrollable area represents a significant page region.
Use live regions for dynamic content updates.
For content that updates dynamically (like chat feeds), use role="log" or role="status" with appropriate aria-live values.
Scrollable containers are accessible to screen reader users.
Screen readers announce scrollable content appropriately.
Screen readers navigate through scrollable content naturally, announcing content as users scroll or navigate with keyboard.
Screen readers communicate scroll position when relevant.
Use aria-posinset and aria-setsize for list items to communicate position within the scrollable list.
Ensure focus remains manageable within scrollable content.
Ensure focus indicators remain visible during scrolling.
Focus indicators remain visible as users scroll, ensuring keyboard navigation remains clear.
Content scrolls into view when focused elements receive focus.
When focus moves to elements within scrollable content, browsers automatically scroll focused elements into view.
Ensure scrollbars remain accessible when visible.
Scrollbars provide visual feedback about scroll position.
Visible scrollbars help users understand content length and current position, improving navigation for all users.
Custom scrollbars maintain accessibility.
Small scrollbars remain keyboard accessible and provide appropriate visual feedback.
Test scrollable containers with screen readers to ensure proper navigation.
Expected behavior:
- Screen readers navigate through content normally
- All content is accessible via keyboard navigation
- Scrollbars don't interfere with content navigation
- Focus moves correctly within scrollable area
Expected behavior:
- New content added to the bottom is announced
- Screen readers receive updates when content changes
- Scroll position updates are communicated appropriately