Overview
Page size and layout determines how a screen reader relays information to the user. A clear, logical layout also makes the content easier to visually navigate and understand.
Learn how to create accessible page layouts in the Content Style Guide.
Page size
- Design your pages to work when zoomed to 200 percent. You can rely on the web browser to do this but check that the page displays well. It's best to scale the entire page, rather than just the text elements, to preserve a good layout.
- Design your pages to be responsive, so horizontal scrolling isn't needed at 320 pixels page width. If scrolling is unavoidable, you can skip this requirement. For example, with a large table of data.
- Truncate content when zoomed in but make sure there's a way to view the full, untruncated content.
Page layout
- Ensure content reflows into a single column, so that scrolling in more than one direction isn't necessary. To test this, set the browser window to 1280 pixels wide and zoom the page content to 400 percent.
- Design your pages to work in both portrait and landscape orientation.
- Don't use multi-column layouts.
- Don't use layouts with more than one content area.
Page elements
- If you indicate mandatory fields, explain what the indicator means.
- Make sure elements with the same functionality are identified in the same way in all places. For example, a search box is always called Search.
- Use predictive text to help the user complete search terms.
- Use labels and hint text so the user knows what data and format is expected.
- Keep labels short and precise.
- Use spelling and grammar checks in form fields.
Learn how to write accessible content.
Resources
- Using a technology that has commonly-available user agents that support zoom
- WCAG 2.1 Understanding success criterion 1.4.4: Resize text
- WCAG 2.1 Understanding success criterion 1.3.4: Orientation
- WCAG 2.1 Understanding success criterion 1.4.10: Reflow
- WCAG 2.1 Understanding success criterion 1.3.2: Meaningful sequence