Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Section container

Guidance Code Accessibility

Easy to use for everyone

Section containers align content on the page, which helps to form a constant edge from which to read from. This aids swift readability as a user can scan back to the same position to start the next line of content. It supports standard reading scanning patterns by creating a consistent baseline.

The width of a section container is contrained to a maximum width on large devices in order to keep the line length to a readable size.

Consistent alignment also reduces cognitive load when trying to understand content on a page and helps to associate elements to one another through proximity and symmetry.

Based on

  • Text Scanning Patterns: Eyetracking Evidence (nngroup.com) , accessed December 2022.

  • What are the Gestalt Principles? | IxDF (interaction-design.org) , accessed December 2022.

Testing

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.


Last reviewed 15 April 2024 .
Navigated to Section container - Intelligence Community Design System