Headings

Headings are used to name sections and provide structure to webpages. Correct heading levels helps users to understand the content structure of a webpage.

NOTE:

New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.

Text which serves the purpose of explaining the content of the section briefly, SHOULD be marked as headings.
Headings SHOULD be descriptive and represent the content given in that section.
Headings SHOULD be brief, clear, and unique.
For navigation and other fixed sections of a page, the heading levels SHOULD be consistent across all pages.
Headings SHOULD be marked up using <h1> to <h6> depending on what heading level needs to be given.
The main heading of a page SHOULD be marked with the <h1> element. For example,
```
<h1>Main heading of the page</h1>
```
The subheadings SHOULD be marked with <h2> to <h6> elements.
Alternatively, role="heading" and aria-level attribute CAN be used to mark-up headings.
- The value of aria-level attribute SHOULD be from 1 to 6.
  For example,
```
<div role="heading" aria-level="1">Main heading of the page</div>
```
Though ARIA CAN be used as an alternative, it is advisable to use the correct semantic HTML element since ARIA is not compatible across different combinations of browsers and screen readers.
As a best practice, a page SHOULD consist of only one <h1> explaining the whole page content briefly.
- If the page content has been coded using different <section> elements, multiple <h1> elements are allowed.
In case of modal dialogs, the dialog title SHOULD be marked with <h2> element.
In case of non-modal dialogs, the heading levels SHOULD be followed as per the page hierarchy.
Ensure that content is NOT marked up as a heading.
Heading levels SHOULD NOT be skipped in a webpage.
Ensure that the text that is defined as a heading meets the contrast requirements.
- For standard text, the foreground and background color should meet the contrast requirement of 4.5:1 ratio.
- For large text i.e., 18pts or 14 pts and bold, the foreground and background color should meet the contrast requirement of 3:1 ratio.
- In case the heading is defined as user interface control, the contrast requirement of 3:1 ratio should be met for the focus indicator.

DO NOT style text to look like headings using CSS styles unless the headings are implemented using ARIA i.e., role="heading" and aria-level attribute.
For example,

<h1>Main Heading</h1>
<h2>Learning Platform</h2>
<h3>Access your learning platform</h3>
...
<h4>My Lab</h4>
...
<h4>Mastering</h4>
...
<h2>Mondly by Pearson included with your eTextbook</h2>
...
<h3>Get fluent faster with our language learning app</h3>
...

<h1>Headings</h1>
<h2>Learning Platforms</h2>
<h3>Access your learning platform</h3>
<div class="cards">
    <article class="card reorder">
        <h4><a href="#" id="cardtitle2">MyLab</a></h4>
        <img src="https://www.pearson.com/content/dam/global-store/en-gb/1600x800-AL1526030.jpg.transform/big-size-xl/img.jpeg" alt="" loading="lazy" width="500" height="200">
        <p>
            <a href="https://portal.mypearson.com/portal">
                Sign in <span aria-hidden="true">&#62;</span>
            </a>
            <a href="https://www.pearson.com/us/higher-education/products-services-teaching/digital-learning-environments/mylab.html">
                Discover MyLab<sup><span>&reg;</span></sup> <span >&#62;</span>
            </a>
        </p>
    </article>

    <article class="card reorder">
        <h4><a href="#" id="cardtitle1">Mastering</a></h4>
        <img src="https://www.pearson.com/content/dam/global-store/global/educator/1600x800-shutterstock-1996365041.jpg.transform/big-size-xl/img.jpeg" alt="" loading="lazy" width="500" height="200">
        <p>
            <a href="https://portal.mypearson.com/portal" aria-label="Sign in to Mastering">
                Sign in <span aria-hidden="true">&#62;</span>
            </a>
            <a href="https://www.pearson.com/us/higher-education/products-services-teaching/digital-learning-environments/mastering.html">
                Discover Mastering<sup><span>&reg;</span></sup> <span aria-hidden="true">&#62;</span>
            </a>
        </p>
    </article>

    <article class="card reorder">
        <h4><a href="#" id="cardtitle3">Revel</a></h4>
        <img src="https://www.pearson.com/content/dam/global-store/global/educator/1600x800-shutterstock-1170031999.jpg.transform/big-size-xl/img.jpeg" alt="" loading="lazy" width="500" height="200">
        <p>
            <a href="https://console.pearson.com/signin">
                Sign in <span aria-hidden="true">&#62;</span>
            </a>
            <a href="https://www.pearson.com/us/higher-education/products-services-teaching/digital-learning-environments/revel.html">
                Discover Revel<sup><span>&reg;</span></sup> <span aria-hidden="true">&#62;</span>
            </a>
        </p>
    </article>
</div>
<div class="decorative-image-container" role="presentation">
    <img src="https://www.pearson.com/content/dam/global-store/global/pearplus/Mondly/mondly-dark-1638x861.png.transform/big-size-xl/img.png" alt="" class="decorative-image">
    <div class="content-tile-text rte-container">
        <h2>Mondly by Pearson included with your eTextbook</h2>
        <h3>Get fluent faster with our language learning app</h3>
        <ul>
            <li>Enjoy free, unlimited access to 41 languages</li>
            <li>Get quick lessons designed by world-class linguists</li>
            <li>Practice your conversations with chatbots</li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="column">
        <h2 id="Learners-heading">Learners</h2>
        <p>
            Find everything you need to help you with your studies and in the
            format you want
        </p>
        <a href="https://www.pearson.com/learner.html">Shop for students</a>
    </div>

    <div class="column">
        <h2 id="educators-heading">Educators</h2>
        <p>
            Whether planning a lesson or training staff, we have the material to
            help you
        </p>
        <a href="https://www.pearson.com/educator.html">
            Discover teaching material
        </a>
    </div>

    <div class="column">
        <h2 id="practitioners-heading">Practitioners</h2>
        <p>
            From clinical diagnostics to professional assessment and admission
            testing, find what you need
        </p>
        <a href="https://www.pearson.com/educator.html">
            Discover teaching material
        </a>
    </div>
</div>
<div class="center">
    <h2>Careers</h2>
    <p>
        At Pearson, we add life to a lifetime of learning so everyone can
        realise the life they imagine. We do this by creating vibrant and
        enriching learning experiences designed for real-life impact.
    </p>
</div>
<div class="center">
    <h3>Meet our people</h3>
    <p>
        For those who want progress, not just potential, Pearson is your partner
        in the moments that matter, proudly creating experiences that are full
        of life, so yours can be too. Learn more about the people who help bring
        learning to life.
    </p>
    <a class="link button-primary" href="https://plc.pearson.com/careers/people-of-pearson">
        <span>Meet our People</span>
    </a>
</div>
<div class="decorative-image-container" role="presentation">
    <img src="https://plc.pearson.com/sites/pearson-corp/files/careers-dei.jpg" alt="" class="decorative-image">
    <div class="content-tile-text rte-container">
        <h3>Diversity, Equity & Inclusion</h3>
        <p>
            We believe we’re at our best when we harness the unique skills,
            perspectives and backgrounds of every employee.
        </p>
        <a class="link button-primary" href="https://plc.pearson.com/en-GB/careers/diversity-equity-inclusion">
            <span>Diversity, Equity &amp; Inclusion</span>
        </a>
    </div>
</div>

.cards {
    flex: 0 1 60%;
    margin-right: 20px;
}

.cards h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color:rgb(0, 102, 204);
}

.cards p {
    font-size: 16px;
    line-height: 1.5;
}

main {
    margin: 20px;
    padding: 20px;
}

.cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cards > * { flex: 0 1 14em; }

.card {
    margin: .75em;
    padding: .75em;
    border-radius: 3px;
    border: 2px #ccc solid;
    border-radius: .6em;
    background-color: white;
    position: relative;
}

img {
    width: 100%;
    height: auto;
}

.reorder {
    display: flex;
    flex-direction: column;
}

.reorder img {
    max-width: 100%;
    order: -1;
}

.cards > * a {
    display: block;
    color: rgb(0, 102, 204);
}

.cards h2 > a { text-decoration: none; }

article:hover { box-shadow: 0 0 0 0.25rem; }

.decorative-image {
    width: auto;
    height: 200px;
    margin: 20px;
}

.decorative-image-container { display: flex; }

.column {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-top: 6px solid;
    border-color: #0086b1;
}

@media (min-width: 768px) {
    .column {
        width: 30%;
        float: left;
        margin: 10px;
    }
}

@media (max-width: 767px) {
    .row {
        display: flex;
        flex-direction: column;
    }
}

#Learners-more,
#educators-more,
#practitioners-more {
    display: none;
}

.button-primary {
    background-color: #ae367e;
    color: #fff;
    padding: 13px 25px;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 2px;
    display: inline-block;
    margin-top: 20px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px !important;
}

.center { text-align: center; }

h2 { font-size:2em; }

h3 { font-size:1.5em; }

Headings

Learning Platforms

Access your learning platform

Mondly by Pearson included with your eTextbook

Get fluent faster with our language learning app

Enjoy free, unlimited access to 41 languages
Get quick lessons designed by world-class linguists
Practice your conversations with chatbots

Learners

Find everything you need to help you with your studies and in the format you want

Shop for students

Educators

Whether planning a lesson or training staff, we have the material to help you

Discover teaching material

Practitioners

From clinical diagnostics to professional assessment and admission testing, find what you need.

Discover teaching material

Careers

At Pearson, we add life to a lifetime of learning so everyone can realise the life they imagine. We do this by creating vibrant and enriching learning experiences designed for real-life impact.

Meet our people

For those who want progress, not just potential, Pearson is your partner in the moments that matter, proudly creating experiences that are full of life, so yours can be too. Learn more about the people who help bring learning to life.

Meet our People

Diversity, Equity & Inclusion

We believe we’re at our best when we harness the unique skills, perspectives and backgrounds of every employee.

Diversity, Equity & Inclusion

Headings

Implementation

Why is it important

Working Example