Accesibilidad, Parte 4: Operable

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Hablando en términos generales éste es el principio de que tu sitio web pueda ser navegado seguramente por todos los usuarios. Ésto incluye la pauta que todo tu sitio web debe ser accesible con solo usar el teclado. Es más, la forma en que tu sitio web responde a la interacción del usuario (por teclado o de otra manera) debería ser predecible, clara y segura.

Éste último punto se refiere principalmente a asegurar que cualquier característica de tu sitio que potencialmente provoque un ataque sea deshabilitada por defecto, y que los usuarios fueron advertidos antes de habilitarla. Éste principio también proporciona pautas sobre proporcionar "tiempo suficiente" para que los usuarios completen tareas, pero no las cubriremos aquí.

Accesibilidad por Teclado (2.1)

Poder navegar y usar tu sitio con solo el teclado es uno de los aspectos más importantes de la accesibilidad. Usuarios invidentes dependen de teclados, casi exclusivamente, y aquellos que tienen discapacidad motriz pueden tener dificultad para controlar un mouse, y también dependen del acceso mediante el teclado. Algunos individuos pueden tener poco o ningún uso de sus manos, y dependen de teclados más grandes, varilla bucal,casco con varilla incorporada o el pulsador Sip 'n' Puff (soplido y succión).

Puedes encontrar descripciones de éstos dispositivos en el sitio web WebAIM, pero esencialmente todos canalizan la interacción del usuario por medio del teclado. Si tu sitio web no es accesible por teclado, entonces todos los usuarios que dependen de éstos dispositivos no podrán utilizar tu sitio.

Afortunadamente, hacer tu tema o plugin accesibles por el teclado es relativamente simple. Aquí están algunos puntos clave:

Asegura que todo tu Menú pueda ser accesado por el Teclado

Muchos temas dependen en colocar el puntero sobre un elemento del menú para revelar cualquier submenú. Ésto está bien, pero generalmente el submenú no aparecerá si el elemento del menú padre tiene el estado focus (foco) (en lugar de hover). Si duplicas cualquier regla relevante para :hover y las aplicas a :focus también, esto te llevará a la mitad del camino: los elementos del submenú aparecerán mientras el usuario pulsa a través del menú. Sin embargo, una vez que el usuario pulsa hacia el submenú, el menú padre pierde el foco y el submenú desaparece. Ésto puede corregirse utilizando Javascript. Detalles sobre ésto y cómo proporcionar una alternativa diferente a Javascript se cubrirá en el próximo artículo de ésta serie.

No "Dejes Atrapados" a los Usuarios

No necesitas hacer nada para hacer campos de formularios 'nativos' (select, input, radio, etc.) accesibles por teclado. Sin embargo, cualquier aspecto de tu página (incluyendo campos de formulario) debería obtener foco, debe ser posible alejarse de él usando sólo un teclado-de otra forma el usuario queda atrapado. Éste es normalmente el comportamiento predeterminado, así que deberías evitar sobreescribirlo.

Hacer la Navegación Fácil y Clara (2.4)

Ésta pauta tiene dos tipos de recomendaciones: hacer que sea obvia la ubicación actual del usuario, y hacer más fácil el camino hacia donde quiere dirigirse.

Parte de seguir las recomendaciones de hacer ésto involucra algo que muchos temas ya hacen: tener un menú de navegación consistente a través de las páginas, resaltar la página actual, y permitir a usuarios que rápidamente determinen donde están en el sitio (por ejemplo con breadcrumbs (miguitas para navegar).

Aplicar estilo adecuadamente a :Focus (foco)

Una parte clave de poder usar un teclado para navegar por una página web es pode ver precisamente que se está enfocando actualmente. El elemento que actualmente tiene el foco debe ser visiblemente diferente, y distinguirse del resto de la página. Por ésta razón deberías evitar outline:none; a menos que vayas a proporcionar un estilo alternativo:

a:focus{ 
    outline: none; 
    background: #ee7b00; 
    color: #fff; 
}

Orden de Foco y Tabindex

Otra parte importante de accesibilidad por teclado es que el pulsado de la tecla tabulador se comporta de manera predecible y natural. Por ejemplo, si el foco está actualmente en un campo de formulario, yo esperaría que la próxima pulsación de la tecla tabulador me llevara al próximo campo en ese formulario. Si el pulsado causa que el foco vaya hacia arriba y abajo en la página erráticamente, entonces ésto frustrará y desorientará al usuario.

Evita utilizar tabindex: el atributo tabindex te permite alterar el orden en el que son alcanzados los elementos mediante la pulsación de la tecla tabulador. Sin embargo, si seguiste el consejo del artículo 2 de ésta serie concerniente a la estructura DOM, el orden de la pulsación debería reflejar el orden "natural" de la página. Mientras tabindex tiene sus usos, éstos son raros, y su uso para 'parchar' la estructura pobre de un sitio puede crear más problemas. El mejor método es evitar usar tabindex, y mejor que tu tema produzca una estructura DOM lógica, con CSS utilizado para alterar la presentación visual.

Evita "Leer Más" o "Continuar Leyendo"

Usuarios de lectores de pantalla con frecuencia saltarán entre enlaces, omitiendo el texto entre los mismos, y en cada enlace el lector de pantalla leerá el "enlace [texto de enlace]". Así, es increíblemente inútil para esos usuarios si reiteradamente escuchan "enlace leer más", "enlace da click aquí" o "enlace continuar leyendo". Agregar contexto al enlace en éste caso simplemente involucra proveer el título del artículo. Así que en lugar de "Continuar leyendo", tenemos "Continuar leyendo [título del artículo]".

Para hacer ésto en un tema de WordPress, simplemente necesitamos aprovechar el filtro excerpt_more y agregar nuestro enlace "continuar leyendo":

//Adds "continue reading X" link 
function mytheme_continue_reading_link() { 
    return '<p class="read-more">' 
        . sprintf( 
            __( '<a href="%s">Continue reading %s</a>', 'mytheme' ), 
            esc_url( get_permalink() ), 
            esc_html( get_the_title() ) 
        ) 
        .'</p>'; 
        
} 
        
    
//Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and mytheme_continue_reading_link(). 
function mytheme_auto_excerpt_more( $more ) { 
    return ' &hellip;' . mytheme_continue_reading_link(); 
} 
add_filter( 'excerpt_more', 'mytheme_auto_excerpt_more' );

Ésto da al enlace "leer más" el contexto adecuado. Sin embargo, hay un par de mejoras que pueden efectuarse.

Primeramente, la adición del título del artículo típicamente arruinará la estética del tema y, para usuarios videntes, será redundante, pues la posición del enlace "leer más" en relación al título del artículo y extracto harán el contexto obvio. Para solucionar éstos problemas, podemos "ocultar" el título del artículo, pero de una forma que los lectores de pantalla aún lo puedan leer.

Ésto significa que no podemos usar display:none o visibility:hidden; pues los lectores de pantalla entienden éstas propiedades e ignorarán el contenido. En cambio podemos colocar el texto fuera de la pantalla o usar la propiedad clip:

.screen-reader {
    position: absolute!important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Hay muchos ejemplos diferentes de "clases de lector de pantalla"; particularmente éste es tomado de Bootstrp 3. Luego, agrega la clase apropiada al título del artículo, específicamente remplazando la línea 5 de arriba con:

1	__( '<a href="%s">Continue reading <span class="screen-reader">%s</span></a>', 'mytheme' ),

Segundo, mientras ésto daría a los usuarios una indicación a dónde está apuntando ese enlace, aún tendrían que escuchar a través del "enlace continuar leyendo..." antes de llegar al título del artículo. Idealmente deberías poner información redundante al final del texto del enlace, u omitirlo totalmente de la etiqueta anchor, para reducir el tiempo que tarda en identificar un enlace.

Otro beneficio para los usuarios de lectores de pantalla de no preceder texto enlazado con información redundante es que los lectores de pantalla con frecuencia generarán una lista de enlaces en una página. Si muchos de tus enlaces comienzan con el mismo texto, ésto puede hacer más difícil el encontrar un enlace deseado-particularmente si el enlace para tu página de contacto está comienza con "C" porque lee "Como contactarnos".

Usar la etiqueta `<title>` correctamente

La etiqueta <title> debería usarse para identificar la ubicación actual del usuario. Ésto es leído por lectores de pantalla, y aparece en los resultados de búsqueda y en la ventana de la pantalla y en la pestaña del navegador. Para que los usuarios identifiquen fácilmente donde están (o que ha encontrado la búsqueda), ésta etiqueta de título debería contener el título de la página y el nombre del sitio web. Idealmente el nombre del sitio web debería ir al último, para que las personas que usan lectores de pantalla no tengan que escuchar el nombre de tu sitio en cada carga de página antes de escuchar el título de la página.

La etiqueta título puede añadirse a un tema con:

1	<title><?php wp_title(); ?></title>

Para agregar el título del sitio:

/** * Append site title to page title */ 
function mytheme_wp_title( $title, $sep, $seplocation ){ 
    return $title . ' | ' . get_bloginfo('name'); 
} 
add_filter( 'wp_title', 'mytheme_wp_title', 10, 3 );

Saltar al Contenido

Típicamente los sitios web tendrán un encabezado y menú de navegación común que, con la excepción de resaltar la ubicación actual del usuario, quedarán exactamente igual. Tener que pulsar a través de todos éstos enlaces, o escuchar a un lector de pantalla repetirlos en cada carga de página, es tedioso y frustrante. Los que tenemos (suficiente) buena vista y habilidades motrices podemos inmediatamente saltar al contenido-y podemos hacer ésto tan fácilmente como aquellos que no.

Si estás en el administrador de Wordpress, y pulsas Tab después de que se carga la página, notarás que un enlace con la leyenda Saltar al contenido principal aparece en la esquina superior izquierda (si presionas de nuevo el tabulador, aparecerá un enlace Saltar a la barra de herramientas). Éste enlace se ubica en el extremos superior de la página, así que éste es el primer enlace que recibe foco cuando se pulsa el tabulador, y el primer enlace del sitio web leído por un lector de pantalla. Después de ese enlace salta el usuario hasta el contenido principal, ignorando todos los enlaces inncesarios y los logos del sitio que haya en el camino.

Crear un salto al contenido es una gran manera de hacer tu sitio web más fácil de navegar, y es increíblemente sencillo, requiriéndose sólamente un poco de HTML y algo de CSS.

Primero el HTML. El enlace debería ir en el extremo superior de tu página, inmediatamente debajo de la etiqueta <body>. En la mayoría de los temas éste será el archivo header.php:

</head> 

<body> 

    <a class="skip-link" href="#main">
        <?php _e( 'Skip to main content', 'mytheme' ); ?>
    </a> 
    
    //Rest of page content

Las únicas cosas para notar aquí son:

El valor de href, en ésta caso 'main'. Ésto debe coincidir con el ID del elemento que alberga el contenido de la página.
La clase del enlace, que usaremos para aplicar estilo.

Concerniente a (1), tu bucle se verá así:

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

    <?php if ( have_posts() ) : ?> 
    
        //The Loop
    
    <?php else: ?>
        
        //No posts found... display search
      
    <?php endif; ?> 
    
</div>

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

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

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
    
        <h1 class="entry-title"> <?php the_title(); ?> </h1> 
        
        <div class="entry-content"> 
            <?php the_content(); ?> 
        </div> 
        
    </div> 
    
</div>

Ahora lo que queda es añadir algo de estilo al enlace.

Primero, queremos el enlace oculto pero no oculto para los lectores de pantalla, así que colocaremos el enlace afuera de la pantalla en lugar de usar display:none (el cual los lectores de pantalla lo ignoran).

Segundo, cuando recibe foco queremos hacer el enlace obvio, así que está claro que un enlace previamente oculto ahora es visible y tiene foco.

.skip-link { 
    position: absolute; 
    left:6px; 
    top:-100px; /* position offscreen so it's not visible, but can receive focus*/ 
    z-index: 100000; /* Position above WordPress' toolbar */ 
    font-size: 1em; 
    font-weight: bold; 
    display: block; 
    background: #ee7b00; 
    color: white; /*Style the link so that's clear*/ 
    height: auto; 
    width: auto; 
    line-height: normal; 
    padding: 15px 25px; 
    text-decoration: none;
    -webkit-transition: top 1s ease-out; 
    transition: top 1s ease-out; 
} 

.skip-link:focus { 
    top: 5px; /* Move onto screen */ 
    -webkit-transition: right 0s; 
    transition: right 0s; /*Animate, to make its appearance obvious */ 
}

Hacer segura la navegación en tu sitio (2.3)

Finalmente, debes percatarte que algunas personas son susceptibles a ataques epilépticos por fotosensibilidad. Ésto puede ser causado por efectos de parpadeo o destello. En Diciembre pasado Jeff Chandler removió un efecto de "nieve" de WP Tavern después de que un visitante le advirtió que podría provocar un ataque.

Ésto no se limita a ataques-puede provocar migraña o ataques de pánico en algunos individuos. Ni esta limitado a efectos de nieve-un archivo de video, carrusel o de audio reproduciéndose automáticamente puede también ocasionar éstos.

Aunque ésto es primordialmente una decisión de un editor y como desarrolladores no es nuestro trabajo evitar la reproducción automática, podemos al menos rechazarla, al deshabilitarla por defecto. Jeff menciona en su artículo que no podía encontrar un plugin que proporcionara el efecto "nieve" que los mismos visitantes pudieran reproducir.

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