atributo semántico role

atributo semántico "role"

El XHTML (http://www.w3.org/1999/xhtml/vocab/#XHTMLRoleVocabulary) y el XHTML2 Working Group preconizaban el uso del atributo role (http://www.w3.org/TR/xhtml2/mod-roleAttribute.html) para definir de forma más semántica los elementos estructurales de una página web.

En HTML5 podemos usar el atributo role para incluir esa información adicional gracias al módulo WAI-ARIA (http://www.w3.org/TR/aria-in-html/ en working Draft a 3 de octubre de 2013). Este módulo se ocupa de la gestión del contenido de las páginas web para la personas discapacitadas. Determinados elementos HTML5 tienen un role implícito, como, por ejemplo, el elemento <nav>, cuyo role implícito es navigation.

Estos son los principales valores del atributo role: main: define el contenido principal de un documento. secondary: define una parte secundaria del documento. navigation: define la barra de navegación del documento. banner: aparece por lo general en lo alto de la página y suele contener el logotipo y el eslogan de la empresa. contentinfo: indica que dicho elemento aporta información sobre el contenido de la página (autores, copyrights, menciones legales...). definition: presenta la definición de un elemento. note: corresponde, por lo general, a una nota entre paréntesis o al final de la página. seealso: indica que el elemento contiene información relacionada con el contenido principal de la página. search: contiene el formulario de búsqueda de una página web.

Veamos un ejemplo simple de cómo usarlo:

<div id="buscar" role="search">

...

</div>

Otro ejemplo:

<header id="banner" role="banner">

...

</header>

Si desea obtener más información sobre Accessible Rich Internet Applications (WAI-ARIA), consulte la Candidate Recommendation