What is Page Structure?
Page structure is the layout and organization of content elements on your webpage. The image below depicts a simple page layout.
Page structure is provided by landmarks that contain elements like navigation systems, paragraphs, headings, and lists.
Assistive technology relies on landmarks to help users understand the layout of a document and navigate to specific sections. These landmarks act like signposts, making it easier for people with disabilities to identify the purpose of different document parts and quickly find the necessary information.
Proper page structure can significantly enhance your website's accessibility by making the content programmatically determinable by screen readers. It also improves scan-ability, readability, SEO, and user engagement.
How Do I Ensure Proper Page Structure?
For the purposes of this post, I am going to focus on 4 key landmarks needed for proper page structure. Those landmarks are:
- header
- navigation bar
- main content
- footer
Header
The header element, not to be confused with head or heading elements, is the first key landmark. The header has a built-in ARIA role of banner. The header element is where users typically will find the organization's logo and main navigation system. It is very similar to the footer element but generally the first landmark for a page and should provide general consistency across the website's pages.
HeadThe head element, which is placed outside the <body> tag, contains metadata about the document, such as the title, required scripts, and style sheets. The head element is not the same as the header element and is not a key landmark.
The page title is the only information in the head tag that can be seen on the browser tab or programmatically determined by a screen reader. It helps website visitors determine the page's purpose and what content to expect.
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Simple Page Structure</title>
</head>
Navigation Bar
Use the HTML5 <nav> landmark to identify your website's navigation. Website navigation acts like a roadmap, using buttons, menus, and links to steer users to different parts of the website.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
A well-structured navigation system should prioritize a user's experience by making it easy and intuitive to find what they want. Here are some key characteristics:
- Clear and Simple: Keep the navigation menu concise and clear, with descriptive labels .
- Logical Organization: The navigation should follow a logical flow that users can understand. Group related content together.
- Consistency: Maintain a consistent layout and navigation design throughout your website. Users should always know where to find the navigation menu and how to use it, regardless of the page they're on.
- Accessibility: Use proper coding techniques and consider features like keyboard navigation for screen reader users, focus size, location , and color , and the use of skip links .
Main Content
According to the World Wide Web Consortium, W3C, the main content landmark of your webpage can include the following structural elements: articles, sections, paragraphs, lists, quotes, figures, images, illustrations, and tables. I’m including one more element, the essential <H>.
<main>
<p>This is the main content area of the page.</p>
</main>
I've chosen those two elements because testing for accessibility was a core responsibility in my previous role in higher education. Among the most frequent accessibility roadblocks I found were issues with headings, lists (and alt text for images, but that's a different blog post ).
Headings
Headings help people find the information they need. Readers can quickly understand:
- what they are looking at,
- what is most important,
- whether or not they want to read the stories.
A good heading structure reduces cognitive load and provides clear way-finding cues for everyone.
Each webpage should have a single main heading, using the <h1> tag, that captures the overall topic or purpose of the page. Subsequent headings, from <h2> to <h6>, should follow a clear hierarchy, breaking down the content into smaller and more specific sections.
Proper heading hierarchy. Source: WebAIM
Lists
Now, let’s take a look at <lists>. The most prevalent issue I found regarding using <lists> on a website is that the list wasn’t appropriately structured; therefore, it wasn’t an actual list. Putting a bullet character in front of each sentence in a paragraph does not make it a list.
A list should convey hierarchical content. There are three types of lists: ordered lists, unordered lists, and description lists.
An ordered list is one that is in sequential order. In this list, the order of operation determines the outcome. Recipes are the best example of ordered lists:
<ol>
<li>Mix</li>
<li>Bake</li>
<li>Eat</li>
</ol>
In an unordered list, the order does not affect the outcome. A shopping list is a great example of an unordered list:
<ul>
<li>Bananas</li>
<li>Flour</li>
<li>Milk</li>
</ul>
Description lists are for key-value pairs, such as terms and definitions. For example:
<dl>
<dt> Captions </dt>
<dd>Text-based alternatives of the audio and/or video content.</dd>
<dt> WCAG </dt>
<dd>Web Content Accessibility Guidelines</dd>
</dl>
Note that the terms (<dt>) are typically bold, and the descriptions (<dd>) are of normal weight and indented.
Footer
A webpage footer is where users typically look for specific items like a copyright notice, a link to a privacy policy, an accessibility policy, a sitemap, contact information, social media icons, and an email sign-up form. The footer acts as a visual cue to indicate the end of a webpage. Because <footer> is a landmark, it is programmatically determinable by screen readers.
Proper page structure functions like an outline, breaking content into distinct sections with informative headings. It is the foundation of an accessible website, and well-structured webpages benefit all users, not just those with disabilities.
