Original article: HTML Role Attribute Explained

El atributo role describe la función de un elemento en programas que puedan hacer uso de él, tales como lectores de pantallas o magnificadores.

Ejemplo de uso:

<a href="#" role="button">Link del botón</a>

Los lectores de pantalla leerán este elemento como “botón” en vez de “link”.

Hay cuatro categorías de funciones:

  • Funciones abstractas
  • Funciones del widget
  • Estructura del documento Funciones
  • Funciones destacadas

Más información sobre atributos HTML:

Los elementos HTML pueden tener atributos, los cuales contienen información adicional sobre el elemento.

Generalmente, los elementos HTML vienen en pares de nombre-valor
y siempre se ubican en la etiqueta de apertura de un elemento. El nombre del atributo dice qué tipo de información le estás proporcionando acerca del elemento, y el valor del atributo es la información propiamente.

Por ejemplo, un elemento ancla (<a>) en un documento HTML, crea links hacia otras páginas, o hacia otras partes de la página. Tú usas el atributo href en la apertura de la etiqueta <a> para decirle al navegador hacia donde el link envía al usuario.

Aquí hay un ejemplo de un link que envía al usuario a la página de inicio de freeCodeCamp:

<a href="www.freecodecamp.org">Click aquí para ir a freeCodeCamp!</a>

Fíjate que el nombre del atributo (href) y el valor (“www.freeCodeCamp.org”) están separados por un signo igual y el valor está entre comillas.

Hay diferentes atributos HTML, pero la mayoría de ellos solo funcionan en determinados elementos HTML. Por ejemplo, el atributo href no funcionará si está situado en la apertura de una etiqueta <h1>.

En el ejemplo de arriba, el valor proporcionado al atributo href podría ser cualquier link válido. Sin embargo, algunos atributos tienen solo un conjunto de opciones válidas que puedes usar, o los valores deben estar en un formato específico. El atributo lang le dice al navegador el idioma predeterminado de los contenidos en un elemento HTML. Los valores para el atributo lang, deben usar un idioma estándar o códigos de país, tales como en para inglés, o it para italiano.

Atributos Booleanos

Algunos atributos HTML no necesitan un valor porque tiene solo una opción. Estos son los llamados atributos booleanos. La presencia de un atributo en una etiqueta se aplicará a ese elemento HTML. Sin embargo, está bien escribir el nombre del atributo e igualarlo a la única opción para el valor. En este caso, el valor es usualmente el mismo que el nombre del atributo.

Por ejemplo, el elemento <input> en un formulario puedes tener un atributo required. Esto requiere que los usuarios completen ese campo antes de enviar el formulario.

Aquí hay ejemplos que hacen lo mismo:

<input type="text" required >
<input type="text" required="required" >