Foundation CSS es un marco front-end responsivo y de código abierto que simplifica el diseño de magníficos sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Fue lanzado en septiembre de 2011 por ZURB. Lo utilizan muchas empresas, incluidas Facebook, eBay, Mozilla, Adobe e incluso Disney. Bootstrap es la base de este marco, que es similar a SaaS. Es más complicado, adaptable y personalizable. También tiene una interfaz de línea de comandos que hace que trabajar con paquetes de módulos sea muy sencillo. El marco de correo electrónico genera correos electrónicos HTML compatibles con dispositivos móviles que se pueden leer en cualquier dispositivo. Puede crear aplicaciones web totalmente receptivas con Foundation for Apps.
Cuando hacemos clic en el botón, aparece la ventana emergente o modal Revelar , que muestra cierta información. No tenemos que ir a otra página para ver el material en la ventana emergente. Reveal modal es muy accesible desde el exterior a través de atributos ARIA como aria-label, pero podemos hacerlo más accesible agregando una etiqueta al modal. Luego agregue aria-labelledby=”exampleModalHeader11″ al contenedor que es el modal de revelación. Y se agrega id=”exampleModalHeader11″ al elemento que se designará como la etiqueta.
Foundation CSS Reveal clases de accesibilidad
- revelar: esta clase se utiliza para crear una ventana modal o emergente.
- close-button: esta clase se usa para agregar un botón que cerrará la ventana modal o emergente.
Foundation CSS Reveal Atributos de accesibilidad:
- [aria-labelledby=idOfTheLabel]: este atributo se agrega al contenedor del modal de revelación, este atributo toma el valor de la identificación de la etiqueta del modal.
- [data-reveal]: este atributo se agrega al contenedor del modal de revelación para indicar los datos del modal.
- [data-close]: este atributo se agrega al botón de cierre del modal de revelación.
Sintaxis:
<div class="reveal" id="..."
aria-labelledby="exampleModalHeader" data-reveal>
<h1 id="exampleModalHeader">. . .</h1>
<button class="close-button" data-close>
</button>
</div>
Ejemplo 1: El siguiente código demuestra la adición de una etiqueta y los atributos ARIA.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</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>
Producción:
Ejemplo 2: en el siguiente código, las etiquetas se agregan a un modal con animaciones aplicadas. Las animaciones se aplican utilizando los atributos de animaciones de la biblioteca Motion UI de Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.2.1/motion-ui.min.js">
</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>
Producción:
Referencia: https://get.foundation/sites/docs/reveal.html#accessibility
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA