Perceptible en el nivel AA

Dentro de la accesibilidad de sitios web,  que un sitio web sea Perceptible en el nivel AA, significa que toda información y componentes de interfaz no pueden pasar desapercibidos por los sentidos. Para esto, es necesario tener en cuenta las siguientes cuatro pautas de accesibilidad: alternativas textuales, medios tempo-dependientes, adaptable, distinguible.

PAUTA 1: ALTERNATIVAS TEXTUALES

Objetivo: Proporcionar al usuario contenido equivalente y accesible, en caso de que no se pueda mostrar otro tipo de contenido no textual.

Alcance: Personas con dificultades sensoriales, o que no cuenten con la tecnología apropiada.

Esta pauta hace referencia a la utilización de métodos alternativos para mostrar información no textual. Los elementos HTML que no muestran contenido textual como imágenes, applets, videos, audio, entre otros, entran dentro de esta categoría. a continuación veremos los métodos alternativos que podemos utilizar para que la información llegue al usuario sin importar las barreras sensoriales o la tecnología utilizada.

Imágenes

El elemento img es el elemento más utilizado para mostrar contenido no textual en la actualidad. Si la imagen que se quiere mostrar no pudo ser cargada se puede utilizar el atributo alt para especificar un texto alternativo que haga descripción al contenido de la imagen. Lo que se escriba en el atributo alt debe ser equivalente al contenido de la imagen textualmente.

<img src="logo_wikipedia.png" alt="Wikipedia" />

En las versiones anteriores a HTML5 también se podía utilizar el atributo longdesc para brindar una descripción más completa de la imagen. Sin embargo, este atributo hoy en día está en desuso.

Objetos Flash y Applets

En caso de que el navegador de el usuario no soporte el uso de estas etiquetas, o el elemento no haya podido cargarse, puede colocarse un texto alternativo dentro de las etiquetas para informar al usuario el contenido temático del elemento.

Dado que el elemento applet ya está en desuso, se puede utilizar el elemento object para cargar contenidos desarrollados en Java. La forma correcta de hacerlo especificando su contenido alternativo textual es la siguiente:

<object type="application/x-java-applet">
   <param name="code" value="ClaseJava">
   <p>Contenido alternativo</p>
</object>

La carga de elementos Flash, se realiza de la siguiente forma:

<object type="application/x-shockwave-flash" data="swf/video_flash.swf" height="200" width="300">
Contenido alternativo
</object>

O también se puede realizar mediante el elemento embed.

<embed src="catgame.swf">
Contenido alternativo
</embed>

Controles de formularios

Al maquetar formularios, suele utilizarse el elemento label para etiquetar cada control del formulario. Podemos hacer esto básicamente de dos formas, la primera es colocar el control de formulario dentro del elemento label y la segundo es relacionar el control del formulario mediante el atributo for.

Ejemplo 1: Control del formulario dentro del label.

<label>Primer nombre: <input type="text" name="primernombre"></label>

Ejemplo 2: Relación mediante el atributo for.

<label for="primernombre">Primer nombre:</label> <input type="text" id="primernombre" name="primernombre">

Deben utilizarse el elemento label para los controles de formulario textarea, select e input del tipo text, checkbox, radio, file y password.

No se debe usar para los siguientes elementos:

- button: Su contenido funciona como etiqueta.
- input de tipo image: El atributo alt funciona como etiqueta.
- input de tipo submit y reset: El atributo value funciona como etiqueta.

CAPTCHA

Debe proporcionar alternativa de reproducción de audio y una opción textual que indique a la persona cómo utilizar el mismo.

Hojas de estilos CSS

Las imágenes que no aportan información al usuario tales como fondos, decoraciones, entre otras, deben ir especificadas en las hojas de estilos y no en el código HTML.

PAUTA 2: MEDIOS TEMPO-DEPENDIENTES

Objetivo: Proporcionar formatos alternativos al contenido pregrabado (audio, video).

Alcance: Usuarios con dificultad para percibir la información visual o auditiva.

Son todos aquellos medios que proporcionan información en función del tiempo. Un video, audio, o una animación son ejemplos de medios tempodependientes puesto que proporcionan fragmentos de información en cada instante de tiempo.

Se recomienda que este tipo de contenido tenga descripciones textuales para que el usuario no pierda la idea de que se trataba si no se pudo renderizar el contenido. Esto además, mejora el posicionamiento web debido a que los motores de búsqueda no indexan audio o video. Es conveniente seguir las siguientes recomendaciones.

- Realizar subtítulos para grabaciones de audio
- Realizar audiodescripción para videos
- Implementar interpretación en lengua de señas

PAUTA 3: ADAPTABLE

Objetivo: Presentar la información de diferentes formas sin perder información o estructura. 

Alcance: personas con limitaciones sensoriales.

Esta pauta hace referencia a la presentación de información en distintos dispositivos y con distintos software de renderizado, plugins u otros medios que pueden en los que se puede presentar la información de distintas formas. Por ejemplo, presentar la información en forma de tablas para representar datos atómicos, visualizar la página desde un dispositivo diferente (table, mobile), utilizar utilizar software desactualizado (web browsers), entre otros.

Encabezados

La utilización de encabezados da una jerarquía al documento web. Mediante los encabezados especificamos que títulos son más jerárquicos que otros, además que da orden y facilita la lectura a dispositivos lectores de pantalla.

Tablas

En primera instancia, recordar que las tablas existen para mostrar información tabular y no para maquetar la estructura o layout de un sitio web. Una tabla es una tabla, partiendo de este principio, cada tabla deberá tener un resumen y un título, proporcionados respectivamente por el atributo summary y el elemento caption. Además de esto, cada celda debe estar asociada con su columna correspondiente y esto se realiza a través del atributo headers, el cual debe ser el mismo que el id de la celda de título.

A continuación se presenta un ejemplo de una tabla accesible.

<table summary="En la siguiente tabla se presenta una lista de personajes que han marcado hito en la evolución de la informática"> 
 <caption>Personajes históricos en la informática</caption>
 <tr>
  <th id="nombre">Nombre</th>
  <th id="apellidos">Apellidos</th>
 </tr>
 <tr>
  <td headers="nombre">Steave</td>
  <td headers="apellidos">Jobs</td>
 </tr>
 <tr>
  <td headers="nombre">Bill</td>
  <td headers="apellidos">Gates</td>
 </tr>
</table>

Cabe hacer énfasis, en que la tabla debe tener el título definido mediante el elemento caption y no mediante otras etiquetas.

Formularios

Para el desarrollo de formularios se debe terner en cuenta lo siguiente:

- Utilizar labels para etiquetar los controles del formulario

- Agrupar controles del formulario mediante los elementos fieldset y legend

- Agrupar elementos de menú con optgroup en la medida en que sea necesario

- Utilizar  los atributos accesskey y tabindex

Un método para verificar que una página es adaptable consta en desactivar las hojas de estilos y cargar la página sin ellas. El usuario deberá poder navegar por la página sin ningún problema.

PAUTA 4: DISTINGUIBLE

Objetivo: Facilitar la visualización y escucha de todo tipo de contenido.

Alcance: Personas con limitaciones de visión o problemas de percepción del color

Esta pauta hace referencia a la correcta utilización del contraste, la teoría del color y la no contaminación auditiva. Debe haber una correcta separación entre el primer plano de una página web y el fondo, así como también el color de todo tipo de contenido textual. En cuánto a los archivos de audio, deben en lo posible claros, sin ruidos externos que dificulten la escucha del mismo. Si un archivo de audio suena por más de tres segundos debe existir un mecanismo para pausar, detener o controlar el volumen del mismo. Esto con el fin de no interferir con el sintetizador de voz por parte del lector de pantalla.

Es necesario tener en cuenta las siguientes recomendaciones:

- Uso adecuado del color semántico (color que transmite información).

- Relación adecuada de contraste y brillo.

- Tamaño del texto configurable.

- Formato del texto configurable.

La presentación de texto o imágenes de texto, debe tener una relación de contraste, de al menos, 4:5:1, excepto en los siguientes casos:

- Textos grandes: Estos debe tener una relación de contraste de, al menos, 3:1.

- Incidental: Textos o imágenes de texto que son usados como simple decoración, o que hacen parte interactiva de la interfaz de usuario, no tienen requisitos de contraste:

- Logotipos: El texto que forma parte de un logo no tiene requisitos mínimos de contraste.

Finalmente, la relación de brillo entre el primer plano (texto) y el fondo debe ser superior a 125 y la relación de contraste superior a 500. Debe evitarse a toda costa la utilización de imágenes como texto.

Referencias

- W3C. (2015). 4.7 Embedded content -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-img-element
- W3C. (2015). 11 Obsolete features -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/obsolete.html#the-applet-element
- W3C. (2015). 4.7 Embedded content -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-embed-element
- W3C. (2015). 4.7 Embedded content -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-object-element
- W3C. (2015). 4.10 Forms -- HTML5. Consultado el 31 de marzo de 2015, en http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-label-element

- Accesibilidad a páginas web (NTC 5854). (2011, 15 de julio). Instituto Colombiano de Normas Técnicas y Certificación (ICONTEC), 2011, 15 de julio.

- Ministerio de Tecnologías de la Información y las Comunicaciones. (2011). Manual 3.0 para la Implementación de la Estrategia de Gobierno en Línea En las Entidades del Orden Nacional de la República de Colombia. Bogotá, Colombia: Ministerio de Tecnologías de la Información y las Comunicaciones.

- Sidar. (2009). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/
- Visión Australia. (2012). Color Contrast Analyser 2.2 para Páginas Web. Consultado el 10 de abril de 2014, en http://www.visionaustralia.org/digitalaccess-cca
- W3C. (2008). Web Content Accessibility Guidelines (WCAG) 2.0. Consultado el 10 de abril de 2014, en http://www.w3.org/TR/WCAG20/
- W3C. (2010). Audiodescripción o Medio Alternativo (grabado). Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprenderwcag20/
media-equiv-audio-desc.html
- W3C. (2010). Audiodescripción o Medio Alternativo (grabado). Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprenderwcag20/media-equiv-audio-desc.html
- W3C. (2010). Información y relaciones. Consultado el 10 de abril de 2014, en http://www.sidar.org/traducciones/wcag20/es/comprender-wcag20/contentstructure-separation-programmatic.html