From 97f74a951d3a33e6f7fc638909eb0b331f7a5e4d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Fri, 7 May 2021 10:02:26 -0500 Subject: [PATCH 01/46] adding initial switch example using input[type=checkbox] --- examples/index.html | 5 + examples/switch/css/switch-checkbox.css | 74 +++++++++ examples/switch/js/switch-checkbox.js | 43 +++++ examples/switch/switch-checkbox.html | 209 ++++++++++++++++++++++++ test/tests/switch_switch-checkbox.js | 109 ++++++++++++ test/util/assertInputChecked.js | 26 +++ 6 files changed, 466 insertions(+) create mode 100644 examples/switch/css/switch-checkbox.css create mode 100644 examples/switch/js/switch-checkbox.js create mode 100644 examples/switch/switch-checkbox.html create mode 100644 test/tests/switch_switch-checkbox.js create mode 100644 test/util/assertInputChecked.js diff --git a/examples/index.html b/examples/index.html index 86bceab014..5144ee5fda 100644 --- a/examples/index.html +++ b/examples/index.html @@ -166,6 +166,7 @@

Examples by Role

  • Editor Menubar (HC)
  • Color Viewer Slider (HC)
  • Date Picker Spin Button
    • +
  • Switch using input[type="checkbox"] (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
  • Navigation Treeview (HC)
    • @@ -356,6 +357,10 @@

    Examples by Role

    + + switch + Switch using input[type="checkbox"] + tab diff --git a/examples/switch/css/switch-checkbox.css b/examples/switch/css/switch-checkbox.css new file mode 100644 index 0000000000..67beb9b659 --- /dev/null +++ b/examples/switch/css/switch-checkbox.css @@ -0,0 +1,74 @@ +label { + display: block; + margin: 0.5em; + padding: 4px 4px 6px 6px; + border: 0 solid #005a9c; + border-radius: 5px; + width: 16em; +} + +label .label { + display: inline-block; + width: 9em; +} + +label input[role="switch"] { + opacity: 0; +} + +label input[role="switch"] ~ .state { + display: inline-block; +} + +label input[role="switch"] ~ .state > .container { + position: relative; + top: 2px; + display: inline-block; + border: 2px solid black; + width: 40px; + height: 20px; + border-radius: 11px; +} + +label input[role="switch"] ~ .state > .container > .position { + position: relative; + top: 1px; + left: 2px; + display: inline-block; + border: 2px solid black; + border-radius: 9px; + width: 14px; + height: 14px; + background: black; + opacity: 0.6; +} + +label input[role="switch"] ~ .state::after { + padding-left: 4px; + content: "Off"; +} + +label input[role="switch"]:checked ~ .state > .container > .position { + left: 20px; + border-color: green; + background: green; + opacity: 1; +} + +label input[role="switch"]:checked ~ .state::after { + padding-left: 4px; + content: "On"; +} + +label.focus, +label:hover { + padding: 2px 2px 4px 4px; + border-width: 2px; + outline: none; + background-color: #def; +} + +label.focus span.container, +label:hover span.container { + background-color: white; +} diff --git a/examples/switch/js/switch-checkbox.js b/examples/switch/js/switch-checkbox.js new file mode 100644 index 0000000000..b82d640ec0 --- /dev/null +++ b/examples/switch/js/switch-checkbox.js @@ -0,0 +1,43 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: switch-checkbox.js + * + * Desc: Switch widget using input[type=checkbox] that implements ARIA Authoring Practices + */ + +'use strict'; + +class CheckboxSwitch { + constructor(domNode) { + this.switchNode = domNode; + this.switchNode.addEventListener('keydown', () => this.onKeydown(event)); + this.switchNode.addEventListener('focus', () => this.onFocus(event)); + this.switchNode.addEventListener('blur', () => this.onBlur(event)); + } + + onKeydown(event) { + if (event.key === 'Enter') { + event.currentTarget.checked = !event.currentTarget.checked; + event.stopPropagation(); + event.preventDefault(); + } + } + + onFocus(event) { + event.currentTarget.parentNode.classList.add('focus'); + } + + onBlur(event) { + event.currentTarget.parentNode.classList.remove('focus'); + } +} + +// Initialize switches +window.addEventListener('load', function () { + // Initialize the Switch component on all matching DOM nodes + Array.from( + document.querySelectorAll('input[type=checkbox][role^=switch]') + ).forEach((element) => new CheckboxSwitch(element)); +}); diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html new file mode 100644 index 0000000000..0d57459d8b --- /dev/null +++ b/examples/switch/switch-checkbox.html @@ -0,0 +1,209 @@ + + + + + Switch using input[type="checkbox"] Example | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + + +
    +

    Switch using input[type="checkbox"] Example

    +

    + This example implements the Switch design pattern using input[type="checkbox"] elements and CSS borders to implement the graphical rendering of the state of the switch. Switches are similar to checkboxes, but should be rendered by assistive technologies as "on" and "off", instead of "checked" and "unchecked". +

    +

    Similar examples include:

    + + +
    +

    Example

    + +
    +
    +

    Accessibility Preferences

    + + + +
    +
    + +
    + +
    +
    +

    Accessibility Features

    +
      +
    • To help assistive technology users understand that the accessibility preferences are made of a group of two switches, the switches are wrapped in a group labeled by the heading that labels the notification options.
      • +
    • To provide a visual indication the labels can also be used to change the state of a switch, the background color is changed and a border appears when the pointer moves over the switch or the label.
      • +
    • A visual text label of the state of the switch is placed after the graphic indication of the state to make it easier for users with visual or cognitive impairments to understand the current state of the switch.
      • +
    • The graphical rendering of the switch state uses 2 pixel borders for the container, and a 2 pixel border on the circle indicating the on and off position of the switch. There is 2 pixels of space between the container border and the border of the circle. The use of spacing and borders insures the graphic will be visible and discernible in high contrast modes used by people with visual impairments. +
      • +
    +
    +
    + +
    +

    Keyboard Support

    + + + + + + + + + + + + + + + + + +
    KeyFunction
    Tab +
      +
    • Moves keyboard focus to the switch.
      • +
    +
    Space, Enter +
      +
    • Toggle switch between on and off.
      • +
    +
    +
    + +
    +

    Role, Property, State, and Tabindex Attributes

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    h3 +
      +
    • Provides a grouping label for the group of switches.
      • +
    +
    groupdiv +
      +
    • Identifies the div element as a group container for the switches.
      • +
    +
    aria-labelledbydiv +
      +
    • The aria-labelledby attribute references the id attribute of the h3 element to define the accessible name for the group of switches.
      • +
    +
    switchinput[type="checkbox"] +
      +
    • The role="switch" attribute identified the input[type="checkbox"] element as an ARIA switch.
      • +
    • The accessible name is defined using the label element.
      • +
    +
    +
    + +
    +

    Javascript and CSS Source Code

    + +
    + +
    +

    HTML Source Code

    + +
    + + + +
    +
    + + + diff --git a/test/tests/switch_switch-checkbox.js b/test/tests/switch_switch-checkbox.js new file mode 100644 index 0000000000..99503dfee7 --- /dev/null +++ b/test/tests/switch_switch-checkbox.js @@ -0,0 +1,109 @@ +const { ariaTest } = require('..'); +const { By, Key } = require('selenium-webdriver'); +const assertAriaLabelledby = require('../util/assertAriaLabelledby'); +const assertAriaRoles = require('../util/assertAriaRoles'); +const assertTabOrder = require('../util/assertTabOrder'); +const assertInputChecked = require('../util/assertInputChecked'); + +const exampleFile = 'switch/switch-checkbox.html'; + +const ex = { + groupSelector: '#ex1 [role="group"]', + switchSelector: '#ex1 [role="switch"]', + switches: ['#id-switch-1', '#id-switch-2'], +}; + +// Attributes + +ariaTest('element h3 exists', exampleFile, 'h3', async (t) => { + let header = await t.context.queryElements(t, '#ex1 h3'); + + t.is( + header.length, + 1, + 'One h3 element exist within the example to label the switches' + ); + + t.truthy( + await header[0].getText(), + 'One h3 element exist with readable content within the example to label the switches' + ); +}); + +ariaTest( + 'role="group" element exists', + exampleFile, + 'group-role', + async (t) => { + await assertAriaRoles(t, 'ex1', 'group', '1', 'div'); + } +); + +ariaTest( + '"aria-labelledby" on group element', + exampleFile, + 'group-aria-labelledby', + async (t) => { + await assertAriaLabelledby(t, ex.groupSelector); + } +); + +ariaTest( + 'role="switch" elements exist', + exampleFile, + 'switch-role', + async (t) => { + await assertAriaRoles(t, 'ex1', 'switch', '2', 'input'); + } +); + +ariaTest( + 'key TAB moves focus between switches', + exampleFile, + 'key-tab', + async (t) => { + await assertTabOrder(t, ex.switches); + } +); + +ariaTest( + 'key SPACE ets or unsets switch', + exampleFile, + 'key-space-enter', + async (t) => { + for (let switchSelector of ex.switches) { + // Send SPACE key to check box to select + await t.context.session + .findElement(By.css(switchSelector)) + .sendKeys(Key.SPACE); + await assertInputChecked(t, switchSelector, true); + + // Send SPACE key to check box to unselect + await t.context.session + .findElement(By.css(switchSelector)) + .sendKeys(Key.SPACE); + await assertInputChecked(t, switchSelector, false); + } + } +); + +ariaTest( + 'key Enter sets or unsets switch', + exampleFile, + 'key-space-enter', + async (t) => { + for (let switchSelector of ex.switches) { + // Send Enter key to check box to select + await t.context.session + .findElement(By.css(switchSelector)) + .sendKeys(Key.ENTER); + await assertInputChecked(t, switchSelector, true); + + // Send Enter key to check box to unselect + await t.context.session + .findElement(By.css(switchSelector)) + .sendKeys(Key.ENTER); + await assertInputChecked(t, switchSelector, false); + } + } +); diff --git a/test/util/assertInputChecked.js b/test/util/assertInputChecked.js new file mode 100644 index 0000000000..e1520fe199 --- /dev/null +++ b/test/util/assertInputChecked.js @@ -0,0 +1,26 @@ +const assert = require('assert'); + +/** + * Confirm the input element checked state. + * + * @param {object} t - ava execution object + * @param {string} elementSelector - the input element + */ + +module.exports = async function assertInputChecked(t, elementSelector, value) { + const inputChecked = await t.context.session.executeScript( + async function () { + const selector = arguments[0]; + let el = document.querySelector(selector); + return el.checked === arguments[1]; + }, + elementSelector, + value + ); + + assert.ok( + inputChecked, + 'input[type=checked] at ' + elementSelector + ' should have value: ' + value + ); + t.pass(); +}; From 02e388cdcc3c038c5b7154a9a882370c1ce04713 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Fri, 7 May 2021 10:07:09 -0500 Subject: [PATCH 02/46] fixed spell checker issue --- test/tests/switch_switch-checkbox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/tests/switch_switch-checkbox.js b/test/tests/switch_switch-checkbox.js index 99503dfee7..5f80bd41ed 100644 --- a/test/tests/switch_switch-checkbox.js +++ b/test/tests/switch_switch-checkbox.js @@ -67,7 +67,7 @@ ariaTest( ); ariaTest( - 'key SPACE ets or unsets switch', + 'key SPACE turns switch on and off', exampleFile, 'key-space-enter', async (t) => { @@ -88,7 +88,7 @@ ariaTest( ); ariaTest( - 'key Enter sets or unsets switch', + 'key Enter turns switch on and off', exampleFile, 'key-space-enter', async (t) => { From 91aeb0bf3be50fcfeb9e9d16b959ee3455b65a4f Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Fri, 7 May 2021 10:45:50 -0500 Subject: [PATCH 03/46] updated documentation --- examples/index.html | 1 - examples/switch/css/switch-checkbox.css | 8 +++++ examples/switch/switch-checkbox.html | 43 ++++--------------------- test/tests/switch_switch-checkbox.js | 41 +++-------------------- 4 files changed, 19 insertions(+), 74 deletions(-) diff --git a/examples/index.html b/examples/index.html index 5144ee5fda..24fb318104 100644 --- a/examples/index.html +++ b/examples/index.html @@ -166,7 +166,6 @@

    Examples by Role

  • Editor Menubar (HC)
  • Color Viewer Slider (HC)
  • Date Picker Spin Button
    • -
  • Switch using input[type="checkbox"] (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
  • Navigation Treeview (HC)
    • diff --git a/examples/switch/css/switch-checkbox.css b/examples/switch/css/switch-checkbox.css index 67beb9b659..02af66820c 100644 --- a/examples/switch/css/switch-checkbox.css +++ b/examples/switch/css/switch-checkbox.css @@ -1,3 +1,11 @@ +fieldset { + width: 22em; +} + +legend { + font-size: 110%; +} + label { display: block; margin: 0.5em; diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 0d57459d8b..42f2b57416 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -39,8 +39,8 @@

    Switch using input[type="checkbox"] Example

    Example

    -
    -

    Accessibility Preferences

    +
    + Accessibility Preferences -
    +
    @@ -75,9 +75,10 @@

    Accessibility Preferences

    Accessibility Features

      -
    • To help assistive technology users understand that the accessibility preferences are made of a group of two switches, the switches are wrapped in a group labeled by the heading that labels the notification options.
      • -
    • To provide a visual indication the labels can also be used to change the state of a switch, the background color is changed and a border appears when the pointer moves over the switch or the label.
      • -
    • A visual text label of the state of the switch is placed after the graphic indication of the state to make it easier for users with visual or cognitive impairments to understand the current state of the switch.
      • +
    • To help assistive technology users understand that the accessibility preferences are made of a group of two switches, the switches are wrapped in a fieldset element labeled with a legend element.
      • +
    • To provide a visual indication the labels can also be used to change the state of a switch, the background color is changed and a border appears when the pointer moves over the switch or the label. Including the border insures people with visual impairments can perceive the target area in high contrast modes.
      • +
    • A visual text label (i.e. "on" and "off") of the state of the switch is placed after the graphic indication of the state to make it easier for users with visual or cognitive impairments to understand the current state of the switch.
      + NOTE: CSS attribute selectors are used ensure synchronization of the visual states with the value of the input[type="checkbox"].checked property.
    • The graphical rendering of the switch state uses 2 pixel borders for the container, and a 2 pixel border on the circle indicating the on and off position of the switch. There is 2 pixels of space between the container border and the border of the circle. The use of spacing and borders insures the graphic will be visible and discernible in high contrast modes used by people with visual impairments.
    @@ -126,36 +127,6 @@

    Role, Property, State, and Tabindex Attributes

    - - - - h3 - -
      -
    • Provides a grouping label for the group of switches.
      • -
    - - - - group - - div - -
      -
    • Identifies the div element as a group container for the switches.
      • -
    - - - - - aria-labelledby - div - -
      -
    • The aria-labelledby attribute references the id attribute of the h3 element to define the accessible name for the group of switches.
      • -
    - - switch diff --git a/test/tests/switch_switch-checkbox.js b/test/tests/switch_switch-checkbox.js index 5f80bd41ed..db8990cfc1 100644 --- a/test/tests/switch_switch-checkbox.js +++ b/test/tests/switch_switch-checkbox.js @@ -1,6 +1,5 @@ const { ariaTest } = require('..'); const { By, Key } = require('selenium-webdriver'); -const assertAriaLabelledby = require('../util/assertAriaLabelledby'); const assertAriaRoles = require('../util/assertAriaRoles'); const assertTabOrder = require('../util/assertTabOrder'); const assertInputChecked = require('../util/assertInputChecked'); @@ -8,46 +7,14 @@ const assertInputChecked = require('../util/assertInputChecked'); const exampleFile = 'switch/switch-checkbox.html'; const ex = { - groupSelector: '#ex1 [role="group"]', switchSelector: '#ex1 [role="switch"]', - switches: ['#id-switch-1', '#id-switch-2'], + switches: [ + '#ex1 fieldset label:nth-child(2) input', + '#ex1 fieldset label:nth-child(3) input', + ], }; // Attributes - -ariaTest('element h3 exists', exampleFile, 'h3', async (t) => { - let header = await t.context.queryElements(t, '#ex1 h3'); - - t.is( - header.length, - 1, - 'One h3 element exist within the example to label the switches' - ); - - t.truthy( - await header[0].getText(), - 'One h3 element exist with readable content within the example to label the switches' - ); -}); - -ariaTest( - 'role="group" element exists', - exampleFile, - 'group-role', - async (t) => { - await assertAriaRoles(t, 'ex1', 'group', '1', 'div'); - } -); - -ariaTest( - '"aria-labelledby" on group element', - exampleFile, - 'group-aria-labelledby', - async (t) => { - await assertAriaLabelledby(t, ex.groupSelector); - } -); - ariaTest( 'role="switch" elements exist', exampleFile, From c00b6659a0a36d49eca0f32f7d48c0876e223aa9 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Fri, 7 May 2021 11:43:36 -0500 Subject: [PATCH 04/46] add exception for the HTML validator --- .vnurc | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.vnurc b/.vnurc index 460f3625dc..47e6849126 100644 --- a/.vnurc +++ b/.vnurc @@ -20,3 +20,5 @@ The “row” role is unnecessary for element “tr”. Attribute “aria-activedescendant” value should either refer to a descendant element, or should be accompanied by attribute “aria-owns”. # https://github.com/w3c/aria-practices/issues/1678 Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections. +# https://github.com/validator/validator/issues/1122 +Element “input” is missing required attribute “aria-checked”. From 7f943cc263a379df913ce83d90fd81dc7c505b5c Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 13 May 2021 15:30:42 -0500 Subject: [PATCH 05/46] checked out menu-button_links.js to use same fix in add-jump-to branch --- test/tests/menu-button_links.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/tests/menu-button_links.js b/test/tests/menu-button_links.js index 317a5908dd..466dbd990b 100644 --- a/test/tests/menu-button_links.js +++ b/test/tests/menu-button_links.js @@ -262,7 +262,8 @@ ariaTest('"enter" on role="menuitem"', exampleFile, 'menu-enter', async (t) => { const item = (await t.context.queryElements(t, ex.menuitemSelector))[index]; // Update url to remove external reference for dependable testing - const newUrl = t.context.url + '#test-url-change'; + const newUrl = + (await t.context.session.getCurrentUrl()) + '#test-url-change'; await replaceExternalLink(t, newUrl, ex.menuitemSelector, index); await openMenu(t); From 77abf1d4f01dc8c86584658300ad8863f053d4e5 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 13 May 2021 15:43:32 -0500 Subject: [PATCH 06/46] restored original test file --- test/tests/menu-button_links.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/tests/menu-button_links.js b/test/tests/menu-button_links.js index 466dbd990b..317a5908dd 100644 --- a/test/tests/menu-button_links.js +++ b/test/tests/menu-button_links.js @@ -262,8 +262,7 @@ ariaTest('"enter" on role="menuitem"', exampleFile, 'menu-enter', async (t) => { const item = (await t.context.queryElements(t, ex.menuitemSelector))[index]; // Update url to remove external reference for dependable testing - const newUrl = - (await t.context.session.getCurrentUrl()) + '#test-url-change'; + const newUrl = t.context.url + '#test-url-change'; await replaceExternalLink(t, newUrl, ex.menuitemSelector, index); await openMenu(t); From a32ebb7bdbfb488ced75f3b32cd4b5865242249d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 27 May 2021 16:53:25 -0500 Subject: [PATCH 07/46] updated examples for on/off labels to be in content and not CSS --- examples/switch/css/switch-checkbox.css | 26 +++++++++++++++++++------ examples/switch/switch-checkbox.html | 4 ++++ 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/examples/switch/css/switch-checkbox.css b/examples/switch/css/switch-checkbox.css index 02af66820c..9285d44e76 100644 --- a/examples/switch/css/switch-checkbox.css +++ b/examples/switch/css/switch-checkbox.css @@ -18,6 +18,10 @@ label { label .label { display: inline-block; width: 9em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } label input[role="switch"] { @@ -26,6 +30,10 @@ label input[role="switch"] { label input[role="switch"] ~ .state { display: inline-block; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } label input[role="switch"] ~ .state > .container { @@ -51,9 +59,12 @@ label input[role="switch"] ~ .state > .container > .position { opacity: 0.6; } -label input[role="switch"] ~ .state::after { - padding-left: 4px; - content: "Off"; +label input[role="switch"] ~ .state span.off { + display: inline; +} + +label input[role="switch"] ~ .state span.on { + display: none; } label input[role="switch"]:checked ~ .state > .container > .position { @@ -63,9 +74,12 @@ label input[role="switch"]:checked ~ .state > .container > .position { opacity: 1; } -label input[role="switch"]:checked ~ .state::after { - padding-left: 4px; - content: "On"; +label input[role="switch"]:checked ~ .state > span.off { + display: none; +} + +label input[role="switch"]:checked ~ .state > span.on { + display: inline; } label.focus, diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 42f2b57416..a2a73488ac 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -51,6 +51,8 @@

    Example

    + On + Off @@ -64,6 +66,8 @@

    Example

    + On + Off From 27f2ebe4e6c881ad831571193af77f0d6a58a4df Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Fri, 28 May 2021 15:04:43 -0500 Subject: [PATCH 08/46] updated CSS for example to make it simplier --- examples/switch/css/switch-checkbox.css | 14 +++----------- examples/switch/switch-checkbox.html | 2 +- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/examples/switch/css/switch-checkbox.css b/examples/switch/css/switch-checkbox.css index 9285d44e76..4b3298a797 100644 --- a/examples/switch/css/switch-checkbox.css +++ b/examples/switch/css/switch-checkbox.css @@ -59,11 +59,11 @@ label input[role="switch"] ~ .state > .container > .position { opacity: 0.6; } -label input[role="switch"] ~ .state span.off { - display: inline; +label input[role="switch"]:not(:checked) ~ .state span.on { + display: none; } -label input[role="switch"] ~ .state span.on { +label input[role="switch"]:checked ~ .state > span.off { display: none; } @@ -74,14 +74,6 @@ label input[role="switch"]:checked ~ .state > .container > .position { opacity: 1; } -label input[role="switch"]:checked ~ .state > span.off { - display: none; -} - -label input[role="switch"]:checked ~ .state > span.on { - display: inline; -} - label.focus, label:hover { padding: 2px 2px 4px 4px; diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index a2a73488ac..d0b85cc8e8 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -82,7 +82,7 @@

    Accessibility Features

  • To help assistive technology users understand that the accessibility preferences are made of a group of two switches, the switches are wrapped in a fieldset element labeled with a legend element.
  • To provide a visual indication the labels can also be used to change the state of a switch, the background color is changed and a border appears when the pointer moves over the switch or the label. Including the border insures people with visual impairments can perceive the target area in high contrast modes.
  • A visual text label (i.e. "on" and "off") of the state of the switch is placed after the graphic indication of the state to make it easier for users with visual or cognitive impairments to understand the current state of the switch.
    - NOTE: CSS attribute selectors are used ensure synchronization of the visual states with the value of the input[type="checkbox"].checked property.
    • + NOTE: CSS attribute selectors are used ensure synchronization of the visual states with the value of the input[type="checkbox"]:checked property.
  • The graphical rendering of the switch state uses 2 pixel borders for the container, and a 2 pixel border on the circle indicating the on and off position of the switch. There is 2 pixels of space between the container border and the border of the circle. The use of spacing and borders insures the graphic will be visible and discernible in high contrast modes used by people with visual impairments.
    • From bf5ded68cc5cc506f27be16be0a77ffc91800a2e Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 15 Jul 2021 08:56:04 -0500 Subject: [PATCH 09/46] updated code to include DIV with class example-header for code pen spport --- examples/switch/switch-checkbox.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index d0b85cc8e8..d7e1170a35 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -36,7 +36,9 @@

    Switch using input[type="checkbox"] Example

    -

    Example

    +
    +

    Example

    +
    From 2d403bc6756386525223e378fd8a4759973d3c10 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 15 Jul 2021 14:58:08 -0500 Subject: [PATCH 10/46] updated .vnurc file --- .vnurc | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.vnurc b/.vnurc index 47e6849126..01d8027396 100644 --- a/.vnurc +++ b/.vnurc @@ -20,5 +20,6 @@ The “row” role is unnecessary for element “tr”. Attribute “aria-activedescendant” value should either refer to a descendant element, or should be accompanied by attribute “aria-owns”. # https://github.com/w3c/aria-practices/issues/1678 Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections. -# https://github.com/validator/validator/issues/1122 -Element “input” is missing required attribute “aria-checked”. +# https://github.com/validator/validator/issues/1096 +Bad value “none” for attribute “role” on element “svg”. +Bad value “presentation” for attribute “role” on element “svg”. From 218de1f6686d6364adc5d283c1a50a616185c9a3 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 27 Jul 2021 14:20:16 -0500 Subject: [PATCH 11/46] fixed label not to include visual on/off text --- examples/switch/css/switch-checkbox.css | 31 ++++++++++++++----------- examples/switch/switch-checkbox.html | 12 +++++----- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/examples/switch/css/switch-checkbox.css b/examples/switch/css/switch-checkbox.css index 4b3298a797..143a3d1aa7 100644 --- a/examples/switch/css/switch-checkbox.css +++ b/examples/switch/css/switch-checkbox.css @@ -6,7 +6,7 @@ legend { font-size: 110%; } -label { +.switch { display: block; margin: 0.5em; padding: 4px 4px 6px 6px; @@ -15,7 +15,12 @@ label { width: 16em; } -label .label { +.switch:hover, +label:hover { + cursor: pointer; +} + +.switch label { display: inline-block; width: 9em; -webkit-user-select: none; @@ -24,11 +29,11 @@ label .label { user-select: none; } -label input[role="switch"] { +.switch input[role="switch"] { opacity: 0; } -label input[role="switch"] ~ .state { +.switch input[role="switch"] ~ .state { display: inline-block; -webkit-user-select: none; -moz-user-select: none; @@ -36,7 +41,7 @@ label input[role="switch"] ~ .state { user-select: none; } -label input[role="switch"] ~ .state > .container { +.switch input[role="switch"] ~ .state > .container { position: relative; top: 2px; display: inline-block; @@ -46,7 +51,7 @@ label input[role="switch"] ~ .state > .container { border-radius: 11px; } -label input[role="switch"] ~ .state > .container > .position { +.switch input[role="switch"] ~ .state > .container > .position { position: relative; top: 1px; left: 2px; @@ -59,30 +64,30 @@ label input[role="switch"] ~ .state > .container > .position { opacity: 0.6; } -label input[role="switch"]:not(:checked) ~ .state span.on { +.switch input[role="switch"]:not(:checked) ~ .state span.on { display: none; } -label input[role="switch"]:checked ~ .state > span.off { +.switch input[role="switch"]:checked ~ .state > span.off { display: none; } -label input[role="switch"]:checked ~ .state > .container > .position { +.switch input[role="switch"]:checked ~ .state > .container > .position { left: 20px; border-color: green; background: green; opacity: 1; } -label.focus, -label:hover { +.switch.focus, +.switch:hover { padding: 2px 2px 4px 4px; border-width: 2px; outline: none; background-color: #def; } -label.focus span.container, -label:hover span.container { +.switch.focus span.container, +.switch:hover span.container { background-color: white; } diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index d7e1170a35..785a00911a 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -43,8 +43,8 @@

    Example

    Accessibility Preferences -
    From e73bc13e7d32349e5f417a4cb51be3a529721e7d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 27 Jul 2021 15:12:56 -0500 Subject: [PATCH 12/46] fixed label bug using aria-hidden=true on on and off text --- examples/index.html | 1 + examples/switch/css/switch-checkbox.css | 32 +++++++++++-------------- examples/switch/switch-checkbox.html | 31 ++++++++++++++++-------- test/tests/switch_switch-checkbox.js | 13 ++++++++++ 4 files changed, 49 insertions(+), 28 deletions(-) diff --git a/examples/index.html b/examples/index.html index 3346d485fa..07aa3a08d8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -611,6 +611,7 @@

    Examples By Properties and States

  • Rating Slider (HC)
  • Vertical Temperature Slider (HC)
  • Date Picker Spin Button
    • +
  • Switch using input[type="checkbox"] (HC)
  • Toolbar
    • diff --git a/examples/switch/css/switch-checkbox.css b/examples/switch/css/switch-checkbox.css index 143a3d1aa7..cf8a6aa915 100644 --- a/examples/switch/css/switch-checkbox.css +++ b/examples/switch/css/switch-checkbox.css @@ -6,7 +6,7 @@ legend { font-size: 110%; } -.switch { +label { display: block; margin: 0.5em; padding: 4px 4px 6px 6px; @@ -15,12 +15,7 @@ legend { width: 16em; } -.switch:hover, -label:hover { - cursor: pointer; -} - -.switch label { +label .label { display: inline-block; width: 9em; -webkit-user-select: none; @@ -29,11 +24,11 @@ label:hover { user-select: none; } -.switch input[role="switch"] { +label input[role="switch"] { opacity: 0; } -.switch input[role="switch"] ~ .state { +label input[role="switch"] ~ .state { display: inline-block; -webkit-user-select: none; -moz-user-select: none; @@ -41,7 +36,7 @@ label:hover { user-select: none; } -.switch input[role="switch"] ~ .state > .container { +label input[role="switch"] ~ .state > .container { position: relative; top: 2px; display: inline-block; @@ -51,7 +46,7 @@ label:hover { border-radius: 11px; } -.switch input[role="switch"] ~ .state > .container > .position { +label input[role="switch"] ~ .state > .container > .position { position: relative; top: 1px; left: 2px; @@ -64,30 +59,31 @@ label:hover { opacity: 0.6; } -.switch input[role="switch"]:not(:checked) ~ .state span.on { +label input[role="switch"]:not(:checked) ~ .state span.on { display: none; } -.switch input[role="switch"]:checked ~ .state > span.off { +label input[role="switch"]:checked ~ .state > span.off { display: none; } -.switch input[role="switch"]:checked ~ .state > .container > .position { +label input[role="switch"]:checked ~ .state > .container > .position { left: 20px; border-color: green; background: green; opacity: 1; } -.switch.focus, -.switch:hover { +label.focus, +label:hover { padding: 2px 2px 4px 4px; border-width: 2px; outline: none; background-color: #def; + cursor: pointer; } -.switch.focus span.container, -.switch:hover span.container { +label.focus span.container, +label:hover span.container { background-color: white; } diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 785a00911a..6bb48f164a 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -43,8 +43,8 @@

    Example

    Accessibility Preferences -
    - +
    + -
    - +
    +
    @@ -144,6 +144,17 @@

    Role, Property, State, and Tabindex Attributes

    + + + aria-hidden="true" + span.on and span.off + +
      +
    • aria-hidden is used to remove visual "on" and "off" labels to the right of the switch from being part of the label for the switch.
      • +
    • The visual "on" and "off" text are not needed in the label because the state of the switch is conveyed through the .checked property of the input element.
      • +
    + +
    diff --git a/test/tests/switch_switch-checkbox.js b/test/tests/switch_switch-checkbox.js index db8990cfc1..13b53d5ed0 100644 --- a/test/tests/switch_switch-checkbox.js +++ b/test/tests/switch_switch-checkbox.js @@ -1,6 +1,7 @@ const { ariaTest } = require('..'); const { By, Key } = require('selenium-webdriver'); const assertAriaRoles = require('../util/assertAriaRoles'); +const assertAttributeValues = require('../util/assertAttributeValues'); const assertTabOrder = require('../util/assertTabOrder'); const assertInputChecked = require('../util/assertInputChecked'); @@ -8,6 +9,8 @@ const exampleFile = 'switch/switch-checkbox.html'; const ex = { switchSelector: '#ex1 [role="switch"]', + spanOnSelector: '#ex1 span.on', + spanOffSelector: '#ex1 span.off', switches: [ '#ex1 fieldset label:nth-child(2) input', '#ex1 fieldset label:nth-child(3) input', @@ -24,6 +27,16 @@ ariaTest( } ); +ariaTest( + '"aria-hidden" set to "true" on SPAN elements containing "on" and "off" ', + exampleFile, + 'aria-hidden', + async (t) => { + await assertAttributeValues(t, ex.spanOnSelector, 'aria-hidden', 'true'); + await assertAttributeValues(t, ex.spanOffSelector, 'aria-hidden', 'true'); + } +); + ariaTest( 'key TAB moves focus between switches', exampleFile, From a7b41e356b7372569b6f465d217a7e63f6134759 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 27 Jul 2021 15:26:36 -0500 Subject: [PATCH 13/46] identifed validator bug --- .vnurc | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.vnurc b/.vnurc index 01d8027396..a287e47171 100644 --- a/.vnurc +++ b/.vnurc @@ -23,3 +23,5 @@ Section lacks heading. Consider using “h2”-“h6” elements to add identify # https://github.com/validator/validator/issues/1096 Bad value “none” for attribute “role” on element “svg”. Bad value “presentation” for attribute “role” on element “svg”. +https://github.com/validator/validator/issues/1200 +Element “input” is missing required attribute “aria-checked”. From e7d77880efbc1e397d665abb5e635dc50775be3d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 27 Jul 2021 15:28:57 -0500 Subject: [PATCH 14/46] documented validator bug --- .vnurc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vnurc b/.vnurc index a287e47171..e4fd70beb0 100644 --- a/.vnurc +++ b/.vnurc @@ -23,5 +23,5 @@ Section lacks heading. Consider using “h2”-“h6” elements to add identify # https://github.com/validator/validator/issues/1096 Bad value “none” for attribute “role” on element “svg”. Bad value “presentation” for attribute “role” on element “svg”. -https://github.com/validator/validator/issues/1200 +# https://github.com/validator/validator/issues/1122 Element “input” is missing required attribute “aria-checked”. From 1d86f3fbc65034578a27cf0fa2afb0345c0c43a6 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 27 Jul 2021 15:40:38 -0500 Subject: [PATCH 15/46] fixed code pen issue --- examples/switch/switch-checkbox.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 6bb48f164a..d8cf2f9f1f 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -161,7 +161,7 @@

    Role, Property, State, and Tabindex Attributes

    Javascript and CSS Source Code

    -
      +
      • CSS: switch-checkbox.css @@ -184,7 +184,7 @@

        HTML Source Code

        If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters. -->
    From 6b61219a9494308efeb3b623156a33454a0fe3d2 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 3 Aug 2021 14:26:47 -0500 Subject: [PATCH 16/46] removed Enter key support --- examples/switch/js/switch-checkbox.js | 9 --------- examples/switch/switch-checkbox.html | 4 ++-- test/tests/switch_switch-checkbox.js | 23 +---------------------- 3 files changed, 3 insertions(+), 33 deletions(-) diff --git a/examples/switch/js/switch-checkbox.js b/examples/switch/js/switch-checkbox.js index b82d640ec0..7c6a88b0b1 100644 --- a/examples/switch/js/switch-checkbox.js +++ b/examples/switch/js/switch-checkbox.js @@ -12,19 +12,10 @@ class CheckboxSwitch { constructor(domNode) { this.switchNode = domNode; - this.switchNode.addEventListener('keydown', () => this.onKeydown(event)); this.switchNode.addEventListener('focus', () => this.onFocus(event)); this.switchNode.addEventListener('blur', () => this.onBlur(event)); } - onKeydown(event) { - if (event.key === 'Enter') { - event.currentTarget.checked = !event.currentTarget.checked; - event.stopPropagation(); - event.preventDefault(); - } - } - onFocus(event) { event.currentTarget.parentNode.classList.add('focus'); } diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index d8cf2f9f1f..ea9623c315 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -109,8 +109,8 @@

    Keyboard Support

    - - Space, Enter + + Space
    • Toggle switch between on and off.
      • diff --git a/test/tests/switch_switch-checkbox.js b/test/tests/switch_switch-checkbox.js index 13b53d5ed0..1fd0dd3f93 100644 --- a/test/tests/switch_switch-checkbox.js +++ b/test/tests/switch_switch-checkbox.js @@ -49,7 +49,7 @@ ariaTest( ariaTest( 'key SPACE turns switch on and off', exampleFile, - 'key-space-enter', + 'key-space', async (t) => { for (let switchSelector of ex.switches) { // Send SPACE key to check box to select @@ -66,24 +66,3 @@ ariaTest( } } ); - -ariaTest( - 'key Enter turns switch on and off', - exampleFile, - 'key-space-enter', - async (t) => { - for (let switchSelector of ex.switches) { - // Send Enter key to check box to select - await t.context.session - .findElement(By.css(switchSelector)) - .sendKeys(Key.ENTER); - await assertInputChecked(t, switchSelector, true); - - // Send Enter key to check box to unselect - await t.context.session - .findElement(By.css(switchSelector)) - .sendKeys(Key.ENTER); - await assertInputChecked(t, switchSelector, false); - } - } -); From 48851af35362333121a8dbdb14d6b315f9b70e9c Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 29 Aug 2021 12:40:29 -0700 Subject: [PATCH 17/46] Revise title --- examples/switch/switch-checkbox.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index ea9623c315..4e66107741 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -2,7 +2,7 @@ - Switch using input[type="checkbox"] Example | WAI-ARIA Authoring Practices 1.2 + Switch Example Using HTML Checkbox Input | WAI-ARIA Authoring Practices 1.2 @@ -25,7 +25,7 @@
    -

    Switch using input[type="checkbox"] Example

    +

    Switch Example Using HTML Checkbox Input

    This example implements the Switch design pattern using input[type="checkbox"] elements and CSS borders to implement the graphical rendering of the state of the switch. Switches are similar to checkboxes, but should be rendered by assistive technologies as "on" and "off", instead of "checked" and "unchecked".

    From 2ca24b8389741daac512f133a73cc68ee240c5de Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 29 Aug 2021 12:47:06 -0700 Subject: [PATCH 18/46] Editorial revision to intro --- examples/switch/switch-checkbox.html | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 4e66107741..de69009c4c 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -25,15 +25,16 @@
    -

    Switch Example Using HTML Checkbox Input

    -

    - This example implements the Switch design pattern using input[type="checkbox"] elements and CSS borders to implement the graphical rendering of the state of the switch. Switches are similar to checkboxes, but should be rendered by assistive technologies as "on" and "off", instead of "checked" and "unchecked". -

    -

    Similar examples include:

    - +

    Switch Example Using HTML Checkbox Input

    +

    + This example illustrates implementing the Switch design pattern using HTML input[type="checkbox"] elements and CSS borders to implement the graphical rendering of the state of the switch. + It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group. +

    +

    Similar examples include:

    +
    From 813cbf12f6939c7c2efb9a0cadb51fcac06808a7 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 29 Aug 2021 12:53:11 -0700 Subject: [PATCH 19/46] further clarification of intro --- examples/switch/switch-checkbox.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index de69009c4c..7d53b0d14b 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -27,7 +27,7 @@

    Switch Example Using HTML Checkbox Input

    - This example illustrates implementing the Switch design pattern using HTML input[type="checkbox"] elements and CSS borders to implement the graphical rendering of the state of the switch. + This example illustrates implementation of the Switch design pattern by using HTML input[type="checkbox"] as switch elements and by using CSS borders to provide graphical rendering of switch states. It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group.

    Similar examples include:

    From 02da47b26c505d4f0af5cfe42c20f33d5b527620 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 29 Aug 2021 13:36:35 -0700 Subject: [PATCH 20/46] Editorial changes to accessibility features for clarity and brevity --- examples/switch/switch-checkbox.html | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 7d53b0d14b..2cf2a964a4 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -78,19 +78,26 @@

    Example

    -

    Accessibility Features

      -
    • To help assistive technology users understand that the accessibility preferences are made of a group of two switches, the switches are wrapped in a fieldset element labeled with a legend element.
      • -
    • To provide a visual indication the labels can also be used to change the state of a switch, the background color is changed and a border appears when the pointer moves over the switch or the label. Including the border insures people with visual impairments can perceive the target area in high contrast modes.
      • -
    • A visual text label (i.e. "on" and "off") of the state of the switch is placed after the graphic indication of the state to make it easier for users with visual or cognitive impairments to understand the current state of the switch.
      - NOTE: CSS attribute selectors are used ensure synchronization of the visual states with the value of the input[type="checkbox"]:checked property.
      • -
    • The graphical rendering of the switch state uses 2 pixel borders for the container, and a 2 pixel border on the circle indicating the on and off position of the switch. There is 2 pixels of space between the container border and the border of the circle. The use of spacing and borders insures the graphic will be visible and discernible in high contrast modes used by people with visual impairments. +
    • To help assistive technology users understand each switch belongs to a set of switches related to Accessibility Preferences, the switches are wrapped in a fieldset element labeled with a legend element.
      • +
    • + To provide a visual indication the labels can also be used to change the switch state, when the pointer moves over either the switch or the label, both the switch and label are treated with a border and background color change. + Note that the border treatment is necessary for the target area to be perceivable when browser or operating system high contrast settings are enabled. +
      • +
    • + A visual text label (on or off) of the state is rendered adjacent to the graphical state indicator to make understanding the state easier for users with visual or cognitive disabilities.
      + NOTE: To avoid redundant state announcement by screen readers, these labels are hidden from assistive technologies with aria-hidden, and CSS attribute selectors ensure the label display is synchronized with the value of the input. +
      • +
    • Spacing and borders are used to ensure the graphics will be visible and discernible when browser or operating system high contrast settings are enabled: +
        +
      • Two pixel borders are used for the switch state container and the circle indicating the on and off position of the switch.
        • +
      • There are 2 pixels of space between the container border and the border of the circle.
        • +
    -

    Keyboard Support

    From 063e4a7c9b589d528a168a79b93435aa833d5875 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 29 Aug 2021 13:38:38 -0700 Subject: [PATCH 21/46] white space --- examples/switch/switch-checkbox.html | 242 +++++++++++++-------------- 1 file changed, 121 insertions(+), 121 deletions(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 2cf2a964a4..ca584309d6 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -36,47 +36,47 @@

    Switch Example Using HTML Checkbox Input

  • Switch example using the button element..
    • -
    -
    -

    Example

    -
    - -
    -
    - Accessibility Preferences - +
    +
    + +

    Accessibility Features

    @@ -99,103 +99,103 @@

    Accessibility Features

    -
    -

    Keyboard Support

    - - - - - - - - - - - - - - +
    +

    Keyboard Support

    +
    KeyFunction
    Tab -
      -
    • Moves keyboard focus to the switch.
      • -
    -
    Space
    + + + + + + + + + - -
    KeyFunction
    Tab
      -
    • Toggle switch between on and off.
      • +
    • Moves keyboard focus to the switch.
    -
    - -
    -

    Role, Property, State, and Tabindex Attributes

    - - - - - - - - - - - - - - + + - - - - - + +
    RoleAttributeElementUsage
    switchinput[type="checkbox"]
    Space
      -
    • The role="switch" attribute identified the input[type="checkbox"] element as an ARIA switch.
      • -
    • The accessible name is defined using the label element.
      • +
    • Toggle switch between on and off.
    aria-hidden="true"span.on and span.off -
      -
    • aria-hidden is used to remove visual "on" and "off" labels to the right of the switch from being part of the label for the switch.
      • -
    • The visual "on" and "off" text are not needed in the label because the state of the switch is conveyed through the .checked property of the input element.
      • -
    -
    +
    + +
    +

    Role, Property, State, and Tabindex Attributes

    + + + + + + + - -
    RoleAttributeElementUsage
    -
    + + + + switch + + input[type="checkbox"] + +
      +
    • The role="switch" attribute identified the input[type="checkbox"] element as an ARIA switch.
      • +
    • The accessible name is defined using the label element.
      • +
    + + + + + aria-hidden="true" + span.on and span.off + +
      +
    • aria-hidden is used to remove visual "on" and "off" labels to the right of the switch from being part of the label for the switch.
      • +
    • The visual "on" and "off" text are not needed in the label because the state of the switch is conveyed through the .checked property of the input element.
      • +
    + + + + +
    -
    -

    Javascript and CSS Source Code

    - -
    +
    +

    Javascript and CSS Source Code

    + +
    -
    -

    HTML Source Code

    - -
    - - - -
    +
    +

    HTML Source Code

    + +
    + + + +
    From 4334d0e9224555391b0b0fb1d8f1de940c53916b Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 3 Oct 2021 10:41:03 -0700 Subject: [PATCH 37/46] minor editorial change to intro --- examples/switch/switch-checkbox.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index d82feedc49..7490991869 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -27,7 +27,7 @@

    Switch Example Using HTML Checkbox Input

    - This example illustrates implementation of the Switch design pattern by using HTML input[type="checkbox"] as switch elements and by using CSS borders to provide graphical rendering of switch states. + This example illustrates implementing the Switch design pattern with an HTML input[type="checkbox"] as the switch element and using CSS borders to provide graphical rendering of switch states. It also demonstrates using the HTML fieldset and legend elements to present multiple switches in a labeled group.

    + -->
    From 1a009fc6cc13d16b0f521f9c37790258fd037d5c Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 4 Oct 2021 09:57:05 -0700 Subject: [PATCH 39/46] Add links to examples from main doc and between example pages --- aria-practices.html | 2 +- examples/switch/switch-checkbox.html | 5 +---- examples/switch/switch.html | 5 +---- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index d8a384eebb..97cbc6039b 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2581,7 +2581,7 @@

    Switch

    Examples

      -
    • Switch using div element Example: Demonstrates switches used for turning on/off notifications.
      • +
    • Switch Example: A switch based on a div element that turns a notification preference on and off.
    • Switch Example Using HTML Checkbox Input: Demonstrates presentation of HTML checkboxes as switches for turning accessibility preferences on and off.
      • diff --git a/examples/switch/switch.html b/examples/switch/switch.html index f84e3ff8f5..60c359fa36 100644 --- a/examples/switch/switch.html +++ b/examples/switch/switch.html @@ -30,13 +30,10 @@

      Switch Example

      This example illustrates implementation of the switch design pattern for a notification preferences control. It uses a div element for the switch and CSS borders to provide graphical rendering of switch states.

      -
      From b7618454330c118a7fb8f09096f71f8cb9148f07 Mon Sep 17 00:00:00 2001 From: Matt King Date: Fri, 29 Oct 2021 02:14:34 -0700 Subject: [PATCH 40/46] Add links among example pages for similar examples --- examples/switch/switch-button.html | 2 +- examples/switch/switch-checkbox.html | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/switch/switch-button.html b/examples/switch/switch-button.html index f6d06671cf..de31a8ac02 100644 --- a/examples/switch/switch-button.html +++ b/examples/switch/switch-button.html @@ -33,7 +33,7 @@

      Switch Example Using HTML Button

      Similar examples include:

      diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 217ddfbec5..6b5c3787c9 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -33,6 +33,7 @@

      Switch Example Using HTML Checkbox Input

      Similar examples include:

      From fcc1cc4ce2a875b9ee9c4b1a813b66d069eccbac Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 7 Nov 2021 14:46:33 -0800 Subject: [PATCH 41/46] Change /> to > Co-authored-by: Simon Pieters --- examples/switch/switch-checkbox.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 6b5c3787c9..ed58a04433 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -1,7 +1,7 @@ - + Switch Example Using HTML Checkbox Input | WAI-ARIA Authoring Practices 1.2 From 2b088d8510f8cb1c942e358bc5ac1a09c3a820b2 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 7 Nov 2021 14:49:43 -0800 Subject: [PATCH 42/46] Change /> to > Co-authored-by: Simon Pieters --- examples/switch/switch-checkbox.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index ed58a04433..bc53d377d8 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -48,7 +48,7 @@

      Example

      Reduced motion + role="switch"> From f31b97c54202b6ea2a1096bb24928d738bb96be5 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 7 Nov 2021 14:50:34 -0800 Subject: [PATCH 43/46] Change /> to > Co-authored-by: Simon Pieters --- examples/switch/switch-checkbox.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index bc53d377d8..4d76ef09b5 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -63,7 +63,7 @@

      Example

      Show captions + role="switch"> From 2e7ee8be37868a134942e9e6a89cd10d3a73326b Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 7 Nov 2021 14:51:22 -0800 Subject: [PATCH 44/46] Change /> to > Co-authored-by: Simon Pieters --- examples/switch/switch-checkbox.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/switch/switch-checkbox.html b/examples/switch/switch-checkbox.html index 4d76ef09b5..1bdf259824 100644 --- a/examples/switch/switch-checkbox.html +++ b/examples/switch/switch-checkbox.html @@ -86,7 +86,7 @@

      Accessibility Features

    • To make understanding the state of the switch easier for users with visual or cognitive disabilities, a text equivalent of the state (on or off) is displayed adjacent to the graphical state indicator. - CSS attribute selectors ensure the label displayed is synchronized with the value of the input.
      + CSS attribute selectors ensure the label displayed is synchronized with the value of the input.
      NOTE: To prevent redundant announcement of the state by screen readers, the text indicators of state are hidden from assistive technologies with aria-hidden.
    • Spacing, border widths and fill are important to ensure the graphical states are visible and discernible to people with visual impairments, including when browser or operating system high contrast settings are enabled: From 13face8d43b1d6cde0e95ac9dbd72f90e2d42e7a Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Mon, 8 Nov 2021 14:51:43 -0600 Subject: [PATCH 45/46] updated CSS properties to remove -moz-user-select and -ms-user-select --- examples/switch/css/switch-checkbox.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/examples/switch/css/switch-checkbox.css b/examples/switch/css/switch-checkbox.css index cf8a6aa915..9c2a9a038e 100644 --- a/examples/switch/css/switch-checkbox.css +++ b/examples/switch/css/switch-checkbox.css @@ -19,8 +19,6 @@ label .label { display: inline-block; width: 9em; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } From 558fc729aceeebfa18560c4a276a92c1b0566566 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Wed, 10 Nov 2021 17:14:46 +0100 Subject: [PATCH 46/46] Remove more -moz- and -ms- properties --- examples/switch/css/switch-checkbox.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/examples/switch/css/switch-checkbox.css b/examples/switch/css/switch-checkbox.css index 9c2a9a038e..b99637e684 100644 --- a/examples/switch/css/switch-checkbox.css +++ b/examples/switch/css/switch-checkbox.css @@ -29,8 +29,6 @@ label input[role="switch"] { label input[role="switch"] ~ .state { display: inline-block; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; }