heading-order
Heading levels should only increase by one
Description
Headings communicate the organization and hierarchy of the content on the page. A good headings structure should reflect the hierarchy of the content on the page, similar to a table of contents. Therefore, the headings levels must be consecutive so that it is clear to all users what is the context and importance of each piece of content.
Web browsers and assistive technologies can use headings to provide in-page navigation; a sequential also provides a more accessible and intuitive way (particularly for screen reader users) to navigate directly to pieces of content that are relevant to what they are looking for.
Quick Fixes
Ensure that the heading levels are consecutive.
Below there are two examples of heading structure taken from real websites.
The first example demonstrates an optimal structure and the second one demonstrates a structure that will make it hard for users to navigate and understand the page content.
*(the elements on ther examples were stripped from most of their class names and other attributes on purpose)
Optimal Headings structure:
1<div role="main">2 <h1>...</h1>3 <p>...</p>4 <p>...</p>5 <p>...</p>6 <ul>7 <li>...</li>8 <li>...</li>9 <li>...</li>10 <li>...</li>11 <li>...</li>12 </ul>13 <p>...</p>14 <h2>...</h2>15 <p>...</p>16 <ul>17 <li>...</li>18 <li>...</li>19 </ul>20 <h2>...</h2>21 <h3>...</h3>22 <p>...</p>23 <p>...</p>24 <h4>...</h4>25 <p>...</p>26 <h2>...</h2>27 <p>...</p>28 <ol>29 <li>...</li>30 <li>...</li>31 <li>...</li>32 </ol>33 <blockquote>...</blockquote>34 <h2>...</h2>35 <h3>...</h3>36 <!-- The Rest of The Content -->37</div>
Bad Headings Structure::
1<header>2 <div>3 <a href="/">4 <img src="image.svg" alt="..." title="...">5 </a>6 </div>7 <nav>8 <!-- Navigation menu content -->9 </nav>10 <div class="header__content">11 <h1>...</h1>12 <h4>...</h4>13 </div>14 <div>15 <h4>...</h4>16 <!-- Here there is a form -->17 </div>18</header>19<div class="container">20 <main role="main">21 <section>22 <div class="wrapper">23 <aside>24 <h4>...</h4>25 <!-- Aside Content -->26 </aside>27 <h4>...</h4>28 <!-- Content -->29 </div>30 </section>31 <section>32 <div class="wrapper">33 <h1>...</h1>34 <hr>35 <div>36 <h4>...</h4>37 <h2>...</h2>38 <h4>...</h4>39 <p>...</p>40 </div>41 <hr>42 <div>43 <p>...</p>44 <a href="...">...</a>45 </div>46 </div>47 </section>48 <section>49 <div class="wrapper">50 <h4>...</h4>51 <ul>52 <!-- list content -->53 </ul>54 <a href="/...">...</a>55 <h4>...</h4>56 <ul>57 <!-- list content -->58 </ul>59 </div>60 </section>61 <section>62 <div class="wrapper">63 <h3>...</h3>64 <h5>...</h5>65 <!-- Rest of the section content -->66 </div>67 </section>68 </main>69</div>
How Users Are Affected
Some users, and particularly screen reader users may not have an optimal experience perceiving the content structure and navigating the page.
WCAG Success criteria
This issue might cause elements to fail one or more of the following Success criteria: N/A (Best Practice)