Toggle Switch with Accessibility in JavaScript

Toggle Switch with Accessibility in JavaScript
Code Snippet:Accessible toggle button
Author: kev bonett
Published: January 21, 2024
Last Updated: January 22, 2024
Downloads: 644
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X