Reading Order

<header id="nav-menu">
    <div class="nav-container">
        <div class="nav-start">
            <a class="logo" href="/">
                <span>Pearson</span>
            </a>
            <nav class="menu" aria-label="Primary">
                <ul class="menu-bar">
                    <li>
                        <a class="nav-link first-link" href="#">Home</a>
                    </li>
                    <li><a class="nav-link" href="#">About</a></li>
                    <li><a class="nav-link" href="#">Service</a></li>
                    <li><a class="nav-link" href="#">Contact</a></li>
                    <li>
                        <a class="nav-link last-focusable-element" href="#">
                            Careers
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="nav-end">
            <button id="hamburger" class="first-focusable-element"
                    aria-label="Navigation" aria-haspopup="true"
                    aria-expanded="false">
                <i class="bx bx-menu" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</header>

<main>
    <h1>Reading Order</h1>
    <div class="container">
        <div class="aside">
            <nav class="sb-contents" aria-label="Secondary">
                <ul class="sidebar--list">
                    <li>
                        <a href="#" aria-current="page" class="linkpath">
                            <span>About Us</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"><span>Contact Us</span></a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="pageContent">
            <h2>Accessibility Guidelines and Specifications</h2>
            <p>
                To ensure that the needs of people with disabilities who
                use Pearson products are effectively represented in the
                development of guidelines and best practices for
                accessibility, Pearson engages in technical standards
                development through global organizations such as the World
                Wide Web Consortium&#8217;s (W3C)
                <a href="https://www.w3.org/WAI/">
                    Web Accessibility Initiative (WAI)
                    <span class="sr-only">open in new tab</span>
                    <i class="fa fa-external-link"></i>
                </a>,
                <a href="https://www.imsglobal.org/">
                    IMS Global
                    <span class="sr-only">open in new tab</span>
                    <i class="fa fa-external-link"></i>
                </a>, and the
                <a href="https://daisy.org/">
                    Digital Accessible Information SYstem (DAISY)
                    Consortium
                    <span class="sr-only">open in new tab</span>
                    <i class="fa fa-external-link"></i>
                </a>
            </p>
            <ul class="disc">
                <li>
                    The
                    <a href="https://www.w3.org/">
                        World Wide Web Consortium (W3C)
                        <span class="sr-only">open in new tab</span>
                        <i class="fa fa-external-link"></i>
                    </a> develops technical specifications, protocols and 
                    guidelines through their Web Accessibility Initiative 
                    (WAI). W3C&#8217;s guidelines define key parts of what 
                    makes the World Wide Web work and how to ensure that 
                    web content will be accessible to people with 
                    disabilities.
                </li>
                <li>
                    The 
                    <a href="https://www.imsglobal.org/">
                        IMS (Instructional Management System) Global 
                        Learning Consortium 
                        <span class="sr-only">open in new tab</span>
                        <i class="fa fa-external-link"></i>
                    </a> is a nonprofit member organization that develops 
                    open interoperability and accessibility specifications 
                    to support innovative learning technology for 
                    instruction and assessment.
                </li>
                <li>
                    The
                    <a href="https://www.iso.org/home.html">
                        International Organization for Standardization 
                        (ISO) <span class="sr-only">open in new tab</span>
                        <i class="fa fa-external-link"></i>
                    </a> works together with its partner organizations, 
                    the
                    <a href="https://www.iec.ch/about/">
                        International Electrotechnical Commission (IEC) 
                        <span class="sr-only">open in new tab</span>
                        <i class="fa fa-external-link"></i>
                    </a> and the
                    <a href="https://www.itu.int/home/">
                        International Telecommunication Union (ITU) 
                        <span class="sr-only">open in new tab</span>
                        <i class="fa fa-external-link"></i>
                    </a>, to create technical standards and guidelines 
                    that include a diverse range of accessibility 
                    consideration for everything from ergonomics, 
                    information technology, assistive products, public 
                    information symbols and the built environment. It is 
                    important to note that the World Wide Web 
                    Consortium&#8217;s (W3C) Web Content Accessibility 
                    Guidelines, version 2.0 was approved as an ISO/IEC 
                    International Standard in 2012:
                    <a href="https://www.iso.org/standard/58625.html">
                        ISO/IEC 40500:2012 
                        <span class="sr-only">open in new tab</span>
                        <i class="fa fa-external-link"></i>
                    </a>. It was reviewed and confirmed again in 2019.
                </li>
                <li>
                    The 
                    <a href="https://daisy.org/">
                        DAISY 
                        <span class="sr-only">open in new tab</span>
                        <i class="fa fa-external-link"></i>
                    </a> (Digital Accessible Information SYstem) 
                    Consortium develops technical standards and best 
                    practices for digital publishing and reading platforms 
                    to ensure accessibility for people with disabilities 
                    in both specialist and mainstream formats, including 
                    EPUB 3, the leading mainstream ebook standard.
                </li>
            </ul>

            <h3>Pearson Assessments Staff Involvement:</h3>
            <h4>IMS Global Learning Consortium</h4>
            <p>
                Paul Grudnitski, Pearson&#8217;s Vice President of
                Architecture and Innovation serves as one of four
                Co-Chairs of the QTI 3 Specification. Please see our
                <a href="https://accessibility.pearson.com/about/community-engagement/standards-involvement/ims-global-learning-consortium/">
                    IMS Involvement
                </a> page for details about the groups and efforts
                supported by Pearson Assessment staff.
            </p>

            <h4>DAISY Consortium</h4>
            <p>
                Steve Noble, Accessible Instructional Designer for
                Pearson&#8217;s Accessibility Team for Assessments, serves
                on the DAISY – DIAGRAM Standards Group.
            </p>
        </div>
    </div>
</main>
<footer>
    <ul class="footer-link">
        <li><a href="#">Terms&nbsp;of&nbsp;Use</a></li>
        <li><a href="#">Privacy&nbsp;Statement</a></li>
        <li><a href="#">Patent&nbsp;Notice</a></li>
        <li><a href="#">Accessibility&nbsp;Statement</a></li>
        <li>
            <a href="#">Accessibility&nbsp;Conformance&nbsp;Reports</a>
        </li>
        <li><a href="#">Contact&nbsp;Us</a></li>
    </ul>
    <p>&copy; Copyright © 1996–2023 Pearson All rights reserved.</p>
</footer>

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

.logo {
    margin-right: 1.5rem;
    color: #fff
}

#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 .dropdown {
    flex-direction: initial;
    min-width: 480px;
}

.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 .dropdown-link-title { font-weight: 600; }

.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,
.dropdown-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);
    }

    .dropdown {
        display: none;
        min-width: 100%;
        border: none !important;
        border-radius: 5px;
        position: static;
        top: 0;
        left: 0;
        visibility: visible;
        opacity: 1;
        transform: none;
        box-shadow: none;
    }

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

    .dropdown ul { padding-left: 0.3rem; }

    .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:first-child .dropdown { min-width: 100%; }

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

.pageContent {
    flex: 0 1 75%;
    margin-right: 20px;
}

.pageContent h2 {
    font-size: 1.8rem;
    line-height: 1.2;
    color: #005a70;
    margin-bottom: 10px;
}

.pageContent p {
    font-size: 16px;
    line-height: 1.5;
    color: #000;
}

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

section {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pageContent > * {
    flex: 0 1 20em;
}

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

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

.aside {
    background-color: #f2f2f2;
    padding: 20px;
    margin: 20px;
    flex: 0 1 20%;
    margin-left: 20px;
    height: fit-content;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

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

.nobr { white-space: nowrap; }

svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 0.8571428571428571em;
}

.pageContent a { color: #007fa3; }

.pageContent i{
    font-size: 12px !important;
    position: relative;
    bottom: 6px;
}

.disc li {
    margin-bottom: 15px;
    list-style: none;
    list-style-type: disc;
}

.disc li:not(first-of-type) { margin-top: 10px; }

.disc { padding: 2rem; }

h3 {
    font-size: 1.5rem;
    line-height: 1.4;
    color: #005a70;
}

h4 {
    line-height: 1.4;
    font-weight: 500;
    font-size: 1.1rem;
}

.sidebar--list {
    column-count: 1;
    border-left-width: 5px;
    border-right-width: 0;
}

.sidebar--list li {
    margin: 0;
    padding: 0;
    list-style: none;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
}

.sidebar--list a[aria-current=page] {
    padding-bottom: 4px;
    font-weight: 700;
    text-decoration: underline;
}

.sidebar--list li a.linkpath {
    border-bottom: 1px solid #005a70;
}

.sidebar--list a {
    display: flex;
    box-sizing: border-box;
    padding: 8px 14px;
    min-height: 44px;
    color: #212121;
    text-decoration: none;
    align-items: center;
}

a:hover { text-decoration: underline; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media (max-width: 820px) {
    .aside { flex: 0 1 40%; }
}

@media (max-width: 448px) {
    .aside { flex: 0 1 50%; }
}

const hamburgerBtn = document.getElementById("hamburger");
const navMenu = document.querySelector(".menu");
const firstLink = document.querySelector('.first-link');
const logo = document.querySelector('.logo');
const firstFocusableElement = document.querySelector('.first-focusable-element');
const lastFocusableElement = document.querySelector('.last-focusable-element');

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

hamburgerBtn.addEventListener("click", toggleHamburger);
document.addEventListener('keydown', (e) => {
    if (e.key === 'Tab' && navMenu.classList.contains("show")) {
        const activeElement = document.activeElement;
        if (e.key === 'Tab' && activeElement === firstFocusableElement){
            e.preventDefault();
            firstLink.focus();
        }
        else if (e.key === 'Tab' && activeElement === logo){
            e.preventDefault();
            firstFocusableElement.focus();
        }
        if (e.shiftKey) {
            if (activeElement === firstFocusableElement) {
                e.preventDefault();
                logo.focus();
            }else if (activeElement === firstLink){
                e.preventDefault();
                firstFocusableElement.focus();
            }else if (activeElement === logo){
                e.preventDefault();
                lastFocusableElement.focus();
            }
        } else {
            if (activeElement === lastFocusableElement) {
                e.preventDefault();
                logo.focus();
            }
        }
    } else if (e.key === 'Escape' && navMenu.classList.contains("show")) {
        toggleHamburger();
        firstFocusableElement.focus();
    }
});