Unit 2: Landmarks and structures

Pages need structure

Without structure, you just have tag soup.

Structure helps users, screen readers, search engines, and you.

HTML is a hierarchy, not just a bunch of tags.

Landmarks

Define sections of the page.

Landmark regions group related content.

The structure matters

Screen readers allow jumping by region, but only if these regions exist.

Accessible names are important for these sections so users can understand what they are.

Header element or banner role

or

or

Usually a header for the entire page, but can also be a header for a section or article.

Nav element or navigation role

or

or

Site or section navigation. Usually contains a list of links.

If there are more than one, be sure to assign accessible names.

Accessible names for landmark regions

Use accessible names to distinguish multiple regions of the same type.

Main element or main role

or

or

The core content of the page.

Aside element or complementary role

or

or

Tangential content, callouts, ads, search, etc.

Footer element or contentinfo role

or

or

Usually the footer for the entire page, but can also be a footer for a section or article.

How they define the structure of the page

These elements are not for styling - they are for imparting meaning to different bits of content.

All of the content on the page should be inside one of these containers.

nav can be inside the header, footer, aside, etc. But the others should be at the top level of the document and not nested inside one another.

Section and article

Independent content blocks.

section is a meaningful group of content, e.g. the hero section.

article is a complete composition contained in the document, e.g. a blog post.

Sections and articles can have their own internal structure

Can be helpful for organizing content like:

• Headlines and subheadlines for that particular bit of content.
• Bylines, dates, and other metadata.
• Section or article specific navigation or summaries.

Semantic elements help you create nested meaning — not just layout.

What about role="region"?

• Creates a landmark for a section of the page.
• Screen readers can navigate to it, but only if it has an accessible name.
• Most of the time, you probably don't need it - use semantic elements first.
• Generally only to be used for a custom component that has no semantic tag available.

Headings build the outline

Don't use headings just for size - use them for structure.

Don't skip levels.

Use CSS to adjust style and size as needed.

The humble div

Neutral container, has no semantic meaning.

Can be styled with CSS, used to group content.

Not every <div> is bad - but they should be intentional and deliberate.

Unit 2: Landmarks and page structure

Key takeaways:

1. Landmarks are like signposts.
2. Semantic regions help users find their way around and understand how the content is structured.
3. Headings create the outline.
4. This is often the most overlooked layer of accessibility, but one of the easiest to get right if you plan ahead.