El lenguaje de marcado de hipertexto (HTML) es una poderosa herramienta de desarrollo web combinada con CSS y JavaScript. Además de estos, HTML también utiliza la aplicación de Internet enriquecida accesible (ARIA) para hacer que el contenido web sea accesible para una persona con discapacidad. Aunque ARIA es beneficioso, hay palabras clave comunes tanto para HTML como para ARIA, lo que crea perplejidad entre los estudiantes aficionados.
HTML ‘oculto’: el atributo HTML ‘oculto’ se utiliza cuando algún contenido está obsoleto y ya no es necesario. Oculta completamente los detalles del usuario. Es un indicador semántico de estado en código HTML. Si se utiliza este atributo, los navegadores no mostrarán elementos que tengan especificado el atributo oculto. El atributo oculto se puede ver usando alguna condición o JavaScript usado para ver el contenido oculto.
Sintaxis:
<element hidden>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>hidden attribute</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>hidden attribute</h2>
<!-- hidden paragraph -->
<p hidden>A computer science portal for geeks</p>
</body>
</html>
Producción:
aria-hidden: el uso de ‘aria-hidden=”true”’ elimina el elemento y sus elementos secundarios del árbol de accesibilidad en algunos navegadores, la tecnología de asistencia, pero el contenido se mostrará en el navegador. De acuerdo con la cuarta regla de ARIA , el uso de características ocultas no está permitido en el elemento enfocable porque hará que el usuario no enfoque nada. No utilice aria-hidden=”true” dentro de una etiqueta <body> ; toda la página no será accesible para la tecnología de asistencia.
Sintaxis:
<element aria-hidden="true/false">
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>aria-hidden="true/false" </title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h4>aria-hidden="true/false"</h4>
<!-- aria-hidden="true" paragraph -->
<p arie-hidden="true">
A computer science portal for geeks
</p>
</body>
</html>
Nota: El aria-hidden indica que los elementos y todos sus elementos secundarios no son visibles para ningún usuario tal como los implementó el desarrollador.
Diferencia entre HTML oculto y aria oculto:
| HTML oculto | aria-oculto |
|---|---|
| HTML oculto oculta todo del usuario. | ARIA’s aria-hidden, oculta el contenido de la tecnología de asistencia |
| Al usar HTML oculto, puede eliminar el contenido enfocable de la navegación del navegador. | Mientras usamos ARIA oculto, no eliminamos el contenido del navegador. |
| Puede aplicar el estilo de visualización CSS: ninguno en HTML oculto. | ARIA’s aria-hidden, no se aplicará tal script. |
Publicación traducida automáticamente
Artículo escrito por tripathishashwat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA