Que es el atributo HTML «role».
Un role es un atributo de HTML que se utiliza para proporcionar información adicional sobre un elemento y su función en la página web. Los roles se utilizan a menudo para proporcionar información de contexto a los lectores de pantalla, lo que les permite presentar el contenido de manera más significativa para los usuarios con discapacidad visual.
Para que se usa el atributo «role».
Los roles se pueden utilizar en cualquier elemento HTML, pero son especialmente útiles para elementos que no tienen un significado semántico obvio, como los elementos div y span. Al asignar un rol a estos elementos, puedes proporcionar información adicional sobre su propósito y su relación con el resto del contenido de la página.
Por ejemplo, si tienes una barra de navegación en tu sitio web, puedes utilizar el rol navigation para indicar que los enlaces de la barra de navegación proporcionan acceso a diferentes secciones del sitio web. Esto puede ser útil para los usuarios que utilizan lectores de pantalla, ya que les permite obtener una comprensión más profunda del contenido de la página y navegar de manera más eficiente.
Tipos de «role» que existen en los enlaces HTML.
Existen muchos tipos de roles para los enlaces en HTML, aunque algunos de los más comunes son:
<strong>link</strong>: Este es el rol predeterminado para los enlaces y se utiliza para enlazar a otras páginas o a recursos externos.<strong>navigation</strong>: Este rol se utiliza para enlaces que navegan a otras secciones de la misma página o a otras páginas del sitio web.<strong>search</strong>: Este rol se utiliza para enlaces que llevan a una página de búsqueda o a un formulario de búsqueda.<strong>button</strong>: Este rol se utiliza para enlaces que funcionan como botones y realizan una acción en lugar de navegar a otra página.<strong>help</strong>: Este rol se utiliza para enlaces que proporcionan ayuda o información adicional sobre el contenido de la página.<strong>footer</strong>: Este rol se utiliza para enlaces que se encuentran en el pie de página y pueden incluir enlaces a políticas de privacidad, términos de uso, etc.<strong>copyright</strong>: Este rol se utiliza para enlaces que proporcionan información sobre los derechos de autor del contenido de la página.
Ejemplos con todos los tipos de «role».
Aquí tienes un ejemplo de cómo utilizar cada uno de los roles para los enlaces que mencioné anteriormente:
- role=»
link«:
<a href="https://www.example.com" role="link">Enlace a otra página</a>
- role=»
navigation«:
<a href="/seccion1" role="navigation">Sección 1</a>
<a href="/seccion2" role="navigation">Sección 2</a>
- role=»
search«:
<form action="/search">
<input type="text" name="q">
<button type="submit" role="search">Buscar</button>
</form>
- role=»
button«:
<a href="#" role="button" onclick="enviarFormulario()">Enviar formulario</a>
- role=»
help«:
<a href="/ayuda" role="help">Obtener ayuda</a>
- role=»
footer«:
<footer>
<a href="/politica-de-privacidad" role="footer">Política de privacidad</a> |
<a href="/terminos-de-uso" role="footer">Términos de uso</a>
</footer>
- role=»
copyright«:
<a href="/derechos-de-autor" role="copyright">Todos los derechos reservados</a>
