Difference between revisions of "ARIA Controls Property"

From Level Access Web Labs
Jump to navigation Jump to search
 
(3 intermediate revisions by 2 users not shown)
Line 11: Line 11:
 
   <div style="float:left; width:40%;">  <!-- left pane -->
 
   <div style="float:left; width:40%;">  <!-- left pane -->
 
     <div>Choose an option below </div>
 
     <div>Choose an option below </div>
     <div><input type="radio" id="r1" name="rr"/ onchange="updateContent(1);" aria-control="outline"/> <label for="r1">Course A</label></div>
+
     <div><input type="radio" id="r1" name="rr"/ onchange="updateContent(1);" aria-controls="outline"/> <label for="r1">Course A</label></div>
 
     <div><input type="radio" id="r2" name="rr" onchange="updateContent(2);" aria-controls="outline"/> <label for="r2">Course B</label></div>
 
     <div><input type="radio" id="r2" name="rr" onchange="updateContent(2);" aria-controls="outline"/> <label for="r2">Course B</label></div>
     <div><input type="radio" id="r3" name="rr" onchange="updateContent(3);" aria-control="outline"/> <label for="r3">Course C</label></div>
+
     <div><input type="radio" id="r3" name="rr" onchange="updateContent(3);" aria-controls="outline"/> <label for="r3">Course C</label></div>
 
   </div>
 
   </div>
  
   <div id="outline" style="float:left;"> <!-- right pane -->
+
   <div role="region" aria-labelledby="course" id="outline" style="float:left;"> <!-- right pane -->
     <div> Course Outline </div>
+
     <div id="course"> Course Outline </div>
 
     <ul>
 
     <ul>
 
       <li> outline here for course <span id="s1"></span></li>
 
       <li> outline here for course <span id="s1"></span></li>
Line 27: Line 27:
 
</html>
 
</html>
  
 +
==notes==
 +
With JAWS this works as expected ALT+INSERT+M will move to the course outline when the virtual cursor is on a radio button. Note: JAWS used to announce the command to do this as a tutorial message but starting in June 2019 this no longer occurs.
 +
The other Screen readers NVDA, VoiceOver and TalkBack do not support ARIA-controls.
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 18:08, 14 June 2019

Choose an option below
Course Outline
  • outline here for course
  • ....

notes

With JAWS this works as expected ALT+INSERT+M will move to the course outline when the virtual cursor is on a radio button. Note: JAWS used to announce the command to do this as a tutorial message but starting in June 2019 this no longer occurs. The other Screen readers NVDA, VoiceOver and TalkBack do not support ARIA-controls.