Accessibility

Accessible grid requirements

Our default grid has been designed to meet accessibility requirements however keep these considerations in mind if you're modifying the Design System or creating a custom component.

WCAG  guidelines

WCAG Guideline 1.3 Adaptable

Content should be presented in different ways without losing information or structure. For grid layouts, this means ensuring that the structure remains intact across various devices and orientations.

1.3.4 Orientation (AA): Grid layouts shouldn't restrict their view and operation to a single display orientation, such as portrait or landscape, unless necessary. This ensures that content is accessible in both orientations, especially for people using mobile devices.

1.4 Distinguishable

Grid layouts should make it easier for users to see and hear content by ensuring a clear separation between the foreground and background.

1.4.10 Reflow (AA): Grid layouts should reflow content in a single column when users zoom in to prevent scrolling in multiple directions. This is especially important for people with low vision who may need to zoom in to read text.

2.4 Navigable

Grid layouts should be easy to navigate through, helping users find content and understand where they are.

2.4.3 Focus Order (A): When navigating through elements in grid layouts using a keyboard, the focus order should be logical and intuitive. This is particularly important for people who can't use a mouse and rely on a keyboard for navigation.

4.1 Compatible

Ensure that grid layouts are compatible with current and future user agents, including assistive technologies. Properly marking up and coding grid layouts can make them accessible to a wider range of user agents.

4.1.1 Parsing (A): Grid layouts should be created in a way that avoids major code errors. This ensures that they can be reliably interpreted by a wide variety of user agents, including screen readers and other assistive technologies.