Foundation es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for Apps le permite crear aplicaciones web totalmente receptivas.
En este artículo, aprenderemos sobre las Clases de visibilidad de accesibilidad que representan los componentes en la pantalla en función de si el dispositivo es un lector de pantalla o no. Esto puede ser útil para los usuarios que usan lectores de pantalla y es posible que no puedan notar contenido visual como un botón de icono.
Nota: Por lo general, no se recomienda ocultar contenido que solo debería ser visible para los usuarios normales. Por lo tanto, se puede establecer el atributo aria-hidden en verdadero, para evitar que el lector de pantalla lea contenido ilegible.
Clase de accesibilidad de visibilidad de Foundation CSS:
- show-for-sr: esta clase se usa para mostrar contenido solo cuando lo lee un lector de pantalla.
Sintaxis:
<p class="show-for-sr">
Content...
</p>
<p>
Content...
</p>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de la clase Visibility Accessibility en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="padding: 20px;"> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Visibility Classes Accessibility</h3> <p class="show-for-sr"> Hello Geeks, this is only read by a screen reader </p> <p> The line above can only be read by a screen reader </p> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png"> <p class="show-for-sr">GeeksforGeeks Logo</p> <p> There is an image subtitle above only read by a screen reader </p> </body> </html>
Producción:
Fundación CSS Visibilidad Accesibilidad
Ejemplo 2: a continuación se muestra otro ejemplo que ilustra el uso de la clase Visibility Accessibility en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <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= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="padding: 20px;"> <h1 style="color: green">GeeksforGeeks</h1> <h3>Foundation CSS Visibility Classes Accessibility</h3> <table> <thead> <tr> <th>Title</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>Title One</td> <td> <button type="button" class="button primary"> <p class="show-for-sr"> Edit </p> <span aria-hidden="true"> <i class="fi-pencil"></i> </span> </button> <button type="button" class="button primary"> <p class="show-for-sr"> Delete </p> <span aria-hidden="true"> <i class="fi-trash"></i> </span> </button> </td> </tr> <tr> <td>Title Two</td> <td> <button type="button" class="button primary"> <p class="show-for-sr"> Edit </p> <span aria-hidden="true"> <i class="fi-pencil"></i> </span> </button> <button type="button" class="button primary"> <p class="show-for-sr"> Delete </p> <span aria-hidden="true"> <i class="fi-trash"></i> </span> </button> </td> </tr> <!-- Show one row where the text is not hidden for comparison --> <tr> <td>Title Three</td> <td> <button type="button" class="button primary"> <span> Edit </span> <i class="fi-pencil"></i> </button> <button type="button" class="button primary"> <span> Delete </span> <i class="fi-trash"></i> </button> </td> </tr> </tbody> </table> </body> </html>
Producción:
Fundación CSS Visibilidad Accesibilidad
Referencia: https://get.foundation/sites/docs/visibility.html#accessibility
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA