Difference between revisions of "ARIA Button"

From Level Access Web Labs
Jump to navigation Jump to search
Line 29: Line 29:
 
       </script>
 
       </script>
 
   </head>
 
   </head>
 +
</html>
 +
===No aria-pressed property set on span with role button===
 +
<html>
 
   <body>
 
   <body>
      <div>
 
        <p>No aria-pressed property set on span with role button</p>
 
 
         <div>
 
         <div>
 
             <span class="a" tabindex="0" role="button" onclick="alert('test');"> Test 1</span>
 
             <span class="a" tabindex="0" role="button" onclick="alert('test');"> Test 1</span>
 
         </div>
 
         </div>
 
+
  </body>
        <p>Not pressed span element with role of button</p>
+
</html>
 +
===Not pressed span element with role of button===
 +
<html>
 +
  <body>
 
         <div>
 
         <div>
 
             <span onclick="alert('test');" aria-pressed="false" class="a" tabindex="0" role="button"> Test 2 </span>
 
             <span onclick="alert('test');" aria-pressed="false" class="a" tabindex="0" role="button"> Test 2 </span>
 
         </div>
 
         </div>
 +
  </body>
 +
</html>
 
    
 
    
      <p>Span element with role button that is pressed</p>
+
===Span element with role button that is pressed===
 +
<html>
 +
  <body>
 
         <div>
 
         <div>
 
             <span onclick="alert('test');" aria-pressed="true" class="a" tabindex="0" role="button"> Test 3</span>
 
             <span onclick="alert('test');" aria-pressed="true" class="a" tabindex="0" role="button"> Test 3</span>
 
         </div>
 
         </div>
 
+
  </body>
        <p>Dynamic span element with role of button.</p>
+
</html>
 +
===Dynamic span element with role of button.===
 +
<html>
 +
  <body>
 
         <div>
 
         <div>
 
             <span onclick="test(this);" onclick="test(this);" aria-pressed="false" class="a" tabindex="0" role="button"> Test 4     
 
             <span onclick="test(this);" onclick="test(this);" aria-pressed="false" class="a" tabindex="0" role="button"> Test 4     
 
             </span>
 
             </span>
 
         </div>
 
         </div>
        <p>Link with role of button with dynamically changing state of pressed</p>
+
  </body>
 +
</html>
 +
===Link with role of button with dynamically changing state of pressed===
 +
<html>
 +
  <body>
 
         <div>
 
         <div>
 
             <a href="javascript:alert('test');" onclick="test(this);" role="button" aria-pressed="false" aria-labelledby="lbl" >Bold</a>
 
             <a href="javascript:alert('test');" onclick="test(this);" role="button" aria-pressed="false" aria-labelledby="lbl" >Bold</a>
 
             <div id="lbl"> Bold the page text </div>
 
             <div id="lbl"> Bold the page text </div>
 
         </div>
 
         </div>
 +
  </body>
 +
</html>
 +
===Span with button role and aria-labelledby===
 +
<html>
 +
  <body>
 
       <div>
 
       <div>
 
       <span onclick="alert('test');" role="button" tabindex="0" aria-labelledby="sp1">
 
       <span onclick="alert('test');" role="button" tabindex="0" aria-labelledby="sp1">
Line 65: Line 85:
 
</html>
 
</html>
  
==Test results for ARIA Button==
+
==AT Test Results for ARIA Button==
 
{| class="wikitable" border="1"
 
{| class="wikitable" border="1"
 
|-
 
|-

Revision as of 14:01, 19 June 2017

ARIA Button Demo

No aria-pressed property set on span with role button

Test 1

Not pressed span element with role of button

Test 2

Span element with role button that is pressed

Test 3

Dynamic span element with role of button.

Test 4

Link with role of button with dynamically changing state of pressed

Bold
Bold the page text

Span with button role and aria-labelledby

>> Next

AT Test Results for ARIA Button

AT Browser Notes
JAWS Internet Explorer Works as expected The Name State and Role of the button is announced when navigating to the button. The aria-pressed attribute is only announced when it is true. For the dynamic buttons enter and SPACE change the state of the button and the new state is announced.
JAWS Firefox Works as expected The Name State and Role of the button is announced when navigating to the button. The aria-pressed attribute is only announced when it is true. For the dynamic buttons enter and SPACE change the state of the button and the new state is announced.
NVDA Internet Explorer Works as expected he Name State and Role of the button is announced when navigating to the button. The aria-pressed attribute is only announced when it is true. For the dynamic buttons enter and SPACE change the state of the button and the new state is announced.
NVDA firefox Works as expected The Name State and Role of the button is announced when navigating to the button. The aria-pressed attribute is only announced when it is true. For the dynamic buttons enter and SPACE change the state of the button and the new state is announced.
VoiceOver Safari Does Not Work as expected, The Name State and Role of the buttons with the aria-pressed attribute are not announced by VoiceOver.
Talkback Firefox does not Work as expected. The name and role of the buttons are announced as expected. However the State of the buttons with the aria-pressed attribute is announced as not checked even when the aria-pressed attribute is set to true. Note this is a known issue in firefox that will be fixed in version 31
Talkback Chrome does not Work as expected The Name Role and State of the buttons are announced as expected. When the dynamic buttons are activated Talkback announces clicked, but the new state of the button is not announced.