Theme Switcher

Accessibility Theme Switcher is a widget that consists of different features such as – theme switcher, contrast switcher and text resize.

Generally, a functional image that expands/collapse a panel that consists of different accessibility features. Theme switcher helps to view the website in different themes such as “Dark Mode” or 𔄬Light Mode”. Whereas the contrast switcher helps to view the website in “High Contrast Mode” or “Normal Contrast Mode”. The text resize feature helps the user to change the size of the text to Small, Medium and Large based on the requirement.

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.

The accessibility theme switcher SHOULD follow the standard disclosure widget pattern. For more information, refer to https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ .
The disclosure button that displays different features of accessibility SHOULD be defined using native HTML <button> element.
An accessible name MUST be provided for the disclosure button using any of the following methods.
- Specifying off-screen text within the <button> (…) </button> element.
- Using aria-label with a descriptive value on the <button> element.
- Using aria-labelledby in case a visual text is available that can be associated with the disclosure button.
- If an image is used to identify the disclosure button, then a textual description MUST be defined for the image disclosure button.
  - If the image is defined using <img> element, use an alt attribute with descriptive value.
  - If the image is defined using <svg> element, use role="img" and aria-label attribute to provide a role and an accessible name for the element.
    Note: Providing ARIA based role and attribute on SVG image ensures robust support across different environments.
The image/icon of the disclosure button SHOULD NOT be defined through CSS background-image property.
The disclosure button MUST be visible in High Contrast Mode.
The aria-expanded attribute MUST be provided by default for defining the expanded/collapsed state of the disclosure button.
- The default value of this attribute SHOULD be set to false as the disclosure button is in collapsed state.
- The value SHOULD be updated to true when the disclosure button is in expanded state.

For example,

<!-- Disclosure button -->
<button id="modal-button" aria-expanded="false">
    <span class="hidden">Accessibility Tools</span>
    <i class="fa fa-universal-access" aria-hidden="true"></i>
</button>

The section SHOULD be defined in a neutral container such as a <div> element.
By default, the section SHOULD NOT be available for any users.
- The section container SHOULD be assigned with native HTML hidden attribute when the disclosure button is in collapsed state. Alternatively, display:none property in CSS or aria-hidden="true" along with tabindex="-1" CAN also be used.
The role="region" and aria-labelledby attribute CAN be provided to the <div> element of the section. The aria-labelledby attribute value refers to the id attribute of the button or any visible text that can provide an accessible name to the region.
Features like Text Resize, Contrast Scheme and Reset SHOULD be defined using native HTML <button> element.
An accessible name MUST be provided for the buttons using any of the following methods.
- Specifying off-screen text within the <button> (…) </button> element.
- Using aria-label with a descriptive value on the <button> element.
- Using aria-labelledby in case a visual text is available that can be associated with the button.
- If an image is used to identify the button, then a textual description MUST be defined for the image button.
  - If the image is defined using <img> element, use an alt attribute with descriptive value.
  - If the image is defined using <svg> element, use role="img" and aria-label attribute to provide a role and an accessible name for the element.
    Note: Providing ARIA based role and attribute on SVG image ensures robust support across different environments.
- The image/icon of the button SHOULD NOT be defined through CSS background-image property.
- The button MUST be visible in High Contrast Mode.
- The buttons under the Text Resize and Contrast Scheme feature SHOULD be grouped programmatically. For more information on grouping refer to ”Grouping Controls“ component.
- The selected state of the button SHOULD be provided as a part of the accessible name.
- The feature to switch the mode of the website from “Light” to “Dark” and vice versa SHOULD be defined using <button> element.
  - The role="switch" SHOULD be provided for the <button> element.
  - To indicate the state, aria-checked attribute MUST be defined for the <button> element.
    - The value of aria-checked MUST be set to true in checked state and false in unchecked state.
For example,
```
<div id="modal" class="showmodal">
    <div class="modalinner">
        <h2 id="modal-title">Accessibility Tools</h2>
        
        <span class="text-size-heading" id="text_size">Text Size:</span>
        <ul role="group" aria-labelledby="text_size">
            <li>
                <button class="change_font_size select" id="small-button" aria-label="Small Text Size selected"><i class="fa fa-font" aria-hidden="true" style="font-size: 14px;"></i></button>
                <span aria-hidden="true" class="hidden"></span>
            </li>
            ...
        </ul>
        
        <span class="text-size-heading" id="contrast_scheme_txt">Contrast Scheme:</span>
        <ul role="group" aria-labelledby="contrast_scheme_txt">
            <li>
                <button class="change_contrast" id="medium-contrast" aria-label="Normal Contrast View"><span aria-hidden="true">C</span></button>
                <span aria-hidden="true" class="hidden"></span>
            </li>
            ...
        </ul>
        
        <span for="toggle">Dark Mode
            <button type="button" id="toggle" role="switch" aria-checked="false"><span>On</span><span>Off</span></button>
        </span>
        
        <button class="reset_btn" id="reset">Reset</button>
    </div>
</div>
```

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<div class="modalbtn">
    <div id="btnright">
        <button id="modal-button" aria-expanded="false">
            <span class="hidden">Accessibility Tools</span>
            <i class="fa fa-universal-access" aria-hidden="true"></i>
        </button>
    </div>
    <div id="modal">
        <div class="modalinner">
            <h2 id="modal-title">Accessibility Tools</h2>
            <span class="text-size-heading" id="text_size">Text Size:</span>
            <ul role="group" aria-labelledby="text_size">
                <li>
                    <button class="change_font_size" id="small-button" aria-label="Small Text Size"><i class="fa fa-font" aria-hidden="true" style="font-size: 14px;"></i></button>
                    <span aria-hidden="true" class="hidden"></span>
                </li>
                <li>
                    <button class="change_font_size select" id="medium-button" aria-label="Normal Text Size selected"><i class="fa fa-font" aria-hidden="true" style="font-size: 18px;"></i></button>
                    <span aria-hidden="true" class="hidden"></span>
                </li>
                <li>
                    <button class="change_font_size" id="large-button" aria-label="Large Text Size"><i class="fa fa-font font-2" aria-hidden="true" style="font-size: 22px;"></i></button>
                    <span aria-hidden="true" class="hidden"></span>
                </li>
            </ul>
            <span class="text-size-heading" id="contrast_scheme_txt">Contrast Scheme:</span>
            <ul role="group" aria-labelledby="contrast_scheme_txt">
                <li>
                    <button class="change_contrast select" id="medium-contrast" aria-label="Normal Contrast View selected"><span aria-hidden="true">Normal</span></button>
                    <span aria-hidden="true" class="hidden"></span>
                </li>
                <li>
                    <button class="change_contrast" id="high-contrast" aria-label="High Contrast View"><span aria-hidden="true">High</span></button>
                    <span aria-hidden="true" class="hidden"></span>
                </li>
            </ul>
            <span id="toggle_label">Dark Mode</span>
            <button type="button" id="toggle" role="switch" aria-labelledby="toggle_label" aria-checked="false">
                <span>On</span><span>Off</span>
            </button>

            <button class="reset_btn" id="reset">Reset</button>
        </div>
    </div>
</div>

<div class="contentwide home">
    <section id="contentStart" class="pageContent">
        <h2>Welcome to Accessibility for Pearson Assessments</h2>
        <p>
            Pearson is the world&#8217;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&#8217;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>

body {
    background-color: #fff;
    color: #333;
}

:root {
    --brightest: #fff;
    --bright: #757580;
    --positive: #003057;
    --dark: #333;
}

/* Dark theme */
body.dark {
    background-color: #333;
    color: #fff;
}

body.dark h2 {
    color: #02b2de;
}

body.dark .contentwide .pageContent .cards .card {
    background-color: #333;
}

body.dark .contentwide .pageContent .cards .card .card-details h3 {
    color: #fff;
}

body.contrasthigh {
    background-color: #000000 !important;
    color: #fff;
}

body.contrasthigh h1 {
    color: #ffffff;
}

body.contrasthigh h2 {
    color: #ffffff;
}

body.contrasthigh .contentwide .pageContent .cards .card {
    background-color: #000000;
}

body.contrasthigh .contentwide .pageContent .cards .card .card-details h3 {
    color: #ffffff;
}

.small-text {
    font-size: 0.75rem !important;
}

.small-text h1 {
    font-size: 1.5rem !important;
}

.small-text h2 {
    font-size: 1.25rem !important;
}

.small-text h3 {
    font-size: 1rem !important;
}

.medium-text {
    font-size: 1rem !important;
}

.medium-text h1 {
    font-size: 2rem !important;
}

.medium-text h2 {
    font-size: 1.8rem !important;
}

.medium-text h3 {
    font-size: 1.5rem !important;
}

.large-text {
    font-size: 1.25rem !important;
}

.large-text h1 {
    font-size: 3rem !important;
}

.large-text h2 {
    font-size: 2.25rem !important;
}

.large-text h3 {
    font-size: 1.8rem !important;
}

#contentStart {
    font-size: 1rem;
}

@media (min-width: 57.5em) {
    .contentwide {
        flex-flow: row nowrap;
        margin: 0 auto;
        padding: 20px 0;
    }
}

.contentwide {
    display: flex;
    /*     flex-flow: column wrap; */
    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;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 10px 0 20px;
}

h2 {
    font-size: 1.8rem;
    color: #005a70;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.card {
    position: relative;
}

.card {
    position: relative;
}

.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;
}

.card-details {
    padding: 0 0 20px;
}

.seperator1 {
    border-bottom: 2px solid #9e007e;
    padding-bottom: 15px;
}

h3,
h4 {
    color: #000;
    line-height: 1.2;
    font-weight: 400;
}

h3 {
    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;
}

.contrasthigh .card .button a {
    border: 2px inset #d1de3f;
    background-color: #000000;
    color: #d1de3f;
}

.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;
}

body.contrasthigh #assessments-business-card {
    pointer-events: none;
}

#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;
}
body.contrasthigh #accessibility-statement-card {
    pointer-events: none;
}

#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;
}

body.contrasthigh #accessibility-team-card {
    pointer-events: none;
}

#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;
}

[role="switch"] {
    padding: 0;
    width: 3.5rem;
    height: 2rem;
    border: 0;
    border-radius: 1rem;
    background-color: var(--bright);
}

[role="switch"][aria-checked="true"] {
    background-color: var(--dark);
}

[role="switch"] span {
    color: var(--brightest);
    padding: 0.2rem;
    pointer-events: none;
    border-radius: 2rem;
}

[role="switch"][aria-checked="false"] :last-child {
    padding-left: 0.2em;
}

[role="switch"][aria-checked="true"] :last-child,
[role="switch"][aria-checked="false"] :first-child {
    background: var(--brightest);
}

label {
    font-size: 14px;
    display: block;
    margin: 0.5rem;
}

.change_font_size {
    padding: 5px;
    border: none;
    color: #029dc2;
    background: #fff0;
    font-size: 0.9rem;
    cursor: pointer;
}

#modal {
    display: none;
    /* Other styles */
}

.hidden {
    left: -10000px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

.fa {
    font-size: 22px;
}

#modal-title {
    border-left: 5px solid orange;
    font-size: 0.9em;
}

.modalbtn {
    position: relative;
    left: 2%;
    width: fit-content;
    color: #000;
    z-index: 100;
}

#btnright {
    text-align: left;
}

.showmodal {
    display: block !important;
}

#modal-button {
    padding: 5px !important;
}

.modalbtn .text-size-heading {
    border-bottom: 1px solid #ccc;
    padding: 0;
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
    overflow: hidden;
    font-size: 0.85em;
}

.fa-font:before {
    content: "\f031";
}

.reset_btn {
    background: var(--positive);
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    display: block;
    margin-top: 20px;
    margin-bottom: 10px;
    cursor: pointer;
}

.contrasthigh .reset_btn {
    background: #000000;
    color: #fff;
    border: 1px solid;
}

.modalinner {
    background: #fff;
    padding: 20px 10px 10px 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.48);
    border-radius: 3px;
}

.contrasthigh .modalinner {
    background: #000 !important;
    border: 1px solid;
    color: #fff !important;
}

#modal ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

#modal ul li {
    display: inline;
}

.change_contrast {
    padding: 5px;
    border: none;
    color: #029dc2;
    background: #fff0;
    font-size: 0.9rem;
    cursor: pointer;
}

.select {
    border-bottom: 3px solid #bf8212;
}

const modalButton = document.getElementById("modal-button");
const modal = document.getElementById("modal");
const closeButton = document.getElementById("close-button");
let highcontrast = document.getElementById("high-contrast");
let mediumcontrast = document.getElementById("medium-contrast");

modalButton.addEventListener("click", function () {
    modal.classList.toggle("showmodal");
    if (modal.classList.contains("showmodal")) {
        modalButton.setAttribute("aria-expanded", "true");
    } else {
        modalButton.setAttribute("aria-expanded", "false");
    }
    modal.focus();
});

modal.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
        modal.classList.remove("showmodal");
        if (modal.classList.contains("showmodal")) {
            modal.setAttribute("aria-expandec", "true");
        } else {
            modal.setAttribute("aria-expandec", "false");
        }
        modalButton.focus();
    }
});

// Theme switching
const themeButton = document.getElementById("toggle");
const body = document.body;

themeButton.addEventListener("click", () => {
    if (body.classList.contains("contrasthigh")) {
        body.classList.remove("contrasthigh");
    }
    body.classList.toggle("dark");
});

themeButton.addEventListener("click", (e) => {
    let el = e.target;
    let state = el.getAttribute("aria-checked");
    let isState = state === "true";

    el.setAttribute("aria-checked", isState ? false : true);
    changecontrast.forEach((b) => b.classList.remove("select"));
    changecontrast.forEach((b) =>
        b.setAttribute(
            "aria-label",
            b.getAttribute("aria-label").replace(" selected", "")
        )
    );
    changecontrast[0].setAttribute("aria-label", "Normal Contrast View selected");
    changecontrast[0].classList.add("select");
});

// Font size changing
const smallButton = document.getElementById("small-button");
const mediumButton = document.getElementById("medium-button");
const largeButton = document.getElementById("large-button");

const textContainer = document.getElementById("contentStart");
let changelabel = document.querySelectorAll(".change_font_size");
let changecontrast = document.querySelectorAll(".change_contrast");

smallButton.addEventListener("click", () => {
    textContainer.classList.remove("medium-text", "large-text");
    textContainer.classList.add("small-text");
});

mediumButton.addEventListener("click", () => {
    textContainer.classList.remove("small-text", "large-text");
    textContainer.classList.add("medium-text");
});

largeButton.addEventListener("click", () => {
    textContainer.classList.remove("small-text", "medium-text");
    textContainer.classList.add("large-text");
});

changelabel.forEach((button) => {
    button.addEventListener("click", () => {
        changelabel.forEach((b) => b.classList.remove("select"));
        changelabel.forEach((b) =>
            b.setAttribute(
                "aria-label",
                b.getAttribute("aria-label").replace(" selected", "")
            )
        );
        button.classList.add("select");
        const ariaLabel = button.getAttribute("aria-label");
        button.setAttribute("aria-label", ariaLabel + " selected");
    });
});

changecontrast.forEach((button) => {
    button.addEventListener("click", () => {
        changecontrast.forEach((b) => b.classList.remove("select"));
        changecontrast.forEach((b) =>
            b.setAttribute(
                "aria-label",
                b.getAttribute("aria-label").replace(" selected", "")
            )
        );
        button.classList.add("select");
        const ariaLabel = button.getAttribute("aria-label");
        button.setAttribute("aria-label", ariaLabel + " selected");
    });
});

let reset = document.getElementById("reset");
reset.addEventListener("click", () => {
    changecontrast.forEach((b) => b.classList.remove("select"));
    changecontrast.forEach((b) =>
        b.setAttribute(
            "aria-label",
            b.getAttribute("aria-label").replace(" selected", "")
        )
    );
    changecontrast[0].setAttribute("aria-label", "Normal Contrast View selected");
    changecontrast[0].classList.add("select");
    if (body.classList.contains("dark")) {
        body.classList.remove("dark");
        themeButton.setAttribute("aria-checked", "false");
    } else if (body.classList.contains("contrasthigh")) {
        body.classList.remove("contrasthigh");
    }
    const container = document.getElementById("contentStart");
    if (container.classList.length > 1) {
        container.classList.remove(container.classList[1]);
        changelabel.forEach((b) => b.classList.remove("select"));
        changelabel.forEach((b) =>
            b.setAttribute(
                "aria-label",
                b.getAttribute("aria-label").replace(" selected", "")
            )
        );
        changelabel[1].setAttribute("aria-label", "Normal Text Size selected");
        changelabel[1].classList.add("select");
    }
});

highcontrast.addEventListener("click", () => {
    if (body.classList.contains("dark")) {
        body.classList.remove("dark");
        themeButton.setAttribute("aria-checked", "false");
    }
    body.classList.add("contrasthigh");
});

mediumcontrast.addEventListener("click", () => {
    body.classList.remove("contrasthigh");
    if (!body.classList.contains("dark")) {
        themeButton.setAttribute("aria-checked", "false");
    }
});

Theme Switcher

Welcome to Accessibility for Pearson Assessments

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.

Learn More about Pearson's Accessibility Team for Assessments

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.

Assessments Business

Pearson is the world’s leading learning company with expertise in a variety of assessments.

Business Structure

Accessibility Statement

Learn more about how Pearson Assessments is addressing accessibility.

Accessibility Statement

Accessibility Team

Pearson Assessments has a team dedicated to accessibility services.

Team Structure

Theme Switcher

Implementing Accessibility Theme Switcher

Color Requirements

Why is it important

Working Example