-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Panel Accessibility Improvements
kloots edited this page Apr 25, 2012
·
17 revisions
Panel is most likely going to be used to created dialogs, and there are ARIA attributes that will make these dialogs more accessible to users of screen readers. Those are:
Example usage of the above attributes based on the current YUI Panel markup and standard module format:
<div class="yui3-panel" role="dialog" aria-labelledby="header" aria-hidden="true">
<div class="yui3-panel-content">
<div id="header" class="yui3-widget-hd">Add A New Product</div>
<div class="yui3-widget-bd">...</div>
</div>
</div>
<div class="yui3-panel" role="alertdialog" aria-labelledby="header" aria-describedby="msg" aria-hidden="true">
<div class="yui3-panel-content">
<div id="header" class="yui3-widget-hd">Alert</div>
<div id="msg" class="yui3-widget-bd">Are you sure you want to submit this form?</div>
<div class="yui3-widget-ft">
<button type="button">OK</button>
<button type="button">Cancel</button>
</div>
</div>
</div>
2