Difference between revisions of "Modal dialog with ARIA"

From Level Access Web Labs
Jump to navigation Jump to search
(Add a close dialog button at the start of the dialog, and move focus to it when the dialog opens)
(Add aria-describedby on the close modal dialog button)
 
Line 145: Line 145:
 
     <span class="sr-only" aria-hidden="true"> Beginning of modal dialog </span>
 
     <span class="sr-only" aria-hidden="true"> Beginning of modal dialog </span>
  
     <button type="button" id="closeDialog2" onclick="closeDialog1();">Close<span class="sr-only"> modal dialog </span></button>
+
     <button type="button" id="closeDialog2" onclick="closeDialog1();" aria-describedby="dialog1Title">Close<span class="sr-only"> modal dialog </span></button>
 
     <h1 id="dialog1Title" class="dialog-title">What you need to know about trees</h1>
 
     <h1 id="dialog1Title" class="dialog-title">What you need to know about trees</h1>
  

Latest revision as of 04:50, 3 July 2018

Example

Notes:

  • Not implemented:
    • Constraining keyboard focus within the modal dialog
  • Known issues:
    • VoiceOver has issues with role="dialog" (and aria-modal="true") on iOS 10 and 11, but not on iOS 9. Specifically, it doesn't read all of the dialog content, and activating the check box jumps focus back to the heading of the dialog.


...

...