Difference between revisions of "Random Testing RJ"

From Level Access Web Labs
Jump to navigation Jump to search
 
(163 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
<script>
 +
function getfocus() {
 +
  document.getElementById("myAnchor").focus();
 +
}
 +
 +
function losefocus() {
 +
  document.getElementById("myAnchor").blur();
 +
}
 +
 +
</script>
 
   <style type="text/css">
 
   <style type="text/css">
 
     .hidden {
 
     .hidden {
Line 21: Line 31:
 
   </head>
 
   </head>
 
   <body>
 
   <body>
  <p>Activate the button/link to expand them and set the aria-expanded state to true. Activate again to collapse.</p>
+
<a role="link" tabindex="0" class="apr-cta" style="touch-action: auto;">Track<span class="visuallyhidden">Opens dialog</span></a>
  <section>
+
 
    <button onclick="toggle(this);" id="b1" aria-expanded="false" aria-controls="p1"> Details </button>
+
<table class="footer__table">
    <p class="hidden" id="p1" tabindex="-1"> This is some text.</p>
+
        <tbody><tr>
  </section>
+
            <td class="footer__table-item"><strong>Are Not FDIC Insured</strong></td>
  <section>
+
            <td class="footer__table-item"><strong>Are Not Bank Guaranteed</strong></td>
    <a href="#" onclick="toggle(this);" id="a1" aria-expanded="false" aria-controls="p2" > Level Access</a>
+
            <td class="footer__table-item"><strong>May Lose Value</strong></td>
    <p class="hidden" id="p2">Level Access is an digital accessibility solutions provider.</p>
+
        </tr>
  </section>
+
        <tr>
 +
            <td class="footer__table-item"><strong>Are Not Deposits</strong></td>
 +
            <td class="footer__table-item"><strong>Are Not Insured by Any Federal Government Agency</strong></td>
 +
            <td class="footer__table-item"><strong>Are Not a Condition to Any Banking Service or  Activity</strong></td>
 +
        </tr>
 +
    </tbody></table>
 +
 
 +
=========
 +
Without tbody
  
  <div role="img" aria-expanded="true"> test </div>
+
<table class="footer__table">
  <div role="tablist" aria-expanded="true"> test </div>
+
      <tr>
  <div role="tree" aria-expanded="true"> test </div>
+
            <td class="footer__table-item"><strong>Are Not FDIC Insured</strong></td>
   <body>
+
            <td class="footer__table-item"><strong>Are Not Bank Guaranteed</strong></td>
 +
            <td class="footer__table-item"><strong>May Lose Value</strong></td>
 +
        </tr>
 +
        <tr>
 +
            <td class="footer__table-item"><strong>Are Not Deposits</strong></td>
 +
            <td class="footer__table-item"><strong>Are Not Insured by Any Federal Government Agency</strong></td>
 +
            <td class="footer__table-item"><strong>Are Not a Condition to Any Banking Service or  Activity</strong></td>
 +
        </tr>
 +
    </table>
 +
   </body>
 
</html>
 
</html>
 
See also  [[ARIA Accordion]]
 
  
 
==Notes==
 
==Notes==
This example uses ARIA-Expanded and ARIA-Controls.
+
Random Testing - Not accessible examples
  
 
==Test Results==
 
==Test Results==
JAWS with internet Explorer, Firefox and Chrome The expanded and collapsed state are announced as expected. In Firefox and Internet Explorer the JAWS command INSERT+ALT+M moves the virtual cursor to the new content. This does not work in Google chrome.
+
What are the test results?
With NVDA the Expanded and collapsed state are announced as expected. Note there is no NVDA command to move to the new content.
 
In iOS with VoiceOver the Expanded and collapsed state are announced as expected.
 
  
 
[[Category: ARIA]]
 
[[Category: ARIA]]

Latest revision as of 16:49, 16 October 2021

TrackOpens dialog

========= Without tbody

Notes

Random Testing - Not accessible examples

Test Results

What are the test results?