Ensure the most important things are easy to find
Changes from doc: removed ‘stand out’ as other patterns like menus cover that. Q: Should we rename to include ‘scrolling’ specifically?
Description
Ensure key content is visible without scrolling.
User Story
As someone with learning difficulties I can easily see the import things that I want on a site as they are not hidden off screen.
What To Do
Make it easy to find the most important things on the page and ensure it is immediately and easily findable. Identify key content and its placement early in the design process. Often placing key content, or links to it, at the top of the page will make it easiest for users to find important content as no scrolling is required. Use clear headings, links or symbols to ensure they visually stand out.
Design for content to be viewed on a wide range of viewport sizes and with magnification or zoom. Use techniques such as “Responsive Design” and CSS Media Breakpoints to keep things easy to find at all scales.
How It Helps
People with low executive function, impaired memory, and other cognitive and learning disabilities may not be able to find features that require the use of the scroll bar.
Users who are unfamiliar with the page (or common design patterns) rely on prominent visual styling aids to locate important information.
More details
The amount of page visible before scrolling is dependent on a wide range of factors such as physical device size, resolution, pixel density, magnification and device setup. Careful design is required to accommodate these and keep important content easy to find.
Where possible, use site statistics to understand the technology users are using and keep this in mind when designing the page. Telemetry can also be useful in confirming what users find to be the most important features.
Examples
Sufficient
A newsletter ensures that important announcements can easily be seen amongst the stories without scrolling by using links at the top of the page and a good heading structure.
Insufficient
A form has a large text entry box but the submit button is hidden off screen.
Related Guidelines and Techniques
- WCAG Guideline 2.4.4 Link Purpose (Link Only)
- WCAG Guideline 2.4.6 Headings and Labels
- WCAG Guideline 2.4.10 Section Headings
- WCAG Guideline 3.2.3 Consistent Navigation
Related Patterns
- Make the purpose of sections clear
- Provide Search
- Use Symbols that help the user
- Make it easy to find help
Key Terms
? Coga is developing a list of terms so should we repeat here or simple link to it ?
Back to Top