El atributo ‘aria-hidden’ juega un papel importante en el contexto de la accesibilidad web . Es una forma sencilla de hacer que el contenido/las aplicaciones web sean más accesibles para las personas con discapacidad. Este atributo se utiliza para indicar que el elemento y todos sus descendientes no son visibles ni perceptibles para ningún usuario según la implementación. Ahora, en su mente, puede surgir una pregunta sobre cuál es la diferencia entre los atributos ‘ocultos’ y ‘ocultos en aria’.
El aspecto principal de hacer esta solución es hacer que el contenido sea legible solo cuando el contenido está visible en la pantalla; de lo contrario, debería permanecer inaccesible. Aquí, usaremos el método attr() para hacer lo mismo que se usa para establecer/obtener el atributo de un elemento.
Sintaxis:
Getter: $([selector]).attr('attribute');
Setter: $([selector]).attr('attribute', 'value');
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
aria-hidden attribute on JQuery Show/Hide functions
</title>
<!-- Added support for BS3 and jQuery using CDN -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src=
"https://code.jquery.com/jquery-3.4.1.slim.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
<style>
.access {
margin-left: 90px;
}
</style>
</head>
<body>
<br><br>
<div class="row">
<div class="col-sm-4">
<!-- button to toggle attribute -->
<center>
<button class="btn btn-success">
Toggle
</button>
</center>
</div>
<div class="col-sm-8">
<!-- Attribute's value -->
<p><i>aria-hidden</i> attribute's value :
<b>
<span id="answer">false</span>
</b>
</p>
</div>
</div>
<br>
<br>
<div class="container-fluid">
<div class="access" aria-hidden="false">
<!-- For Content accessibility -->
<h1 class="text-success">
GeeksforGeeks
</h1>
<b>
A Computer Science portal for Geeks
</b>
</div>
</div>
<script>
$(document).ready(function() {
$('button').click(function() {
/*Check and alternate attribute's value,
then show/hide accordingly using chaining. */
if ($('.access')
.attr('aria-hidden') == 'true')
$('.access')
.attr('aria-hidden', 'false')
.show('fast');
else
$('.access')
.attr('aria-hidden', 'true')
.hide('slow');
// Display changed attribute's value
$('#answer')
.text($('.access')
.attr('aria-hidden'));
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA