viernes, 2 de mayo de 2014

El 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 del 18 de enero de 2011: http://www.w3.org/TR/2011/CR-wai-aria-20110118/



Espero haber ayudado en algo. Hasta la próxima oportunidad!





6 comentarios:

  1. Respuestas
    1. Hola Marcos, gracias por la visita y el aporte de tu comentario!!

      Los mejores deseos!! Hasta cualquier instante!!

      Eliminar
  2. Muy bien explicado! Perdón si la pregunta es obvia, pero, los valores del atributo role no sriven tambien para los buscadores a la hora de indexar los contenidos de la pagina?

    ResponderEliminar
    Respuestas
    1. Hola Anónimo, gracias por la visita y el aporte de tu comentario!
      Los valores del atributo role sirven para que los buscadores conozcan como está estructurada una página web. Por otro lado, no sé si los buscadores lo utilizan al momento de la indexar las páginas. Muy aparte, el tema de indexación en google es tan oculto que a ciencia cierta sólo ellos saben que parámetros tienen en cuenta a la hora de indexar y posicionar una página web.

      Los mejores deseos! Hasta cualquier instante!

      Eliminar
  3. no entendí una papa... si lo haces con un código completo y relacionado entre sí de página web puede que sí te entienda.

    ResponderEliminar
    Respuestas
    1. Hola AnToR999, gracias por la visita y el aporte de tu comentario!!
      Trataré de no acortar tanto las publicaciones!!
      Los mejores deseos!! Hasta cualquier instante!!

      Eliminar