Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. Accessibility
Webdesign

Accesibilidad: ¿Qué Te Está diciendo Tu Código?

by
Length:LongLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Hoy vamos a hablar sobre la accesibilidad y semántica. Empecemos con una pregunta: ¿Has usado alguna vez un lector de pantalla? Si la respuesta es no, deberías probarlo - quizá cambie para siempre la manera en la que afrontas la creación de tu código HTML.

Durante este artículo vamos a ver la estructura de una página web, la forma en la que los lectores de pantalla interpretan esa estructura, y las mejoras que podemos incluir en nuestro propio código para mejorar la accesibilidad.


Unas Breves Palabras Sobre la Demo

He creado una página de ejemplo para mostrar cómo procesan los lectores de pantalla un código concreto. También quería mostrar algo de código HTML5 semántico en su forma más básica - algo que espero te sea útil. Por último, cómo sé cuánto os gustan las descargas de archivos con el código fuente que acompañan los tutoriales, ¡también tenéis el archivo correspondiente a este tutorial!

What's Your Markup Saying to You Demo

La demo es una sencilla página formada por una sencilla columna flexible. No es responsiva, pero está preparada para serlo en caso de que así lo desees: usa unidades horizontales relativas (%), y también unidades relativas para las fuentes (em). Las imágenes son flexibles y modifican su tamaño según las dimensiones de su elemento contenedor. También usa un par de simpáticas fuentes de Google. Es ligero y limpio.


El Modelo de Estándares Web

Si eres un asiduo visitante de Tuts+, habrás escuchado una y otra vez que al construir un sitio web es importante separar los distintos aspectos que intervienen. Todo esto forma parte de lo que conocemos como el modelo de estándares web; la estructura, la presentación y el comportamiento.

Construimos la estructura mediante nuestro código HTML, definimos la presentación con nuestros estilos (la manera en la que se muestra el contenido en un determinado agente de usuario), a través de CSS, y el comportamiento de una página web, la interactividad del front-end, normalmente la generamos usando javascript.

Desde el punto de vista práctico, es mejor para nosotros tener estos tres aspectos del diseño web separados - de esta forma el mantenimiento del contenido será mucho más fácil, ya que será independiente de la estructura del sitio.

web standards model

La separación también beneficia la comprensión. Nosotros, los humanos, procesamos las páginas web gracias a la manera en la que nos la sirven los navegadores. Pero existen otras posibles formas para acceder a una página web, y además, los robots de los motores de búsqueda rastrean la estructura desnuda de las páginas para categorizar y posicionar adecuadamente el contenido.

Tenemos a nuestra disposición las Tecnologías de Asistencia (AT, Assistive Technologies) como, por ejemplo, lectores de pantalla. Estos interpretan las interfaces del ordenador y leen lo que ven, ayudando a que las usen aquellas personas con discapacidades visuales. Las páginas web son un ejemplo de ese tipo de interfaces cuyo contenido es interpretado por los lectores de pantalla, y las interpretan tal y como los desarrolladores se las presentemos mediante código. Un código confuso y mal estructurado desde el punto de vista de la lógica dará como resultado problemas de accesibilidad, con independencia de que la apariencia visual de la página en el navegador sea impecable.

Nota: Es importante recordar que, aunque este tutorial se centre en las discapacidades visuales, optimizar la accesibilidad beneficia también a los usuarios que sufran otro tipo de discapacidades (motoras, auditivas, cognitivas, etc.)


Semántica

Es posible que no entiendas aún a qué nos referimos al hablar de Semántica, pero seguro que has escuchado este término muchas veces. La semántica en el diseño web hace referencia a los significados atribuidos al código HTML. Tras dejar atrás las maquetaciones basadas en tablas, el valor semántico del código (X)HTML ha mejorado increíblemente, las celdas de las tablas han dado paso a etiquetas <div> (divisiones), las listas sin orden (<ul>) son ahora habituales, y hemos empezado a usar cosas como <em> (para enfatizar semánticamente) en lugar de <i> (estilo en cursiva, aunque sin significado) para aumentar la distancia entre el código y la presentación.

Actualmente, la comunidad del diseño web está adoptando el código HTML5, y gracias a la amplia gama de nuevos elementos que pone a nuestra disposición, podemos describir nuestro código con mayor detalle que nunca. La navegación principal normalmente todavía usa listas no ordenadas, pero ahora puede descansar dentro de etiquetas <nav>, lo cual describe perfectamente su función.

Para ayudarte a usar adecuadamente HTML5 semántico, consulta lo que tienen preparado los chicos de HTML5Doctor.com.


¿Has Usado Alguna Vez un Lector de Pantallas?

Es sorprendente el hecho de que pocos diseñadores web hayan usado realmente lectores de pantalla. Comprobar tu trabajo desde la perspectiva de alguien con una discapacidad visual puede resultar tan reconfortante como frustrante, pero te recomiendo que lo hagas al menos una vez. Los lectores de pantalla pueden resultar difíciles de entender, así que asegúrate de comprender la diferencia entre una accesibilidad pobre y la simple incapacidad para utilizar el software...

Los lectores de pantalla usan funciones de navegación alternativas (a través del teclado) para destacar, procesar, e interactuar con los distintos elementos de una pantalla. Saltar entre los controles de tu navegador y los controles dentro de una página web puede parecer complicado al principio. Sin embargo, una vez te hayas acostumbrado a usar las herramientas, la (in)accesibilidad de tu código te resultará más clara.

Existen varias herramientas que se usan habitualmente, aquí tienes unas cuantas como referencia:

Nota: Curiosamente, según el estudio demográfico llevado a cabo por webaim.org, la mayor parte de los usuarios de lectores de pantalla citan a Internet Explorer como el navegador que usan normalmente cuando leen las páginas. Creo que Microsoft todavía no interpreta adecuadamente la especificación CSS…


Código de Ejemplo

Normalmente recibo tutoriales sobre creación de páginas web que, aunque se ven perfectamente en el navegador, y hacen uso del doctype correcto, con frecuencia no usan código HTML5. Eso es muy embarazoso, no cuesta mucho implementar algo de HTML5 semántico.

Empecemos con un documento a modo de ejemplo. Para empezar, huye de cualquier tipo de documento que tenga un aspecto similar a este:

Para usar HTML5 válido solo necesitamos algo tan sencillo como esto:

Destripemos ahora el resto de nuestra básica página web:

Esto es un ejemplo típico de cómo podríamos haber estructurado una página antes de la existencia de los elementos HTML5. Es perfectamente correcto, y puedes aplicarle estilo sin problemas.

Tenemos un div "home-main", anidado dentro de un div "wrapper". Dentro de "home-main" encontramos un par de divs para los artículos, y vamos a complicar aún más las cosas en unos segundos introduciendo algunos divs más… mira esto…

¿Lo ves? En cada div para los artículos hemos añadido una imágen, anidada en un div con el fin de vincularla a su pie de foto, además de otro div que actúa como pie de página en la parte inferior.

Añadamos ahora algo de presentación; algunos estilos CSS. En primer lugar, algunos estilos de restablecimiento, tomados en su totalidad de Eric Meyer:

Después añadimos nuestros propios estilos. Habrás observado algunas fuentes extrañas, procedentes de la API de Google Fonts e implementadas usando @font-face. El resto se explica por sí mismo, y el resultado demuestra que no hay grandes complicaciones.

En menos de 200 líneas de CSS (sin condensar), hemos aplicado perfectamente estilo a nuestra página. Nada extraordinario - titulares centrados y elementos de menú, una gran y bonita fuente (al 100% del ajuste predeterminado del navegador, que suele ser igual a 16px), e imágenes cuyos contenedores flotan a la derecha. Los estilos más complicados son lógicamente las dos sombras de los elementos de menú y los contenedores de las imágenes. En cualquier caso, en este tutorial no nos ocupamos de la aplicación de estilos, pero toma nota si te apetece.


Mejorar la Accesibilidad

Hay varias áreas en las que podrías haber mejorado la accesibilidad de tu código. Para empezar, las etiquetas <img> no cuentan con un atributo alt. Se podría navegar perfectamente a través del sitio en circunstancias normales aún con este problema, pero cualquiera que tenga las imágenes deshabilitadas no será consciente de su existencia. Los lectores de pantalla, en el mejor de los casos, interpretarán que existe una imagen, pero no le podrán dar más información sobre ella a los usuarios.

Usa el texto alternativo como una oportunidad para describir la imagen. Esto beneficiará a los usuarios, a los motores de búsqueda, y en consecuencia a tí.

El documento carece también severamente de significado semántico, los usuarios que naveguen tu página con un lector de pantalla no podrán determinar ningún valor jerárquico en el texto. Un div con la clase "footer" no indica nada a nadie sobre cuál es su tipo de contenido (excepto a tí), solo sirve para que tú puedas seleccionarlo y aplicarle estilos con CSS.

En términos de mantenimiento, también es difícil distinguir todos los elementos <div> presentes; al ser tantos, es necesario comentar los elementos de cierre. ¡Intentar mantener un orden en las secciones de este código resulta confuso!

Cambiemos pues algunos de los divs superfluos por otros elementos más semánticos:

Adios…

…hola

Adios…

…hola

Aquí tienes el código HTML completo, pulido con gloriosa semántica.

Entonces, ¿qué mejoras hemos hecho? Bueno, además de añadir atributos alt a nuestras imágenes, hemos usado los siguientes siete elementos:

  • <header>: Hemos usado esto en la parte superior de nuestro documento, en el lugar que ocupa nuestra cabecera principal y nuestra navegación. Podríamos haber usado también esta etiqueta como encabezado para subsecciones en la estructura (por ejemplo, los artículos).
  • <nav>: Esta etiqueta sirve para alojar cualquier cosa que actúe como navegación en una página web. Nuestra navegación principal es el ejemplo perfecto, pero las etiquetas nav también pueden contener paginaciones, por ejemplo.
  • <section>: Nosotros sólo tenemos una sección, pero esta es una estupenda etiqueta para agrupar contenido relacionado entre sí.
  • <article>: Un artículo puede ser descrito como un fragmento de información que puede considerarse o funcionar independientemente del contenido que le rodea, sin por ello perder su significado. En nuestro caso, tenemos dos artículos, cada uno de ellos consistente en un titular, y una imagen relevante.
  • <figure>: La etiqueta figure nos permite contener nuestras imágenes, y después asociar meta información como…
  • <figcaption>: Nuestra leyenda o pie de foto, ahora se ha colocado de tal manera que es asociada con la imagen adyacente.
  • <footer>: Tenemos un pie de página al final de nuestra página (hmmmm) pero, al igual que sucede con las etiquetas de encabezado, éstas se pueden utilizar también en las subsecciones, como hemos demostrado dentro de nuestros artículos.

Intenta usar elementos como estos siempre que puedas. Usa etiquetas div, si quieres, pero sólo si no encuentras un elemento semántico más apropiado para sustituirlas. En cuanto al estilo, aquí realmente no fallarás, y por el momento no cometerás ningún crimen si te equivocas al usar un elemento en el lugar equivocado. Tienes que empezar por algún sitio, así que no temas usar artículos y secciones incorrectamente.

Con un poco de edición de CSS, el resultado en el navegador no diferirá.


¿Cómo lo Verá un Lector de Pantalla?

Aquí tienes nuestro diseño, tal y como se vé a través de los ojos de la extensión de lectura de pantalla de Google Chrome, y VoiceOver de OSX.

Cuando dejamos que VoiceOver procese toda una página web (Control-Opción-A) se desplazará a través del DOM de forma secuencial, dictando cualquier fragmento de contenido con el que se tope. Las últimas versiones te permiten especificar puntos en tus páginas web favoritas a los que podrás saltar, pero si el cursor se encuentra con un enlace, una lista, un párrafo o una imagen, lo leerá lo mejor que pueda.

¡Nuestros esfuerzos han pasado desapercibidos!

Habrás observado que, además de la atractiva y extraña voz, VoiceOver no menciona nuestra navegación, la cual hemos colocado dentro de una etiqueta <nav>, y ha ignorado completamente la presencia de los artículos. Esta es la situación por el momento; HTML5 todavía no está bien soportado por todos los lectores de pantalla, nuestros esfuerzos han pasado desapercibidos. Casi de la misma manera en que los estándares de código y de estilo están siendo lentamente implementados por los fabricantes de navegadores, también los están implementando los desarrolladores de lectores de pantalla.

Para mantenerte actualizado respecto al estado de la accesibilidad de HTML5 y el desarrollo de los lectores de pantalla, sigue la pista a Bruce Lawson. A menudo promueve activamente el tema, escribe artículo en su blog y hablar de ello. Revisa también www.accessibleculture.org para realizar pruebas de forma regular con lectores de pantalla.


Ayuda en Forma de WIA-ARIA

¿WIA-ARIA-QUÉ? ARIA (Aplicaciones para el Acceso a un Internet Rico) de WIA (Iniciativa por la Accesibilidad Web) es una especificación que ayuda a que las tecnologías de asistencia interpreten el código HTML. Emplea atributos para describir los elementos de distintas maneras:

  • Rol: Especifica el propósito de un elemento, el papel que juegan.
  • Estado: El estado actual de un elemento, piensa en una casilla de verificación marcada.
  • Propiedad: Cualquiera de las miles de propiedades existentes (como por ejemplo la que define la posición horizontal de un slider).

En particular, en lo que respecta a los estados y las propiedades, puedes imaginar que, de no existir la especificación ARIA, serían difíciles de interpretar por las tecnologías de asistencia. Por suerte podemos añadir fácilmente atributos ARIA (dentro de unos límites) en nuestro código, y algo crucial, son validados como parte de la especificación de HTML5.

El propósito de WAI-ARIA es el de servir como tecnología puente. Aclara aspectos semánticos a las tecnologías asistivas cuando los autores crean nuevos tipos de objetos, a través de estilos y scripts, que no están soportados directamente por el lenguaje de la página. www.w3.org

Aquí tienes un ejemplo de cómo podríamos mejorar aún más nuestro código - mira este ejemplo:

…para mejorarlo añadimos esto:

De nuevo, esto es HTML5 válido.

Hemos añadido un atributo de rol navigation a nuestro elemento nav, que aunque puede parecer algo una redundancia, de momento ayuda. (Algunos) lectores de pantalla no reconocerán adecuadamente nuestra navegación. Más adelante, cuando la especificación HTML5 haya sido debidamente adoptada por los dispositivos de todo tipo, el elemento nav llevará implícito un atributo ARIA navigation (lo mismo ocurrirá con otros elementos), haciéndolo innecesario.

También podemos añadir un rol a nuestra cabecera:

Y por último añadir algún merecido reconocimiento a nuestro artículo:

Para más detalles sobre los roles disponibles y sobre cómo usarlos, consulta la comprensiva introducción a los roles ARIA de Virginia DeBolt.

Por tanto, finalmente hemos actualizado nuestro código para mejorar la accesibilidad. Echa un vistazo al artículo final, aunque no notarás ninguna diferencia real si no lo compruebas con un lector de pantalla adecuado. Lo mejor que puedes hacer de momento es testearlo usando JAWS, o NVDA ya que son lo que obtienen mejor valoración en cuanto a su gestión de la semántica de HTML5 y los atributos de ARIA.


Conclusión

Espero que este artículo te haya ayudado a tener una mejor perspectiva sobre el papel que puedes jugar en la creación de una mejor accesibilidad en internet. Practica el diseño web basado en estándares, presta atención a las tecnologías en desarrollo, y aunque tus esfuerzos todavía no puedan ser totalmente útiles, al menos estarás preparando tu trabajo para el futuro. Gracias por leerme, ¡o escucharme!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.