lenguaje example etiquetas ejemplos descargar codigos code html

etiquetas - html example



¿Cuál es el propósito del atributo "rol" en HTML? (4)

¿Es necesario este atributo de rol?

Respuesta: .

  • El atributo de rol es necesario para admitir aplicaciones de Internet enriquecidas accesibles (WAI-ARIA) para definir roles en lenguajes basados ​​en XML, cuando los idiomas no definen su propio atributo de rol.
  • Aunque esta es la razón por la cual el grupo de trabajo de Protocolos y formatos publica el atributo de rol, el atributo también tiene casos de uso más generales.

Te proporciona:

  • Accesibilidad
  • Adaptación del dispositivo
  • Procesamiento del lado del servidor
  • Descripción de datos complejos, ... etc.

Sigo viendo los atributos de los roles en el trabajo de algunas personas. Yo también lo uso, pero no estoy seguro de su efecto.

Por ejemplo:

<header id="header" role="banner"> Header stuff in here </header>

O:

<section id="facebook" role="contentinfo"> Facebook stuff in here </section>

O:

<section id="main" role="main"> Main content stuff in here </section>

¿Es necesario este atributo de rol?

¿Es este atributo mejor para la semántica?

¿Mejora SEO?

here se puede encontrar una lista de roles, pero veo que algunas personas se inventan. ¿Está permitido o es un uso correcto del atributo de rol?

Tiene alguna idea sobre esto?


Como lo entiendo, los roles fueron definidos inicialmente por XHTML pero fueron desaprobados. Sin embargo, ahora están definidos por HTML 5, consulte aquí: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

El propósito del atributo de función es identificar al software de análisis la función exacta de un elemento (y sus elementos secundarios) como parte de una aplicación web. Esto es principalmente como una cuestión de accesibilidad para los lectores de pantalla, pero también puedo verlo como útil para los navegadores integrados y los rascadores de pantalla. Para ser útil para el cliente HTML inusual, el atributo debe establecerse en uno de los roles de la especificación que vinculé. Si crea la suya, esta funcionalidad ''futura'' no puede funcionar; un comentario sería mejor.

Prácticas aquí: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/


La mayoría de los roles que ve se definieron como parte de ARIA 1.0 y luego se incorporaron a HTML5. Algunos de los nuevos elementos HTML5 (diálogo, main, etc.) se basan incluso en los roles originales de ARIA.

http://www.w3.org/TR/wai-aria/

Hay dos razones principales para usar roles además de su elemento semántico nativo.

Razón # 1. Anulación de la función donde ningún elemento del lenguaje principal es apropiado o, por diversas razones, se utilizó un elemento menos semánticamente apropiado.

En este ejemplo, se utilizó un enlace, aunque la funcionalidad resultante es más similar a un botón que un enlace de navegación.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Los lectores de pantalla escucharán esto como un botón (a diferencia de un enlace), y usted puede usar un selector de atributos CSS para evitar las clases y divisiones.

*[role="button"] { /* style these a buttons w/o relying on a .button class */ }

Razón # 2. Copia de seguridad de la función de un elemento nativo, para admitir navegadores que implementaron la función ARIA pero que aún no han implementado la función del elemento nativo.

Por ejemplo, la función "principal" ha sido compatible con los navegadores durante muchos años, pero es una adición relativamente reciente a HTML5, por lo que muchos navegadores aún no admiten la semántica para <main> .

<main role="main">…</main>

Esto es técnicamente redundante, pero ayuda a algunos usuarios y no daña a ninguno. En unos pocos años, esta técnica probablemente se volverá innecesaria.

También escribiste:

Veo que algunas personas se hacen las suyas. ¿Está permitido o es un uso correcto del atributo de rol?

Ese es un uso válido del atributo a menos que no se incluya un rol real. Los navegadores aplicarán el primer rol reconocido en la lista de tokens.

<span role="foo link note bar">...</a>

Fuera de la lista, solo el link y la note son roles válidos, por lo que el rol de enlace se aplicará porque es lo primero. Si usa roles personalizados, asegúrese de que no entren en conflicto con ningún rol definido en ARIA o en el idioma del host que está usando (HTML, SVG, MathML, etc.)


Me doy cuenta de que esta es una pregunta antigua, pero otra posible consideración dependiendo de sus requisitos exactos es que la validación en https://validator.w3.org/ genera las siguientes advertencias:

Advertencia: el rol de formulario no es necesario para el formulario de elementos.