{"id":20905010,"url":"https://github.com/leifcr/switch_access","last_synced_at":"2026-05-24T10:36:50.771Z","repository":{"id":5512619,"uuid":"6713349","full_name":"leifcr/switch_access","owner":"leifcr","description":"Switch Access (AAC) for your website","archived":false,"fork":false,"pushed_at":"2017-04-25T22:59:56.000Z","size":351,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-12-27T20:58:18.546Z","etag":null,"topics":["aac","accessibility","javascript","scanning","switch","switch-access","switch-control"],"latest_commit_sha":null,"homepage":"http://leifcr.github.com/switch_access","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leifcr.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":"2012-11-15T23:13:17.000Z","updated_at":"2025-01-14T20:08:28.000Z","dependencies_parsed_at":"2022-07-15T20:47:09.858Z","dependency_job_id":null,"html_url":"https://github.com/leifcr/switch_access","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/leifcr/switch_access","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifcr%2Fswitch_access","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifcr%2Fswitch_access/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifcr%2Fswitch_access/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifcr%2Fswitch_access/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leifcr","download_url":"https://codeload.github.com/leifcr/switch_access/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifcr%2Fswitch_access/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33431038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T22:14:44.296Z","status":"online","status_checked_at":"2026-05-24T02:00:06.296Z","response_time":57,"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":["aac","accessibility","javascript","scanning","switch","switch-access","switch-control"],"created_at":"2024-11-18T13:20:39.772Z","updated_at":"2026-05-24T10:36:50.751Z","avatar_url":"https://github.com/leifcr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Switch Access \n\n*switch_access.coffee* is a coffeescript that enables switch/keyboard control for navigating a webpage for AAC users.\n\n## Features\n\n- 1 or 2 switches\n- Switch groups and nested groups\n- Switches need to send normal \"keys\" (e.g. space/enter)\n- Lots of options to customize how the switch access works on a page.\n- Triggers the a click on the a html element or the first link inside the element (depending on options)\n\n## Usage\n\n### Example\n\nHTML markup:\n\n```html\n  \u003cdiv class\"switch-element\"\u003e\n    Div is the switch-element\n    \u003ca href=\"#\"\u003elink inside a div.\u003c/a\u003e\n  \u003c/div\u003e\n  \u003ca href=\"#\" class=\"switch-element\"\u003elink is a switch element\u003c/a\u003e\n  \u003cp class=\"switch-element\"\u003e\u003ca href=\"#\"\u003elink inside a p.\u003c/a\u003e\u003c/p\u003e\n```\n\nJavascript:\n\n```javascript\n  $(document).ready(function(){\n    window.switch_access = new SwitchAccess({\n      switches: {\n        number_of_switches: 2\n      }\n    });\n  });\n```\n\n### Methods\n\nAll methods assume that you initiated the controller similar to the above example.\n\n```javascript\n  // start switch access (Done automatically upon construction of object)\n  window.switch_access.start() \n\n  // stop switch access\n  window.switch_access.stop() \n\n  // Remove/Destroy the switch access \n  window.switch_access.destroy()\n\n  // set options. Note: The switch access will stop, so you need to call start after setting options.\n  window.switch_access.setoptions({\n    switches: {\n      number_of_switches: 1,\n      single_switch_move_time: 2500 // 2,5 seconds (time is in milliseconds)\n    }\n  })\n\n```\n\n### Options\n```coffeescript\n  ###\n  Switch/Key settings \n  ###\n  switches:\n\n    ### \n    The number of switches 0 = disable, 1 = single switch, 2 = two switches \n    Default: 2\n    ###\n    number_of_switches:                  0\n\n    ###\n    Array for the keycodes to use as single switch (Multiple keycodes possible)\n    Default: [32, 13]  (32 = 'Space', 13 = 'Enter')        \n    ###\n    keys_1:                              [32, 13] # Space / Enter\n\n    ###\n    Array of two arrays for the keys to use as two switches\n    Default: [[32, 9], [13]] (9 = 'Tab, 32 = 'Space', 13 = 'Enter')        \n    ###\n    keys_2:                              [[9, 32], [13]] # Tab + Space / Enter\n    \n    #keys_3:                             # forward/backward and select\n    \n    ###\n    Time for single switch scanning to move from element to element \n    Default: 1500 milliseconds\n    ###\n    single_switch_move_time:             1500\n    \n    ###\n    If the single switch movement should restart/go to index 0 when restarted\n    Default: true\n    ###\n    single_switch_restart_on_activate:   true\n\n    ###\n    Time after \"triggering\" a element to it's activated \n    Default: 0\n    ###\n    delay_before_activating_element:     0\n\n    ###\n    Delay before an keypress is \"allowed\" after last keypress.\n    Default: 250 ms\n    ###\n    delay_for_allowed_keypress:          250;\n\n    ###\n    Groups enabled/disabled (If elements should be grouped or run as single elements)\n    Default: true\n    ###\n    groups:                              true;\n\n  ###\n  DOM options\n  ###\n  dom:\n    ###\n    The class which all elements must have to be a switch controlled element\n    The class should be appended with numbers 1,2,3 etc to set order of elements. order is unpredicaable if several\n    elements have the same number within a group.\n    Default: \"switch-element-\"\n    ###\n    element_class:            \"switch-element-\" # Use classnames such as switch-element-1 switch-element-2 or change this value\n    ###\n    The jQuery selector from where the first switch element should be searched for.\n    Usually this should be body or the first container on the webpage\n    Note: Use a selector which selects a single object. Else behaviour is unpredictable\n    ###\n    start_element_selector:   \"body\"\n\n  ###\n  Other settings\n  ###\n  # Use .search where you have class=\"search\" or #search for id=\"search\" (jQuery selectors)\n  key_filter_skip:        [\".search\"]\n  \n  ###\n  If set to true, the first link within the element is \"clicked\".\n  Else the actual element is clicked.\n  FUTURE feature: (on the todo list) \n  A data attribute can be set on the element in order to override this on a per-element basis\n  ###\n  activate_first_link:    true # activate element or first link within\n  ###\n  Enable/Disable debug\n  Note: log4javascript must be available if used\n  Default: false\n  ###\n  debug:                  false\n\n  ###\n  Visual settings\n  ###\n  visual:\n    ###\n    Scroll to ensure the entire element in focus is visible (if possible)\n    Default: true\n    ###\n    ensure_visible_element: true # ensure element is visible on the page\n\n    ###\n    The number of pixels for margin to the viewport/window when the element is positioned in the viewport/window\n    Default: 15\n    ###\n    scroll_offset:          15 # offset from top/bottom in pixels for the element\n\n    ###\n    Time in milliseconds the scroll will last (set to 0 if instant scroll is preferred)\n    Default: 200\n    ###\n    animate_scroll_time:    200 # time to use for animating scroll\n    ###\n    The easing to use for animation\n    Default: \"linear\"\n    ###\n    easing:                 \"linear\" # easing to use for scrolling\n\n  ###\n  Element highlighting using the built in Highlighter object feature\n  ###\n  highlighter:\n    ###\n    Use highlighter div element for each element.\n    A div is positioned absolute around the element and shown/hidden accordingly\n    Default: true\n    ###\n    use:                      true\n    \n    ###\n    Additional content for the highlighter\n    Note: The content is placed within every highlighter and multiple highlighters can be visible at the same time.\n          It is best to not use ID's on elements placed inside the highlighter\n    Default: \"\"\n    ###\n    content:                  \"\"\n    \n    ###\n    Class for the highlighter\n    Default: \"highlighter\"\n    ###\n    class:                    \"highlighter\"\n\n    ###\n    The class when a highlighter is active/currently selected\n    Default: \"current\"\n    ###\n    current_class:            \"current\"\n\n    ###\n    The class when set on a highlighter when activated action is triggered \n    Note: only usable if options.visual.delay_before_activating_element is \u003e 0\n    Default: \"activate\"\n    ###\n    activate_class:           \"activate\"\n    \n    ###\n    Margin between the highlighter and the element\n    Default: 5\n    ###\n    margin_to_element:        5\n\n    ###\n    Selector to set size on. (Change in case you have content inside the highlighter you wish to highlight)\n    ###\n    selector_for_set_to_size: \".highlighter\"\n    \n    ###\n    Use CSS watch to watch the element for changes in position and dimensions\n    This is only needed if you have javascript or other DOM elements \n    that might change the position or size of a switch-enabled element\n    Default: false\n    ###\n    watch_for_resize:         false\n    # use_size_position_check:  true\n    \n    ###\n    The ID for the holder for all highlighters. Unlikely to need changing\n    Default: \"sw-highlighter-holder\"\n    ###\n    holder_id:               \"sw-highlighter-holder\"\n\n    ###\n    Read out the z-index for the element to be highlighted and set to 1 less than the value specified\n    on the element.\n    If it's set to inherit or auto it will create set z-index 5371 on the element and 5370 on the highlighter\n    ###\n    auto_z_index:            true\n\n  ###\n  Options specific to highlighting\n  ###\n  highlight:\n    ###\n    Options specifict to highlighting a switch-element\n    ###\n    element:\n      ###\n      The class when a element is active/currently selected\n      Default: \"current\"\n      ###\n      current_class:         \"current\"\n\n      ###\n      The class when set on a switch-element when activated action is triggered \n      Note: only usable if options.visual.delay_before_activating_element is \u003e 0\n      Default: \"activate\"\n      ###\n      activate_class:        \"activate\"\n\n```\n\n## Special data attributes\n\nTwo data attributes are supported for single switch. These data attributes have noe effect when using two switches.\n\n\u003cdl\u003e\n  \u003cdt\u003edata-sw-single-stay\u003c/dt\u003e\n  \u003cdd\u003eSet this to true to stop scanning when the element is highlighted. The user has to click the single switch to start scanning/move forward\u003c/dd\u003e\n  \u003cdt\u003edata-sw-single-noaction\u003c/dt\u003e\n  \u003cdd\u003eSet this to true to skip triggering actions on the element. Unless this option is set, the user have to press twice to move away from a field. First click will activate, second will move\u003c/dd\u003e\n\u003c/dl\u003e\n\n\n#### Example\n\n```html\n  \u003cdiv class=\"switch-element-1\" data-sw-single-stay=\"true\"\u003e\n    \u003ca href\"#test\"\u003eSwitch element 1, which will trigger #test anchor and then move to next element upon click\u003c/a\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"switch-element-1\" data-sw-single-stay=\"true\" data-sw-single-noaction\u003e\n    \u003ca href=\"#test\"\u003eSwitch element 1, first click will move. Anchor #test will never be triggered for single switch.\u003c/a\u003e\n  \u003c/div\u003e\n```\n\n## Events\n\nThere are four events dispatched that can be listened to:\n\u003cdl\u003e\n  \u003cdt\u003eswitch-access-activate\u003c/dt\u003e\n  \u003cdd\u003eThis event is dispatched when a element is activated. Three parameters are sent with the element. \n    \u003col\u003e\n      \u003cli\u003eThe index of the element that has been highlighted/moved to (0-based).\u003c/li\u003e\n      \u003cli\u003eThe level (group level) of the activated element (0-based), where 0 is root\u003c/li\u003e\n      \u003cli\u003eThe clicked element (Either the DOM element that is the switch element or a link inside, depending on options)\u003c/li\u003e\n      \u003cli\u003eThe current element.\u003c/li\u003e\n    \u003c/ol\u003e\n  \u003c/dd\u003e\n  \u003cdt\u003eswitch-access-move\u003c/dt\u003e\n  \u003cdd\u003eThis event is dispatched when a element is moved to (highlighted). Two parameters are sent with the element. \n    \u003col\u003e\n      \u003cli\u003eThe index of the element that has been highlighted/moved to (0-based).\u003c/li\u003e\n      \u003cli\u003eThe level (group level) of the activated element (0-based), where 0 is root\u003c/li\u003e\n      \u003cli\u003eThe current element.\u003c/li\u003e\n    \u003c/ol\u003e\n  \u003c/dd\u003e\n  \u003cdt\u003eswitch-access-enter-group\u003c/dt\u003e\n  \u003cdd\u003eThis event is dispatched when a group of switch-elements is entered.\n    \u003col\u003e\n      \u003cli\u003eThe index of the element that is the parent of the highlighted group/objects (0-based).\u003c/li\u003e\n      \u003cli\u003eThe level (group level) of the highlighted objects\u003c/li\u003e\n      \u003cli\u003eThe element that is the parent of the highlighted group/objects.\u003c/li\u003e\n    \u003c/ol\u003e\n  \u003c/dd\u003e\n  \u003cdt\u003eswitch-access-leave-group\u003c/dt\u003e\n  \u003cdd\u003eThis event is dispatched when a group of switch-elements is left.\n    \u003col\u003e\n      \u003cli\u003eThe index of the highlighted element (0-based).\u003c/li\u003e\n      \u003cli\u003eThe level (group level) of the highlighted object\u003c/li\u003e\n      \u003cli\u003eThe element that is highlighted.\u003c/li\u003e\n    \u003c/ol\u003e\n  \u003c/dd\u003e\n\u003c/dl\u003e\n\n\n## Requirements\n\njQuery (1.8 or newer)\n\n##### For development:\nlog4javascript (http://log4javascript.org) only if debug is set to true\n\n##### For more easings on the scrolling:\nhttp://gsgd.co.uk/sandbox/jquery/easing/\n\n## Browser Compatibility\n\nChrome\nFirefox\nInternet Explorer 9+\n\n## License\n\nThis work is under either a GPL License or a Commercial license. For commercial usage, please contact (leifcr@gmail.com)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleifcr%2Fswitch_access","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleifcr%2Fswitch_access","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleifcr%2Fswitch_access/lists"}