1
\$\begingroup\$

I am trying to improve a website to be as accessible as possible to screen readers and people who want to disable JavaScript (not necessarily both at the same time) so I use a checkbox with a label to display/hide the side menu

Some of the aria attributes get changed by javascript depending on screen size and whether the menu is open or closed.

I'm just wondering if there is anything I can add for improved accessibility.

Here is the full page if you want to check it out in action:

HTML

<div id="menu">
    <input type="checkbox" id="menu-checkbox" tabindex="-1" aria-hidden="true"/>
    <label id="hamburger" for="menu-checkbox" tabindex="0" title="menu" role="button"  aria-haspopup="true" onclick="">
        Menu
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
    </label>
    <ul role="menubar">
        <li class="nav-home"><a href="/" role="menuitem">Home</a></li>
        <li class="nav-about"><a href="/about" role="menuitem">About</a></li>
        <li class="nav-careers"><a href="/careers" role="menuitem">Careers</a></li>
        <li class="nav-contact"><a href="/contact" role="menuitem">Contact</a></li>
    </ul>
</div>

SCSS

#menu {
    #hamburger {
        font-size: 0;
        position: absolute;
        z-index: 3;
        top: 5px;
        right: 5px;
        height: 50px;
        width: 50px;
        background: transparent;
        border: 0;
        display: none;
        cursor: pointer;
        padding: 0;

        .line {
            width: 50px;
            height: 6px;
            background-color: #dc0000;
            margin-top: 8PX;
            transition: transform 0.4s;
            border-radius: 3px;

            &:last-child {
                margin-bottom: 8px;
            }
        }
    }

    #menu-checkbox {
        display: none;
    }

    ul {
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: 0;
        text-align: right;
        touch-action: manipulation;

        li {
            display: inline-block;
            margin-top: 10px;
            font-size: 30px;
            color: #dc0000;
            @media (max-width: 699px) {
                font-size: 28px;
            }

            &::after {
                content: "●";
            }

            &:last-child::after {
                content: "";
            }

            &.active {
                display: none;
            }

            a {
                margin: 0 0.5em;
                color: inherit;

                &:hover {
                    color: #f33;
                }
            }
        }
    }
    @media (max-width: 599px) {
        #hamburger {
            display: block;
        }

        ul {
            position: absolute;
            top: 0;
            right: 100%;
            z-index: 2;
            box-sizing: border-box;
            padding-top: 50px;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            transition: right 0.4s;

            li {
                color: #fff;
                display: block !important;
                font-size: 60px;
                margin-bottom: 30px;
                text-align: center;

                &::after {
                    content: "" !important;
                }

                &.active {
                    color: #dc0000;
                }
            }
        }

        #menu-checkbox:checked ~ #hamburger {
            .line1 {
                transform: rotate(-215deg) translate(13px, 1px) scale(0.5, 1);
            }

            .line2 {
                transform: rotate(360deg);
            }

            .line3 {
                transform: rotate(-145deg) translate(13px, -1px) scale(0.5, 1);
            }
        }

        #menu-checkbox:checked ~ ul {
            right: 0;
        }
    }
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.