Accesibilidad, Parte 3: ARIA

En el artículo previo de ésta serie abordamos el primer principio de accesibilidad: asegurar que el contenido debe estar disponible en un formato que pueda ser claramente percibido por el usuario. Si un usuario está usando tecnologías asistenciales, una forma de lograrlo es hacer que esas tecnologías interpreten y entiendan tu sitio y su contenido más fácilmente. En éste artículo nos enfocaremos en una forma particular de hacer ésto: ARIA (Accesibilidad en Aplicaciones Web Enriquecidas).

WAI-ARIA (Iniciativa de Accesibilidad para la Web-Accesibilidad en Aplicaciones Web Enriquecidas), o ARIA, es un protocolo W3C que mejora la interacción de tu sitio con tecnologías asistenciales. Hace ésto de varias maneras:

• Proporciona una forma de declarar la estructura de una página (por ejemplo etiquetar el propósito o rol de una sección de la página-navegación, búsqueda, contenido principal, etc.).
• Mejora la accesibilidad de controles interactivos (tales como menús con estructura de árbol, arrastrar y soltar, sliders,  controles de ordenación, etc.) al declarar su 'estado', (por ejemplo habilitado/deshabilitado, oculto, campos requeridos).
• Proporciona una forma de declarar regiones donde el contenido puede ser actualizado dinámicamente (llamadas regiones vivas), para que esas actualizaciones pueden captar la atención del usuario.

Navegadores antiguos no presentan un problema aquí: ARIA es soportada por la mayoría de los navegadores modernos y lectores de pantalla, y para el resto no hay problemas de compatiblidad.

En ésta serie nos enfocaremos en el primero de los puntos señalados arriba, declarar el rol de un elemento como parte de la estructura de la página.

Roles

Si la estructura de una página puede ser determinada programáticamente, y cada 'region' de la página web puede ser identificada (por ejemplo navegación del sitio, contenido principal, barra lateral, etc.), entonces las tecnologías asistenciales pueden hacer mejor la tarea de presentar esa estructura al usuario. Por ejemplo,  enlaces "saltar al contenido" (que cubriremos en el próximo artículo) puede llegar a ser obsoleto si un lector de pantalla sabía donde estaba el contenido principal. Sin embargo, HTML, no proporciona una forma de identificar el propósito de una región en la página. Aquí es donde entran los roles de ARIA.

Un rol de ARIA es simplemente un valor de atributo que identifica el propósito del elemento. El ejemplo más sencillo sería un formulario de búsqueda:

1

<form role="search"> 

2

    ... 

3

</form>

El rol (role) 'search' (búsqueda) identifica éste <form> como un formulario para buscar en el contenido del sitio, y un lector de pantalla que es capaz de reconocer eso sabe a donde llevar al usuario si quieren buscar contenido. Algunos lectores de pantalla, por ejemplo, proporcionan una tecla de navegación rápida  para saltar hacia el formulario de búsqueda. Igualmente, tener en cuenta la estructura de la página permite a las tecnologías asistenciales generar un 'árbol' significativo de la página. El lector de pantalla JAWS, por ejemplo, utiliza la tecla punto y coma para saltar entre éstos roles, permitiendo al usuario saltar rápidamente entre regiones del sitio (su encabezado, navegación, contenido principal, etc.).

Éste tipo de atributo es llamado Roles de Regiones del Documento, y entre los valores disponibles están:

Banner

Contenido relacionado al sitio web, por ejemplo el nombre del sitio web y/o logo de la compañía. En la mayoría de los temas ésta información está en header.php y etiqueta un elemento que encierra el título, la  descripción y el logo del sitio con éste rol:

1

<div id="branding" role="banner"> 

2

3

    <p class="site-title">

4

        <a href="<?php echo esc_url( home_url( '/' ) );?>">

5

            <?php echo get_bloginfo('name'); ?> 

6

        </a>

7

    </p> 

8

9

    <p class="site-description">

10

        <?php echo get_bloginfo( 'description' );?>

11

    </p> 

12

13

</div>

Navigation (Navegación)

Éste papel identifica la parte de la página que contiene los enlaces de navegación para el documento o sitio web. Un tema puede tener múltiples locaciones de navegación, y cada uno puede ser encerrado en un elemento con el rol de navegación:

1

<nav role="navigation"> 

2

3

    <?php wp_nav_menu( array( 

4

        'theme_location' => 'primary'

5

    ) ); ?> 

6

7

</nav>

De acuerdo a las especificaciones HTML5, role="navigation" le corresponde estar ímplicito en el uso de <nav>, y por lo tanto no requerido. Sin embargo, no es malo ser explícito.

Main (Principal)

El contenido principal de la página. Éste debe aparecer solamente una vez en la página. Cada tema variará, pero los archivos plantilla relevantes típicamente incluirán:

• index.php
• single.php
• page.php

Tu 'bucle principal', por ejemplo puede verse así:

1

<div id="main" class="hfeed" role="main"> 

2

3

    <?php if ( have_posts() ) : ?> 

4

5

        <?php while ( have_posts() ) : the_post(); ?> 

6

7

            //The loop content 

8

9

        <?php endwhile; ?> 

10

11

    <?php endif; ?> 

12

13

</div>

y tus plantillas de página podrían verse así:

1

<div id="main" role="main"> 

2

3

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 

4

5

        <h1 class="entry-title"> <?php the_title(); ?> </h1> 

6

7

        <div class="entry-content"> 

8

9

            <?php the_content(); ?> 

10

        </div> 

11

12

    </div> 

13

14

</div>

Search (Búsqueda)

Ésto identifica el (los) formulario(s) de búsqueda en tu sitio, y puede ser usado más de una vez. La mayoría de los temas no incrustan un formulario de búsqueda en su tema, sino dependen de regiones donde se pueden incluir widgets en las que el usuario puede añadir el widget de búsqueda. En éste caso (y asumiendo que estás ejecutando WP 3.6 o superior), no necesitas hacer nada: el formulario de búsqueda predeterminado de WordPress ya añade el rol de búsqueda apropiadamente. Es más, también maneja las etiquetas de formulario y el botón de submit de una manera accesible.

Si incrustas un formulario de búsqueda en tu tema, asegúrate de usar get_search_form() (ver codex). Finalmente, si requieres que tu tema cambie el formulario de búsqueda predeterminado, puedes crear un archivo de plantilla llamado searchform.php-pero asegúrate de añadir el rol de búsqueda. El formulario de búsqueda predeterminado es:

1

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> 

2

3

    <label> 

4

        <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ); ?></span> 

5

        <input type="search" class="search-field" placeholder="Search &hellip;" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ); ?>" /> 

6

    </label> 

7

8

    <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" /> 

9

10

</form>

Article (Artículo)

Ésto identifica un fragmento de contenido independiente que da sentido de aislamiento. Un buen ejemplo de ésto sería los artículos de blog que aparecen en tu página 'posts'. Igualmente cada comentario puede ser considerado un 'articulo'. Puede anidarse también: por ejemplo un comentario (artículo) puede colocarse dentro del post (artículo) del blog.

1

<?php while ( have_posts() ) : the_post(); ?> 

2

3

    <article id="post-<?php the_ID(); ?>" <?php post_class();?> role="article"> 

4

5

        //Post title / excerpt... 

6

7

    </article> 

8

9

<?php endwhile; ?>

Complementary (Complementario)

Ésto identifica una región que ha sido descrita como "contenido de apoyo para el contenido principal". En un contexto de WordPress, ésto puede referirse a las barras laterales. Tu plantilla sidebar.php, por lo tanto, puede verse así:

1

<div class="sidebar" role="complementary"> 

2

3

    <?php if ( is_active_sidebar( 'right-sidebar' ) ){ 

4

5

        dynamic_sidebar( 'right-sidebar' ); 

6

7

    } ?> 

8

9

</div>

Contentinfo

Éste es típicamente usado para identificar el footer (pie de página). Oficialmente es descrito como:

Una gran región perceptible que contiene información sobre el documento padre.

Por ejemplo, puede incluir notas de pie, derechos de autor, enlaces a declaraciones de privacidad, etc. Sin embargo, es generalmente utilizado para etiquetar el pie de la página sin importar su contenido. Firefox, Safari y Chrome automáticamente asignan el rol de contentinfo a las etiquetas <footer>:

1

<body> 

2

    ... 

3

    <footer role="contentinfo"> 

4

        //Footer 

5

    </footer> 

6

7

    <?php wp_footer(); ?> 

8

9

</body>    

ARIA y HTML5

Aunque está incrementándose, el apoyo para HTML5 por parte de lectores de pantalla varía. Por otro lado, el soporte para ARIA es típicamente mucho mejor. Así que aunque más y más navegadores son automáticamente identificando etiquetas de HTML semánticas con su rol apropiado, aún es una buena idea señalar explícitamente el rol. Sin embargo, se tiene que tener cuidado de no alterar el 'rol' nativo de un elemento semántico. Por ejemplo, deberías evitar hacer algo como:

1

<h1 role="button">Click Me!</h1>

Debajo hay una lista de algunos de los elementos de HTML5, junto con sus roles implícitos ARIA.

Cuando se usa HTML5, deberías usar un script como HTML5 Shiv v3.6, de la forma en como se usa en los temas Twenty*, para proporcionar soporte para navegadores antiguos.

Conclusión

Declarar roles ARIA es una forma increíblemente fácil de ayudar a usuarios de tecnologías asistenciales para interpretar el maquetado de tu sitio y encontrar el contenido que buscan. En la próxima parte de ésta serie, estaremos abordando el principio de asegurar que tu tema sea Operable. Hablando en términos generales ésto indica que los usuarios deben navegar fácil y seguramente por tu sitio.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!