Page Title

Page title is the first piece of information available to users in a page. Screen readers also read the title of the page when a user loads a page.

Code inspector with markup for page title highlighted — Figure 2 Example of page title highlighted in the DOM for 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.

Page title SHOULD be defined using <title> element.

<title> element SHOULD be nested within the <head> element.
For example,

<head>
    (…)
    <title>The world’s learning company | Pearson</title>
    (…)
</head>

Page title SHOULD be unique, concise, and descriptive.
The same page title SHOULD NOT be used for multiple pages.
Page titles SHOULD NOT be empty.
In case of single page applications (SPA), the page title SHOULD dynamically get updated as per the respective page content.
As a best practice, the page title SHOULD be frontloaded i.e., title followed by the website name. For example, “The world’s learning company | Pearson”.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home | School Accessibility Services Team </title>
    <link rel="stylesheet" href="/resources/developers-corner/reference-library/page-title/style.css">
    <script src="page-title.js"> </script>
</head>
<body>
<div id="nav-menu" role="banner">
    <div class="nav-container">
        <div class="nav-start">
            <a class="logo" href="/">
                <span>Pearson </span>
            </a>
            <div role="navigaton" aria-label="Primary" class="menu">
                <ul class="menu-bar webpages">
                    <li> <a class="nav-link" href="home.html">Home </a> </li>
                    <li> <a class="nav-link" href="about.html">About </a> </li>
                    <li>
                        <a class="nav-link" href="services.html">Services </a>
                    </li>
                    <li>
                        <a class="nav-link" href="resources.html">Resources </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./index.php">
                            Page Title – Developer’s Reference
                            Library
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div aria-label="Breadcrumb" class="nav-end">
            <button id="hamburger" aria-label="hamburger" aria-haspopup="true" aria-expanded="false">
                <i class="bx bx-menu" aria-hidden="true"> </i>
            </button>
        </div>
    </div>
</div>

<div role="main" id="main">
    <div class="contentwide home page" id="page1">
        <section id="contentStart" class="pageContent">
            <h1>Welcome to Accessibility for Pearson Assessments </h1>
            <p>
                Pearson is the world’s learning company with expertise in
                a variety of assessments. Our products and services are used by
                millions of people around the world every day. Accessibility in
                our products and services means that websites, tools, materials
                and technologies are designed and developed so that people with
                disabilities can use them. For this reason, we have built a
                dedicated team of accessibility specialists to guide and focus
                our efforts to create accessible solutions that work well for
                everyone.
            </p>
            <h2 id="learnMore" style="margin-top: 40px;">
                Learn More about Pearson's Accessibility Team for Assessments
            </h2>
            <p>
                Pearson’s Accessibility Team for Assessments provides
                consultative services to product and program teams to support
                the development and delivery of accessible products and
                services. Learn more about the Assessments business, our
                approach to accessibility and the structure of our accessibility
                team.
            </p>

            <section class="cards" aria-labelledby="learnMore">
                <article class="card" id="assessments-business-card">
                    <div class="card-details">
                        <h3 class="seperator1">Assessments Business </h3>
                        <p>
                            Pearson is the world’s leading learning
                            company with expertise in a variety of assessments.
                        </p>
                    </div>
                    <div class="button">
                        <a href="#">Business Structure </a>
                    </div>
                </article>
                <article class="card" id="accessibility-statement-card">
                    <div class="card-details">
                        <h3 class="seperator2">Accessibility Statement </h3>
                        <p>
                            Learn more about how Pearson Assessments is
                            addressing accessibility.
                        </p>
                    </div>
                    <div class="button">
                        <a href="#">Accessibility Statement </a>
                    </div>
                </article>
                <article class="card" id="accessibility-team-card">
                    <div class="card-details">
                        <h3 class="seperator3">Accessibility Team </h3>
                        <p>
                            Pearson Assessments has a team dedicated to
                            accessibility services.
                        </p>
                    </div>
                    <div class="button">
                        <a href="#">Team Structure </a>
                    </div>
                </article>
            </section>
        </section>
    </div>
</div>
<div class="footer" role="contentinfo" id="footer">
    <div role="navigaton" aria-label="Secondary">
        <ul class="footer-link webpages">
            <li> <a href="#" id="nav-page5">Sitemap </a> </li>
            <li> <a href="#">Terms of Use </a> </li>
            <li> <a href="#">Patent Notice </a> </li>
            <li> <a href="#">Accessibility Statement </a> </li>
            <li> <a href="#">Accessibility Conformance Reports </a> </li>
            <li> <a href="#">Contact Us </a> </li>
        </ul>
    </div>
    <p>© 1996–2023 Pearson All rights reserved. </p>
</div>
<div id="loader">
    <div class="spinner"> </div>
</div>
<button id="scroll-top-btn" class="scroll-top-btn" title="Go to top">
    <span class="visually-hidden">Back To Top </span>
    <i class="fas fa-arrow-up"> </i>
</button>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About | School Accessibility Services Team</title>
    <link rel="stylesheet" href="/resources/developers-corner/reference-library/page-title/style.css">
    <script src="page-title.js"></script>
</head>
<body>
<div id="nav-menu" role="banner">
    <div class="nav-container">
        <div class="nav-start">
            <a class="logo" href="/">
                <span>Pearson</span>
            </a>
            <div role="navigaton" aria-label="Primary" class="menu">
                <ul class="menu-bar webpages">
                    <li><a class="nav-link" href="home.html">Home</a></li>
                    <li><a class="nav-link" href="about.html">About</a></li>
                    <li>
                        <a class="nav-link" href="services.html">Services</a>
                    </li>
                    <li>
                        <a class="nav-link" href="resources.html">Resources</a>
                    </li>
                    <li>
                        <a class="nav-link" href="./index.php">
                            Page Title – Developer's Reference
                            Library
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div aria-label="Breadcrumb" class="nav-end">
            <button id="hamburger" aria-label="hamburger" aria-haspopup="true" aria-expanded="false">
                <i class="bx bx-menu" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

<div role="main" id="main">
    <div class="container page">
        <section class="pageContent">
            <h1>About the Accessibility Team for Assessments</h1>
            <h2>Our Belief</h2>
            <p>All people have worth and dignity and deserve equitable access.</p>
            <h2>Our Vision</h2>
            <p>Achieve equitable access to our products and services for everyone, including people with sensory, physical, and cognitive impairments.</p>
            <h2>Our Mission</h2>
            <p>Support the development of accessible products and services by removing access barriers and creating accessible solutions that work well for everyone.</p>

            <h2>Functionality</h2>
            <p>The Accessibility Team for Assessments has been established to help teams design products that all people can use to improve their lives through learning, including people with disabilities. To accomplish this, we provide support in three key areas:</p>
        </section>
    </div>

</div>
<div class="footer" role="contentinfo" id="footer">
    <div role="navigaton" aria-label="Secondary">
        <ul class="footer-link webpages">
            <li><a href="#" id="nav-page5">Sitemap</a></li>
            <li><a href="#">Terms of Use</a></li>
            <li><a href="#">Patent Notice</a></li>
            <li><a href="#">Accessibility Statement</a></li>
            <li><a href="#">Accessibility Conformance Reports</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <p>© 1996–2023 Pearson All rights reserved.</p>
</div>
<div id="loader">
    <div class="spinner"></div>
</div>
<button id="scroll-top-btn" class="scroll-top-btn" title="Go to top">
    <span class="visually-hidden">Back To Top</span>
    <i class="fas fa-arrow-up"></i>
</button>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Services | School Accessibility Services Team</title>
    <link rel="stylesheet" href="/resources/developers-corner/reference-library/page-title/style.css">
    <script src="page-title.js"></script>
</head>
<body>
<div id="nav-menu" role="banner">
    <div class="nav-container">
        <div class="nav-start">
            <a class="logo" href="/">
                <span>Pearson</span>
            </a>
            <div role="navigaton" aria-label="Primary" class="menu">
                <ul class="menu-bar webpages">
                    <li><a class="nav-link" href="home.html">Home</a></li>
                    <li><a class="nav-link" href="about.html">About</a></li>
                    <li>
                        <a class="nav-link" href="services.html">Services</a>
                    </li>
                    <li>
                        <a class="nav-link" href="resources.html">Resources</a>
                    </li>
                    <li>
                        <a class="nav-link" href="./index.php">
                            Page Title ‐ Developer’s Reference
                            Library
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div aria-label="Breadcrumb" class="nav-end">
            <button id="hamburger" aria-label="hamburger" aria-haspopup="true" aria-expanded="false">
                <i class="bx bx-menu" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

<div role="main" id="main">
    <div class="container page">
        <section class="pageContent">
            <h1>Our Services</h1>
            <p>The Accessibility Team for Assessments provides a full range of services to internal Pearson teams and clients that support Pearson’s efforts to improve people’s lives through learning. The cornerstone of our service model is the collaborative partnership of a dedicated team of learner advocates and accessibility professionals who make up the Accessibility Team for Assessments. The mission of this team is to support the development of accessible products and services by removing access barriers and creating solutions that work well for everyone.</p>
            <p>As members of Pearson, the world’s learning company, we embrace lifelong learning and apply this to our roles as accessibility advocates. The Accessibility Team for Assessments pursues ongoing training and development opportunities to keep up to date with the current technologies that impact digital accessibility. We understand the accessibility landscape is continually evolving and we are committed to continuing to learn about advancements in the field of accessibility.</p>
            <p>Our team includes staff who have disabilities themselves and former educators with hands-on experience working with learners with disabilities. Members of our team maintain current certifications including:</p>
            <ul class="list-style">
                <li>Job Access With Speech (JAWS) certification, obtained through Freedom Scientific.</li>
                <li>Assistive Technology Applications certification, obtained through California State University-Northridge.</li>
                <li>Certified Professional in Accessibility Core Competencies (CPACC) credential, obtained through the International Association of Accessibility Professionals (IAAP)</li>
                <li>Web Accessibility Specialist (WAS) credential, obtained through the International Association of Accessibility Professionals (IAAP)</li>
            </ul>
        </section>
    </div>
</div>
<div class="footer" role="contentinfo" id="footer">
    <div role="navigaton" aria-label="Secondary">
        <ul class="footer-link webpages">
            <li><a href="#" id="nav-page5">Sitemap</a></li>
            <li><a href="#">Terms of Use</a></li>
            <li><a href="#">Patent Notice</a></li>
            <li><a href="#">Accessibility Statement</a></li>
            <li><a href="#">Accessibility Conformance Reports</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <p>© 1996–2023 Pearson All rights reserved.</p>
</div>
<div id="loader">
    <div class="spinner"></div>
</div>
<button id="scroll-top-btn" class="scroll-top-btn" title="Go to top">
    <span class="visually-hidden">Back To Top</span>
    <i class="fas fa-arrow-up"></i></button>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resources | School Accessibility Services Team</title>
    <link rel="stylesheet" href="/resources/developers-corner/reference-library/page-title/style.css">
    <script src="page-title.js"></script>
</head>
<body>
<div id="nav-menu" role="banner">
    <div class="nav-container">
        <div class="nav-start">
            <a class="logo" href="/">
                <span>Pearson</span>
            </a>
            <div role="navigaton" aria-label="Primary" class="menu">
                <ul class="menu-bar webpages">
                    <li><a class="nav-link" href="home.html">Home</a></li>
                    <li><a class="nav-link" href="about.html">About</a></li>
                    <li>
                        <a class="nav-link" href="services.html">Services</a>
                    </li>
                    <li>
                        <a class="nav-link" href="resources.html">Resources</a>
                    </li>
                    <li>
                        <a class="nav-link" href="./index.php">
                            Page Title – Developer’s Reference
                            Library
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div aria-label="Breadcrumb" class="nav-end">
            <button id="hamburger" aria-label="hamburger" aria-haspopup="true" aria-expanded="false">
                <i class="bx bx-menu" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</div>

<div role="main" id="main">
    <div class="container page">
        <section class="pageContent">
            <h1>Accessibility Resources</h1>
            <p>The Accessibility Team for Assessments supports learners, educators, parents, content authors, product owners, and client partners by assembling and maintaining a comprehensive set of accessibility resources designed to promote disability awareness and advocacy and build a rich understanding of what accessibility means and how to achieve it.</p>

            <h2>Learner, Educator, and Parent Resources</h2>
            <p>A multi-year project to support Nemeth literacy resulted in the development of a robust, publicly-available Nemeth Braille Curriculum for students who are blind. Strong Nemeth skills can open doors to success in Science, Engineering, Technology, and Mathematics (STEM) so Pearson Assessments provides access to these materials for free. They are designed so that parents or teachers who are not familiar with Nemeth can learn alongside their students.</p>

            <h2>Internal and External Customer Resources</h2>
            <p>Our resources include information about the access needs of learners with disabilities, descriptions of technologies that support access, and a list of free, open-source tools for testing conformance to accessibility guidelines. There are also some overview materials that explain the different types of disabilities people may have and how to effectively design inclusive products and services that align to accessibility guidelines and standards.</p>

            <p>Since the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) is internationally recognized as a primary source for accessibility guidelines, we align our resources with the ongoing education efforts of WAI’s Accessibility Education and Outreach Working Group (EOWG).</p>
            <p>One important tool for promoting the use of our accessibility resources is Pearson Able, Pearson's employee resource group for employees with disabilities. Pearson Able has chapters all over the world and is designed to create and distribute resources to improve disability awareness and promote an inclusive culture within Pearson.</p>
        </section>
    </div>
</div>
<div class="footer" role="contentinfo" id="footer">
    <div role="navigaton" aria-label="Secondary">
        <ul class="footer-link webpages">
            <li><a href="#" id="nav-page5">Sitemap</a></li>
            <li><a href="#">Terms of Use</a></li>
            <li><a href="#">Patent Notice</a></li>
            <li><a href="#">Accessibility Statement</a></li>
            <li><a href="#">Accessibility Conformance Reports</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <p>© 1996–2023 Pearson All rights reserved.</p>
</div>
<div id="loader">
    <div class="spinner"></div>
</div>
<button id="scroll-top-btn" class="scroll-top-btn" title="Go to top">
    <span class="visually-hidden">Back To Top</span>
    <i class="fas fa-arrow-up"></i></button>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

:root {
    --light-grey: #eeeeee;
    --border: 1px solid var(--light-grey);
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: inherit;
}

.icon {
    padding: 0.5rem;
    background-color: var(--light-grey);
    border-radius: 10px;
}

.logo {
    margin-right: 1.5rem;
}

#nav-menu {
    border-bottom: var(--border);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 2rem;
    height: 90px;
    padding: 1.2rem 3rem;
    background-color: #005a70;
}

.menu {
    position: relative;
    background: #005a70;
    color: #fff;
}

.menu-bar li:first-child ul:nth-child(1) {
    border-right: var(--border);
}

.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
    border-bottom: var(--border);
}

.menu-bar .nav-link {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.6px;
    padding: 0.3rem;
    min-width: 60px;
    margin: 0 0.6rem;
}

.menu-bar .nav-link:hover{
    text-decoration: underline;
}

.nav-start,
.nav-end,
.menu-bar,
.right-container,
.right-container .search {
    display: flex;
    align-items: center;
    z-index: 1000;
}

#hamburger {
    display: none;
    padding: 0.1rem;
    margin-left: 1rem;
    font-size: 1.9rem;
}

@media (max-width: 1100px) {
    #hamburger {
        display: block;
        color: #fff;
    }

    .nav-container {
        padding: 1.2rem;
    }

    .menu {
        display: none;
        position: absolute;
        top: 87px;
        left: 0;
        min-height: 100vh;
        width: 100vw;
    }

    .menu-bar li:first-child ul:nth-child(1) {
        border-right: none;
        border-bottom: var(--border);
    }

    .menu.show,
    .active {
        display: block;
    }

    .menu-bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 1rem;
        padding: 1rem;
    }

    .menu-bar .nav-link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-weight: 600;
        font-size: 1.2rem;
        margin: 0;
    }

    .menu-bar > li:not(:last-child) {
        padding-bottom: 0.5rem;
        border-bottom: var(--border);
    }
}

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    margin: 0;
    background-color: #007fa3;
    color: #fff;
}
.footer ul li {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 10px;
}
.footer ul li a {
    font-size: 18px;
    color: #fff;
}

.footer ul li a:hover {
    text-decoration: underline;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .cards {
        flex: 0 1 90%;
    }
}

span{
    font-size: 2rem;
    color: #fff;
}

#scroll-top-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #005a70;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}
.scroll-top-btn:focus{
    border: 2px solid #000 !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.contentwide {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    padding: 0;
}
@media (min-width: 57.5em){
    .contentwide section {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 20px;
    }
}
@media (min-width: 63.4275em){
    .pageContent {
        max-width: 1200px;
        margin: 0 auto;
    }
}
@media (min-width: 23em){
    .pageContent {
        width: 100%;
    }
}
.pageContent {
    padding: 0 30px 20px;
    width: 100%;
}
h1, h2 {
    font-weight: 700;
    line-height: 1.2;
}
h1 {
    font-size: 2rem;
    color: #003057;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 10px 0 20px;
}
h2 {
    font-size: 1.5rem;
    color: #005a70;
}
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.card {
    flex: 1 0 calc(25% - 1em);
    padding: 20px 30px;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    margin: 0 10px 15px;
    position: relative;
}
.card-details {
    padding: 0 0 20px;
}
.seperator1 {
    border-bottom: 2px solid #9e007e;
    padding-bottom: 15px;
}
h3 {
    color: #005a70;
    line-height: 1.2;
    font-weight: 600;
    font-size: 1.5rem;
}
.business .button, .card .button {
    display: flex;
    bottom: 15px;
    left: 0;
    margin-top: auto;
    text-align: center;
}
.business .button a:visited, .card .button a:visited {
    color: #003057;
}
.business .button a, .card .button a {
    width: 100%;
    margin: 0 auto;
    border: 2px inset #003057;
    padding: 5px 15px;
    border-radius: 5px;
    background-color: #d4eae4;
    color: #003057;
}
.business .button a:after, .card .button a:after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
#assessments-business-card:focus, #assessments-business-card:hover, #biz-school:focus, #biz-school:hover {
    background-color: #d2db0e;
    color: #000;
}

#assessments-business-card:focus, #assessments-business-card:hover h3{
    color: #000 !important;
}

#accessibility-statement-card:focus, #accessibility-statement-card:hover, #biz-clinical:focus, #biz-clinical:hover {
    background-color: #ffb81c;
    color: #000;
}

#accessibility-statement-card:focus, #accessibility-statement-card:hover h3{
    color: #000 !important;
}

#accessibility-team-card:focus, #accessibility-team-card:hover, #biz-vue:focus, #biz-vue:hover {
    background-color: #d4eae4;
    color: #000;
}

#accessibility-team-card:focus, #accessibility-team-card:hover h3{
    color: #000 !important;
}

.business .button a:focus, .business .button a:hover, .card .button a:focus, .card .button a:hover {
    color: #fff;
    background-color: #003057;
}
.seperator2 {
    border-bottom: 2px solid #008638;
    padding-bottom: 15px;
}
.seperator3 {
    border-bottom: 2px solid #db0020;
    padding-bottom: 15px;
}
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
ol li{
    margin: 1rem;
}
.list-style li{
    margin: 1rem;
    list-style-type: disc;
}
.sitemap li{
    list-style-type: disc;
    margin: 1rem;
}
.sitemap a{
    text-decoration: underline;
    font-size: 1.2rem;
}

let hamburgerBtn = document.getElementById("hamburger");
let navMenu = document.querySelector(".menu");

function toggleHamburger() {
    navMenu.classList.toggle("show");
    hamburgerBtn.setAttribute(
        "aria-expanded",
        hamburgerBtn.getAttribute("aria-expanded") === "false" ? "true" : "false"
    );
}

hamburgerBtn.addEventListener("click", toggleHamburger);

let mybutton = document.getElementById("scroll-top-btn");
mybutton.addEventListener("click", topFunction);

window.onscroll = function () {
    scrollFunction();
};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
    } else {
        mybutton.style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

Due to the nature of this demonstration, it is best viewed full screen.

Page Title

Implementation

Why is it important

Working Example