Navigation
Navigation consists of links that help users to jump to other pages of the website. Hence, it is necessary to define them in the same way and order across all pages of the website.
- The location of these links should be implemented to be convenient to access for all users.
- These links SHOULD have unique and descriptive link text.
-
Link text MUST have sufficient color contrast with its background.
- Minimum requirement of 4.5:1 MUST be met for the standard text size.
- Minimum requirement of 3:1 MUST be met for links having larger text size i.e., 14pts with bold weight or more than 18 pts.
- If image links are used, they SHOULD meet the color contrast ratio requirement of 3:1 with the background color in different states.
- The contrast requirement of 3:1 ratio MUST be met with the adjacent colors for the custom focus indicator of the links.
- Navigation region SHOULD be defined for the menu.
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.
- When navigation elements are not defined in the same order across all pages of the website, this leads to inconvenience for all users.
- The common elements SHOULD be defined in the same predictable order so that users do not have to search for them on the page each time they jump to a new page.
- Site navigation are a set of links that help users to navigate to different pages of a website.
- A website SHOULD contain multiple ways to navigate to a certain page on the website. For example — table of contents, site map, and so on.
- There SHOULD be at least 2 ways to navigate to a certain page on the website.
A well-defined navigation benefits majorly the below users.
- People with cognitive disabilities
- People with visual disabilities
- People with limited dexterity
The HTML for all 5 pages is included here.
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<div id="nav-menu" role="banner">
<div class="nav-container">
<div class="nav-start">
<a class="logo" href="/">
<span>Pearson</span>
</a>
<nav aria-label="Primary" class="menu">
<ul class="menu-bar webpages">
<li>
<a class="nav-link" href="#" id="nav-page1">Home</a>
</li>
<li>
<a class="nav-link" href="#" id="nav-page2">About</a>
</li>
<li>
<a class="nav-link" href="#" id="nav-page3">Service</a>
</li>
<li>
<a class="nav-link" href="#" id="nav-page4">Resources</a>
</li>
</ul>
</nav>
</div>
<nav 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>
</nav>
</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="//accessibility.pearson.com/assessments-business/">
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.pearson.com/accessibility-statement/">
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="//accessibility.pearson.com/accessibility-team/">
Team Structure
</a>
</div>
</article>
</section>
</section>
</div>
<div class="container page" id="page2">
<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>
<h3> Accessibility & Accommodations (A&A)</h3>
<p>
The A&A team proactively engages with Contract Management
Teams, product owners, development teams, other shared services
teams, and clients to be an advocate for building accessible
assessment products and services. The A&A team develops
plans to address the accessibility of the assessments Pearson
develops and the systems and tools that are used to deliver
content to our customers. A&A provides guidance on how to
best support students with disabilities by sharing information
on how accessibility features and accommodations can support a
fair and equitable assessment experience. These efforts are
divided into three primary areas of focus:
</p>
<ol>
<li>
<strong>Support Accessibility Considerations for Winning New
Business and Delivering on Existing Contracts</strong> by
supporting business acquisition efforts and meeting the
needs of current clients.
</li>
<li>
<strong>Accessible Design of Assessment Content</strong> by
helping content development teams understand accessibility
standards and best practices for creating accessible
assessments.
</li>
<li>
<strong>Accessibility Needs of Product Owners and Software
Developers -</strong> by supporting technology engineering
teams as they build software products and services used by
Pearson and our customers.
</li>
</ol>
<h3>Accessibility Strategy and Education (ASE)</h3>
<p>
The ASE team provides training about what accessibility is, how
to address it strategically in daily operations, how it improves
products and affects development, and how to integrate it into
the development life cycle. The ASE team collaborates with
product teams, advocacy groups, accessibility suppliers, and
other organizations to develop strategies to remove access
barriers that may exist in Pearson products.
</p>
<ol>
<li>
<strong>Strategy -</strong> focuses on strategic tasks and
activities that drive accessible design and development of
Pearson products and services, including networking,
sharing, and external collaboration.
</li>
<li>
<strong>Education & Awareness -</strong> focuses on
gathering, developing, and sharing accessibility learning
materials and resources, as well as driving awareness of
disabilities, barriers, and equal access for employees and
customers.
</li>
<li>
<strong>Training -</strong> focuses on the development and
delivery of quality, targeted professional development to
eliminate knowledge and skills gaps in the areas of
accessibility and usability best practices.
</li>
<li>
<strong>Accessible Materials Support -</strong> focuses on
providing assessment-wide support for delivering a variety
of accessible materials as well as fulfilling contractual
requirements for quality braille production.
</li>
</ol>
<h3>Accessibility Research and Efficacy (ARE)</h3>
<p>
The ARE team provides current and relevant research to drive
Pearson’s accessibility efforts to meet our efficacy goals
and eliminate risk related to accessibility. The efforts are
distributed among three broad areas:
</p>
<ol>
<li>
<strong>Research and Dissemination of Best
Practices -</strong> We conduct general research on
accessibility, research specific to development and product
needs for assessment and iterative usability studies with
people with disabilities to inform best practice in
accessible user experience.
</li>
<li>
<strong>Outreach & Networking -</strong> We partner with
advocacy groups and other organizations to gain a deep
understanding of how various disabilities may impact
learning and assessment outcomes. This work includes
engaging in technical standards development through global
organizations (W3C, IMS Global, ISO) to establish Pearson as
a technical leader in developing best practices around
emerging accessible technologies and coding best practices.
</li>
<li>
<strong>Compliance & Monitoring of Laws and Regulations
Related to People with Disabilities -</strong> This work
includes collaborating with Assessment’s Legal Counsel
to keep leadership apprised of the potential impact of U.S.
and international laws, policies and accessibility standards
on Pearson Assessments.
</li>
</ol>
<p>
Members of all three service areas actively engage in technical
standards and guidance development through organizations such as
the World Wide Web Consortium (W3C) and IMS Global. We believe
that it is important to the end users of Pearson products that
our team engages in developing best practices and guidance about
how to make accessible products and solutions.
</p>
<h3>Ways of Working</h3>
<p>
We have a collaborative working model where experts from
multiple fields come together to support Pearson teams in
developing accessible assessment solutions. Diversity is our
strength. Approximately 40% of our team members have
disabilities and our team has expertise in a broad range of
specialized areas, including but not limited to:
</p>
<ul class="list-style">
<li>Accessibility Guidelines</li>
<li>Accessible Design Techniques (HTML, JavaScript, ARIA)</li>
<li>Accessible Documents</li>
<li>Accessibility Regulations</li>
<li>Accommodations</li>
<li>Assistive Technology</li>
<li>
Best Practices in Authoring Alternative Text for Assessment
</li>
<li>Braille</li>
<li>In-depth knowledge of all disability categories</li>
<li>Instructional Design</li>
<li>Psychoeducational Assessment</li>
<li>Publishing Accessible Digital Content</li>
<li>QA Testing with Assistive Technologies</li>
<li>Research and Evaluation</li>
<li>Sign Language</li>
<li>Special Education</li>
</ul>
<p>
Emphasizing a collaborative approach allows us to place proper
focus on the needs of people with disabilities. The diverse
nature of our team gives us the ability to truly understand the
end user of our products and provide accurate and specific
accessibility guidance to Pearson development teams.
</p>
<h2>Continuously Learning</h2>
<p>
Several members of our team have advanced degrees and
specialized certifications. Each member of our team is supported
and encouraged to continuously pursue new certifications and
training to improve their knowledge and skills.
</p>
</section>
</div>
<div class="container page" id="page3">
<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 class="container page" id="page4">
<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 class="container page" id="page5">
<section class="pageContent">
<h1>Sitemap</h1>
<ul class="sitemap">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Resources</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>
</section>
</div>
</div>
<div class="footer" role="contentinfo" id="footer">
<nav 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>
</nav>
<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>
* {
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);
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;
}
const hamburgerBtn = document.getElementById("hamburger");
const 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
.