-
Notifications
You must be signed in to change notification settings - Fork 5.4k
Open
Description
What is missing?
The reveal component does not fully conform to the design pattern described by the WAI.
The dialog container element has aria-modal set to true.
What is wrong now ?
The attribute is missing on the reveal's container.
Possible Solution
Add an aria-modal="true" on the reveal element.
Example with the documentation's accessible reveal :
<div class="reveal-overlay" style="display: block;">
<div
class="reveal"
id="exampleModal11"
aria-labelledby="exampleModalHeader11"
data-reveal="1sx75a-reveal"
role="dialog"
aria-hidden="false"
data-yeti-box="exampleModal11"
data-resize="exampleModal11"
style="display: block; top: 190px;"
tabindex="-1"
aria-modal="true"
>
<h1 id="exampleModalHeader11">Label for the Modal!</h1>
<p class="lead">I am even more accessible than the other modals.</p>
<button class="close-button" data-close="" aria-label="Close Accessible Modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>Context
Correction requested as part of an accessibility audit.
Your Environment
- Foundation version(s) used: 6.8.1
- This doesn’t seem particularly relevant as this is a default feature of Foundation across all setups.
Checklist
- I have read and follow the CONTRIBUTING.md document.
- There are no other issues similar to this one.
- The issue title and template are correctly filled.
Metadata
Metadata
Assignees
Labels
No labels