{"id":15425154,"url":"https://github.com/scottaohara/aria-switch-control","last_synced_at":"2026-06-10T20:24:46.479Z","repository":{"id":45483075,"uuid":"85586901","full_name":"scottaohara/aria-switch-control","owner":"scottaohara","description":"ARIA Switch control component","archived":false,"fork":false,"pushed_at":"2022-01-23T19:08:38.000Z","size":65,"stargazers_count":42,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-14T18:37:58.946Z","etag":null,"topics":["a11y","aria","button","javascript","switch-component"],"latest_commit_sha":null,"homepage":"https://scottaohara.github.io/aria-switch-control/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scottaohara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-20T14:30:05.000Z","updated_at":"2025-09-26T13:50:25.000Z","dependencies_parsed_at":"2022-07-18T22:18:38.548Z","dependency_job_id":null,"html_url":"https://github.com/scottaohara/aria-switch-control","commit_stats":null,"previous_names":["scottaohara/aria-switch-button"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/scottaohara/aria-switch-control","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria-switch-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria-switch-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria-switch-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria-switch-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scottaohara","download_url":"https://codeload.github.com/scottaohara/aria-switch-control/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottaohara%2Faria-switch-control/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34170158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","aria","button","javascript","switch-component"],"created_at":"2024-10-01T17:50:03.123Z","updated_at":"2026-06-10T20:24:46.461Z","avatar_url":"https://github.com/scottaohara.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ARIA Switch Control\nSimilar to a toggle button or checkbox, a switch control is meant to be used when its visual appearance most resembles an \"on and off\" \"switch\".  \n\nThe expected user experience of a switch control is for an immediate action to take place. For instance, toggling a light/dark theme for a website or application, where the change should instantly take effect. \n\nA checkbox, which is often found within a form, or in other UI where multiple elements can be checked, may not be understood to enact an immediate change to other elements or content in the document/screen. That's not to say additional information couldn't be presented to the user to indicate such functionality for a checkbox, but it's not a standard expectation.  \n\nA toggle button and switch are a bit more similar in that they both have an expectation for an immediate change from user interaction. Their primary differences revolve around the manner in which they are supposed to communicate state to assistive technology users, as well as the visual design they each may be most associated with.\n\nA toggle button is typically announced as \"pressed\" or \"selected\" in its active state, where a switch should be announced as \"on\".  \n\n\n## How does it work?\nThe baseline for this component requires one of the following markup patterns:\n\n### Start as a `\u003cbutton\u003e`\n```html\n\u003cbutton type=\"button\" data-switch class=\"class_here\" disabled\u003e\n  \u003c!-- Meaningful label here --\u003e\n\u003c/button\u003e\n```\n\n### Start as a checkbox\n```html\n\u003clabel class=\"class_here\"\u003e\n  \u003cinput type=\"checkbox\" data-switch\u003e\n  \u003c!-- Meaningful label here --\u003e\n\u003c/label\u003e\n```\n\n### Start as a generic element\nFor instance, such as a `\u003cdiv\u003e` or `\u003cspan\u003e`.\n```html\n\u003cspan class=\"class_here\" data-switch hidden\u003e\n  \u003c!-- Meaningful label here --\u003e\n\u003c/span\u003e\n```\n\n### Initial Attribute Breakdown\n`data-switch` is required for each markup pattern to be successfully transformed into a `role=\"switch\"`. All setup and functionality is based around this attribute.  The attribute can be set without a value, to default a switch to the \"off\" state.  Setting the value to \"on\", e.g., `data-switch=\"on` will default the switch to the \"on\" state. \u003cstrong\u003eNote:\u003c/strong\u003e if using a checkbox as the base markup element, and the `checked` attribute will also set the switch to be \"on\" by default, even if `data-switch` has no value.\n\nYou may notice that examples which do not have a checkbox base element have a default `disabled` or `hidden` attribute.  This is due to the fact that these versions of the switch will not function without JavaScript. Rather than rendering a partially created that doesn't function, they can instead be disabled (for a `\u003cbutton\u003e`) or hidden for elements which would not expose or allow the `disabled` attribute.\n\nIf for some reason a switch should be disabled on initial load, use the `data-keep-disabled` to stop the script from removing the `disabled` (`aria-disabled`) or `hidden` attributes.\n\n### Attributes added by JavaScript\nThe JavaScript will add a `role=\"switch\"` to the element with `data-switch`.  \n\nIf the `switch` is not built from a base checkbox, an `aria-checked` attribute will be added to communicate the current state of the switch. If the base element is a checkbox, then the native `checked` attribute and the dirty checked state of the element will be used instead. It is not necessary, nor valid, to use an `aria-checked` attribute on a native checkbox or radio button.\n\n\n## Screen Reader Quirks\nRather than updating this information in multiple places, please [review the breakdown of screen reader issues with `role=\"switch\"`](https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/#affects_on_sr).  While this particular link goes to an example of using `role=switch` on a checkbox, the same issues occur if using `role=switch` on a `\u003cbutton\u003e` element as well.\n\n**Note: With the release of iOS 12.2 (March 2019) the announcement of state has been fixed.** VoiceOver will still announce `role=\"switch\"` as checkboxes, but at least the checked/unchecked states are correctly exposed.\n\n\n## License \u0026 Such\nThis script was written by [Scott O'Hara](https://twitter.com/scottohara).\n\nIt has an [MIT](https://github.com/scottaohara/aria-switch-button/blob/master/LICENSE) license.\n\nDo with it what you will :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottaohara%2Faria-switch-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscottaohara%2Faria-switch-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottaohara%2Faria-switch-control/lists"}