Section Headings and Semantic Hierarchy

Did you know that to build accessible user interfaces, we need to have mapped out the semantic structure and hierarchy of our page long before writing the first line of code?

Semantic HTML is crucial to accessibility in a variety of ways, but there’s more to it than just which tags you use for which element. In this lesson, we’ll be focusing on the importance of semantic hierarchy and organization when it comes to designing and laying out the elements on the page.

Enhancing UX with element sequence

WCAG Guideline 1.3 is all about adaptability, specifically creating content that can be presented in different ways without the loss of information or structure. In practice, this means that no matter how the page is rearranged (via screen size, zoom, or magnification) or interpreted via assistive technology (such as a screen reader), there are still ways to communicate the page’s structure.

Before digging into the implementation of that guideline, let’s take a step back to understand why it’s so important in the first place. After all, as long as all the information is being communicated, the order or layout of it shouldn’t make such a big difference, right? Wrong!

Understanding visual hierarchy

In design, there’s a concept known as the visual hierarchy, which has to do with the way we communicate the relative importance of various elements based on their placement on the page.

Visual hierarchy creates contrast in a design by combining the use of size, placement, and color to manipulate the visual weight of each element and help the most important elements stand out. This gives the designer control over the balance of the page and the order in which the users will notice each element. When you look at a web page, what do you notice first? Where are your eyes drawn? These things aren’t left to chance. We can control them by ...