Designers are trained in understanding visual hierarchy through typography. The use of size, value, typographic color, weight and spacing all allow us to manipulate our readers focus. Designers often ask what will our viewer see first? What has the most weight? We answer these questions and design accordingly.While these questions are essential to a web designer, purely aesthetic or visual solutions can come into conflict with the underlying hierarchy a web page requires. HTML (the basic language to make web pages) is a document that structures the content of a page. This structure has visual and design implications, but also has it’s own format and meaning. Heading levels should not be used for appearance or layout only, they are for organizing content.Any time a computer looks at your page, like a screen reader or search engine, they look at this heading structure. The following is a pretty concise definition of heading elements.
These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.-https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
The place designers often have trouble is in sticking to the order of heading ranks. For example, it may strengthen contrast to have an h3 follow the h1 in a design. The below example is a fictional section of a web page and a simplified version of the corresponding HTML structure. I’ve greyed out the irrelevant information.
<code>
<h1>Accessible Web Design</h1>
<img src=”perceivable.jpg” alt=”perceivable eye icon”>
<h3>Perceivable</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum eget nisi ac varius ac purus at eros tincidunt.</p>
<h5>Provide text alternatives</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum eget nisi ac varius ac purus at eros tincidunt.</p>
</code>
<code>
<h1>Accessible Web Design</h1>
<img src=”perceivable.jpg” alt=”perceivable eye icon”>
<h2>Perceivable</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum eget nisi ac varius ac purus at eros tincidunt.</p>
<h3>Provide text alternatives</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum eget nisi ac varius ac purus at eros tincidunt.</p>
</code>
The difference here may seem negligible, or may introduce additional problems for the designer, but the point is the page will be correctly structured. One cause of heading skipping might be that the heading structure is not adequately defined to begin with. So it’s always good to introduce a design system into your work-flow.
If a designer finds themselves breaking their own design system to jump heading levels, this may indicate the system itself isn’t working or needs to be reevaluated. This can become painful once things go to the client, so best to address this early on.
Most design tool like Sketch app, or the various Adobe products will have tools for defining text-styles. It’s worth taking time to set these tools up properly when beginning a new project. At KWALL we begin with organized style guides in our Sketch document and transition to a living styleguide at a later stage in our design process.
The important thing is define a system and stick to it when it comes to heading structures. Or, really with anything you design. The order of that structure isn’t purely decorative, it is used to organize the document as well. Fortunately for us, our developer counterparts won’t code a semantically incorrect website. But, it will make life a lot easier to deal with things like this in the design stage of a project.
Further Reading
Web Accessibility Tutorials: Headings WebAIM: Semantic Structure HTML Living Standard
