Clear Layout and Design

Web accessibility is essential for people with disabilities and useful for all. Learn about the impact of accessibility and the benefits for everyone in a variety of situations.

Video on Clear Layout and Design

This video information is available as a Text Transcript with Description of Visuals below.

What is “Clear Layout and Design”?

The different parts of a web page must be easy to locate and identify. This includes navigation menus, links, and text sections. These should be at predictable locations and consistently identified. Also form labels and instructions have to be clearly associated with their controls.

Who depends on this feature?

People with low vision who are using screen magnification and only see a portion of the screen at a time.
People with cognitive and learning disabilities who need clarity and consistency to orient themselves on a website.

What are the additional benefits?

Content is more usable for people who are new to the particular website or application.
Content is more usable for people who are not confident using computers and the web.
Content is more usable for mobile device users who are seeing it on smaller screens, especially if they are in a hurry or distracted.
Content and functionality is easier to locate and identify by most users.

What needs to happen for this to work?

Design clear structure, both visually and through the markup. For example, make it easy to distinguish sections such as navigation, group related controls in a form, and provide headers to identify groups of information. Provide consistent presentation and behavior of web pages across a website.

Learn more

Accessibility Principle:
- Users can easily navigate, find content, and determine where they are
- Content appears and operates in predictable ways
Getting Started:
Easy Check:
- Forms, labels, and errors
User Story:
Web Content Accessibility Guidelines (WCAG Overview):
- Success Criteria relating to “layout”
Tutorial:
- Page Structure - Web Accessibility Tutorials (draft)

Text Transcript with Description of Visuals

Audio	Visual
Web Accessibility Perspectives: Clear Layout and Design	Web Accessibility Perspectives: Clear Layout and Design
Poor layout can be very frustrating.	A man in a kitchen is looking for things to make a coffee. The man is frustrated about not finding what he is looking for.
And the same applies to the Web. Good design involves good layout and that means a better user experience.	The man rearranges the kitchen in a time-lapse.
This includes clear headings, navigation bars, and consistent styling.	The man is now browsing a badly laid out pizza delivery website and is shaking his head.
Any web user will get frustrated with bad layout and design.	A woman is using the same complex website with screen magnification. She only sees a portion of the screen at a time, so the website appears even more confusing.
Complex layouts also make finding information difficult or impossible for people with visual disabilities.	The woman is shaking her head and is unable to use that website.
And they are confusing for people with cognitive and learning disabilities who need clarity and consistency of the presentation.	The man calls a friend over to help.
Bad design also impacts anyone who isn't particularly confident around computers.	The friend is just as confused and navigates to a different, better pizza website.
Web accessibility: Essential for some, useful for all.	This second website is much clearer and easier to use. They are both happy. The woman using screen magnification has also used that website and is delightfully eating a pizza.
Visit w3.org/WAI/perspectives for more information on Clear Layout and Design	Visit w3.org/WAI/perspectives for more information on Clear Layout and Design. W3C Web Accessibility Initiative logo