Toggle Switch with Accessibility in JavaScript

This JavaScript code implements a Toggle Switch with Accessibility. It allows users to turn something on or off with a button press. The core functionality is toggling between ‘On’ and ‘Off’ states and providing accessibility features for screen readers. It helps improve user experience for those with disabilities.

You can use this code in web applications to create toggle switches that enhance accessibility. It benefits your website by providing an accessible way for users to interact with on/off switches, improving usability for people with disabilities.

How to Create Toggle Switch With Accessibility In JavaScript

1. Copy and paste the following HTML code into your HTML file. This code sets up the basic structure for your toggle switch.

<!-- Based on https://inclusive-components.design/toggle-button/ -->
<p> Press tab key and then enter key to test accessibility. </p>
<span class="toggle-button-wrapper">
    <span>Off</span>
    <button role="switch" aria-checked="false" aria-label="show vat off">
        <span class="accessibility"></span>
        <span class="toggle-button-switch"></span>
    </button>
    <span>On</span>
</span>

2. Now, add the CSS code to your CSS file. This code is responsible for styling the toggle switch and making it visually appealing.

* {
    box-sizing: border-box;
}

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

.toggle-button-wrapper {
    font-family: sans-serif;
    font-size: 1em;
    font-weight: normal;
    line-height: 35px;
}

.toggle-button-wrapper * {
    display: inline-block;
    vertical-align: middle;
}

[role="switch"] {
    background-color: #000;
    border: 0.062em solid #000;
    border-radius: 25px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    height: 35px;
    margin: 0 5px;
    overflow: visible;
    position: relative;
    width: 70px;
}

[role="switch"]:focus {
    outline: 3px dashed darkolivegreen; /* temp style to show focus state in POC */
}

.toggle-button-switch {
    background: #ffd800;
    border-color: #ffd800;
    color: #000;
    border: 1px solid #000;
    border-radius: 50%;
    display: inline-block;
    height: 25px;
    right: 5px;
    line-height: 25px;
    position: absolute;
    top: 2.5px;
    width: 25px;
}

[role="switch"][aria-checked="true"] .toggle-button-switch {
    left: 5px;
}

3. Finally, insert the JavaScript code into your project. This code handles the functionality of the toggle switch, including toggling between ‘On’ and ‘Off’ states and ensuring accessibility.

var toggle = document.querySelector('[aria-checked]'),
    $this,
    pressed,
    label;

toggle.addEventListener('click', function(e) {
    $this = e.target;

    pressed = $this.getAttribute('aria-checked') === 'true';
    $this.setAttribute('aria-checked', !pressed);

    label = $this.textContent.trim();
    if (!pressed) {
        $this.setAttribute('aria-label', label + ' on');
    } else {
        $this.setAttribute('aria-label', label + ' off');
    }
});

Feel free to customize the CSS styles to match your project’s design. You can change colors, sizes, or fonts to suit your needs.

That’s all! hopefully, you have successfully created a toggle switch with an accessibility feature in JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.