Foundation CSS Reveal Accessibility
Last Updated :
03 Jul, 2022
Foundation CSS is an open-source and responsive front-end framework that makes it simple to design gorgeous responsive websites, apps, and emails that work on any device. It was released in September 2011 by ZURB. It is used by many companies, including Facebook, eBay, Mozilla, Adobe, and even Disney. Bootstrap is the basis for this framework, which is similar to SaaS. It’s more complicated, adaptable, and customizable. It also has a command-line interface that makes working with module bundlers a breeze. Email framework generates mobile-friendly HTML emails that can be read on any device. You may create fully responsive web applications with Foundation for Apps.
When we click the button, the Reveal modal or popup window appears, displaying some information. We don’t have to go to another page to see the material in the popup window. Reveal modal is very much accessible from the outside through ARIA attributes like aria-label but we can make it more accessible by adding a label to the modal. Then add aria-labelledby=”exampleModalHeader11″ to the container which is the reveal modal. And id=”exampleModalHeader11″ is added to the element which will be designated as the Label.
Foundation CSS Reveal Accessibility Classes
- reveal: This class is used to create a modal or popup window.
- close-button: This class is used to add a button that will close the modal or popup window.
Foundation CSS Reveal Accessibility Attributes:
- [aria-labelledby=idOfTheLabel]: This attribute is added to the container of the reveal modal, this attribute takes the value of the id of the label of the modal.
- [data-reveal]: This attribute is added to the container of the reveal modal to signify the data of the modal.
- [data-close]: This attribute is added to the close button of the reveal modal.
Syntax:
<div class="reveal" id="..."
aria-labelledby="exampleModalHeader" data-reveal>
<h1 id="exampleModalHeader">. . .</h1>
<button class="close-button" data-close>
</button>
</div>
Example 1: The code below demonstrates the addition of a label and the ARIA attributes.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Accessibility</h3>
<p><button class="button"
data-open="exampleModal11">
Click me for a modal
</button></p>
</center>
<div class="reveal" id="exampleModal11"
aria-labelledby="exampleModalLabel1" data-reveal>
<h1 id="exampleModalLabel1">
GeeksforGeeks
</h1>
<strong>About Us!</strong>
<p class="lead">
A Computer Science portal for geeks.
Gain and share your knowledge &
skills with a variety of learning
platforms offered by GeeksforGeeks.
Billions of Users, Millions of Articles
Published, Thousands Got Hired by Top
Companies and the numbers are still
growing. We provide a variety of
services for you to learn,
thrive and also have fun!
</p>
<button class="close-button"
data-close aria-label="Close Accessible Modal"
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Example 2: In the code below the labels are added to a modal with animations applied to it. The animations are applied using the animations attributes of the Motion UI library of Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Accessibility</h3>
<p><button class="button"
data-toggle="exampleModal">
Click me for a modal
</button></p>
</center>
<div class="reveal" id="exampleModal"
aria-labelledby="exampleModalLabel1"
data-reveal data-close-on-click="true"
data-animation-in="spin-in"
data-animation-out="spin-out">
<h1 id="exampleModalLabel1">
GeeksforGeeks
</h1>
<strong>About Us!</strong>
<p class="lead">
A Computer Science portal for geeks.
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks. Billions of
Users, Millions of Articles Published,
Thousands Got Hired by Top Companies
and the numbers are still growing. We
provide a variety of services for you
to learn, thrive and also have fun!
</p>
<button class="close-button"
data-close aria-label="Close Accessible Modal"
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/reveal.html#accessibility
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...