Difference between revisions of "ARIA Checkbox role"

From Level Access Web Labs
Jump to navigation Jump to search
m (Jon Avila moved page ARIA Checkbox to Checkbox ARIA without leaving a redirect)
(Test results for ARIA Checkbox)
 
(35 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
* Standard checkboxes are provided below for comparison only.
 +
* ARIA Example
 +
** Role of checkbox is used on span elements
 +
** State of aria-checked is used to indicated checked state
 +
** aria-labelledby is used to associate label with checkbox
 
<html lang="en">
 
<html lang="en">
 
   <head>
 
   <head>
 
     <title>ARIA Checkbox Example</title>
 
     <title>ARIA Checkbox Example</title>
    <style>
+
    <style>
/* This adds 5px of spacing below each fieldset element */
+
      /* This adds 5px of spacing below each fieldset element */
fieldset {
+
      fieldset {
margin-bottom: 5px;}
+
      margin-bottom: 5px;
</style>
+
      }
<script type="text/javascript">
+
 
// This function binds the event keycode 32 (space bar) to run the function toggleState
+
      .center {
// This is needed since the default functionality of a check box is triggered with the space bar
+
      margin:auto;
function ARIA_Checkbox_Key(event) {
+
      }
if(event.keyCode == 32){
+
    </style>
toggleState(event.target)
+
    <script type="text/javascript">
}
+
      // This function binds the event keycode 32 (space bar) to run the function toggleState
}   
+
      // This is needed since the default functionality of a check box is triggered with the space bar
// This function gets the aria-checked attribute of an element. If it is false, it makes it true and vice versa.
+
      function ARIA_Checkbox_Key(event) {
function toggleState(el) {
+
        if(event.keyCode == 32){
var img = el.getElementsByTagName('img')[0],
+
        toggleState(event.target);
getvalue = el.getAttribute("aria-checked");
+
          event.preventDefault();
if (getvalue == "false") {
+
        }
el.setAttribute("aria-checked", "true");
+
      }  
img.setAttribute("src", "https://labs.ssbbartgroup.com/images/1/15/Checked.png");
+
   
} else {
+
      // This function gets the aria-checked attribute of an element. If it is false, it makes it true and vice versa.
el.setAttribute("aria-checked", "false");
+
      function toggleState(el) {
img.setAttribute("src", "https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png");
+
      var img = el.getElementsByTagName('img')[0],
}
+
      getvalue = el.getAttribute("aria-checked");
}
+
      if (getvalue == "false") {
</script>
+
        el.setAttribute("aria-checked", "true");
</head>
+
        img.setAttribute("src", "https://labs.ssbbartgroup.com/images/1/15/Checked.png");
<body>
+
      } else {
<form>
+
        el.setAttribute("aria-checked", "false");
<fieldset class="checkboxes">
+
        img.setAttribute("src", "https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png");
<legend>Standard HTML Checkboxes</legend>
+
      }
<p>Standard checkbox elements using HTML &lt;input&gt; and &lt;label&gt; tags:</p>
+
  }  
<input type="checkbox" name="Option 1" value="Option 1" id="option1">
+
    </script>
<label for="option1">Option 1</label><br />
+
  </head>
<input type="checkbox" name="Option 2" value="Option 2" id="option2">
+
  <body>
<label for="option2">Option 2</label><br />
+
  <h1 class="center">ARIA Checkbox Example</h1>
<input type="checkbox" name="Option 3" value="Option 3" id="option3">
+
    <form>
<label for="option3">Option 3</label><br />
+
        <h2>Standard HTML Checkboxes</h2>
<input type="checkbox" name="Option 4" value="Option 4" id="option4">
+
        <p>Standard checkbox elements using HTML &lt;input&gt; and &lt;label&gt; tags:</p>
<label for="option4">Option 4</label>
+
        <input type="checkbox" id="option1">
</fieldset>
+
        <label for="option1">Option 1</label><br />
<fieldset>
+
        <input type="checkbox" id="option2">
<legend id="check_title">ARIA Checkboxes</legend>
+
        <label for="option2">Option 2</label><br />
<p>Checkboxes using ARIA and JavaScript:</p>
+
        <input type="checkbox" id="option3">
<div class="checkboxes" aria-labelledby="check_title">
+
        <label for="option3">Option 3</label><br />
<!-- The "aria-labelledby" attribute is required because label elements can only be applied to form elements. -->
+
        <input type="checkbox" id="option4">
<!-- We are using span elements instead of default HTML checkbox inputs so aria-labelledby is needed for association. -->
+
        <label for="option4">Option 4</label>
<span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelA" id="optionA" onclick="toggleState(this);" onkeyup="ARIA_Checkbox_Key(event);">
+
 
<img src="https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png" alt="" role="presentation" id="imageA">
+
        <h2>ARIA Checkboxes</h2>
<label id="labelA">Option A</label>
+
        <p>Checkboxes using ARIA and JavaScript:</p>
</span>
+
          <span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelA" id="optionA" onclick="toggleState(this);" onkeydown="ARIA_Checkbox_Key(event);">
<br />
+
          <img src="https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png" alt="" role="presentation" id="imageA">
<span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelB" id="optionB" onclick="toggleState(this);" onkeyup="ARIA_Checkbox_Key(event);">
+
          <label id="labelA">Option A</label>
<img src="https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png" alt="" role="presentation" id="imageB">
+
          </span>
<label id="labelB">Option B</label>
+
          <br />
</span>
+
          <span role="checkbox"  tabindex="0" aria-checked="false" aria-label="my aria label choice b" aria-labelledby="labelB" id="optionB" onclick="toggleState(this);" onkeydown="ARIA_Checkbox_Key(event);">
<br />   
+
          <img src="https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png" alt="" role="presentation" id="imageB">
<span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelC" id="optionC" onclick="toggleState(this);" onkeyup="ARIA_Checkbox_Key(event);">
+
          <label id="labelB">Option B</label>
<img src="https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png" alt="" role="presentation" id="imageC">
+
          </span>
<label id="labelC">Option C</label>
+
          <br />   
</span>
+
          <span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelC" id="optionC" onclick="toggleState(this);" onkeydown="ARIA_Checkbox_Key(event);">
<br />
+
          <img src="https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png" alt="" role="presentation" id="imageC">
<span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelD" id="optionD" onclick="toggleState(this);" onkeyup="ARIA_Checkbox_Key(event);">
+
          <label id="labelC">Option C</label>
<img src="https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png" alt="" role="presentation" id="imageD">
+
          </span>
<label id="labelD">Option D</label>
+
          <br />
</span>       
+
          <span role="checkbox"  tabindex="0" aria-checked="false" aria-labelledby="labelD" id="optionD" onclick="toggleState(this);" onkeydown="ARIA_Checkbox_Key(event);">
</div>
+
          <img src="https://labs.ssbbartgroup.com/images/3/3a/Unchecked.png" alt="" role="presentation" id="imageD">
</fieldset>
+
          <label id="labelD">Option D</label>
</form>
+
          </span>       
</body>
+
    </form>
 +
  </body>
 
</html>
 
</html>
 +
 +
==Test results for ARIA Checkbox==
 +
{| class="wikitable" border="1"
 +
|-
 +
! AT
 +
! Browser
 +
! Notes
 +
|- style="background-color:#99FF99;"
 +
|JAWS||Internet Explorer||Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox.  When space or enter is pressed the new state of the checkbox is announced.
 +
|- style="background-color:#99FF99;"
 +
|JAWS||Firefox||Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox.  When space or enter is pressed the new state of the checkbox is announced.
 +
|- style="background-color:#99FF99;"
 +
|NVDA||Internet Explorer||Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox.  When space or enter is pressed the new state of the checkbox is announced.
 +
|- style="background-color:#99FF99;"
 +
|NVDA||firefox||Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox.  When space or enter is pressed the new state of the checkbox is announced.
 +
|- style="background-color:#99FF99;"
 +
|VoiceOver IOS||Safari||Works as expected, The name State and  Role are announced when the Checkbox is activated the new State is announced.
 +
|- style="background-color:#99FF99;"
 +
|Talkback||Firefox||Works as expected. When navigating to the checkbox The Name State and Role is announced. When activating the Checkbox the new state is not announced. (note this is the same behavior for HTML checkboxes)
 +
|- style="background-color:#99FF99;"
 +
|Talkback||Chrome||Works as expected. When navigating to the checkbox The Name State and Role is announced. When activating the Checkbox the new state is announced.
 +
//start here 
 +
|- style="background-color:#99FF99;"
 +
|Voiceover Mac OS||Safari||Works as expected. When navigating to the checkbox The Name State and Role is announced. When activating the Checkbox the new state is announced. 
 +
 +
|-
 +
|}
 +
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 17:47, 7 May 2020

  • Standard checkboxes are provided below for comparison only.
  • ARIA Example
    • Role of checkbox is used on span elements
    • State of aria-checked is used to indicated checked state
    • aria-labelledby is used to associate label with checkbox

ARIA Checkbox Example

ARIA Checkbox Example

Standard HTML Checkboxes

Standard checkbox elements using HTML <input> and <label> tags:




ARIA Checkboxes

Checkboxes using ARIA and JavaScript:




Test results for ARIA Checkbox

AT Browser Notes
JAWS Internet Explorer Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox. When space or enter is pressed the new state of the checkbox is announced.
JAWS Firefox Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox. When space or enter is pressed the new state of the checkbox is announced.
NVDA Internet Explorer Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox. When space or enter is pressed the new state of the checkbox is announced.
NVDA firefox Works as expected the Name State and Role of the checkbox is announced when navigating to the checkbox. When space or enter is pressed the new state of the checkbox is announced.
VoiceOver IOS Safari Works as expected, The name State and Role are announced when the Checkbox is activated the new State is announced.
Talkback Firefox Works as expected. When navigating to the checkbox The Name State and Role is announced. When activating the Checkbox the new state is not announced. (note this is the same behavior for HTML checkboxes)
Talkback Chrome Works as expected. When navigating to the checkbox The Name State and Role is announced. When activating the Checkbox the new state is announced.

//start here

Voiceover Mac OS Safari Works as expected. When navigating to the checkbox The Name State and Role is announced. When activating the Checkbox the new state is announced.