Accesibilidad en la web

La accesibilidad consiste en hacer que los sitios web sean accesibles para el mayor número de personas posible.Tradicionalmente, se considera que esto se aplica a las personas con discapacidad, pero esta práctica también beneficia a otros grupos, como quienes usan dispositivos móviles o tienen conexiones de red lentas.

A continuación, se explican los principales tipos de discapacidad a considerar:

• Discapacidad visual.
• Discapacidad motriz.
• Sordera.
• Dificultad auditiva.
• Deterioro cognitivo.

Las pautas de Accesibilidad para el Contenido Web (WCAG) son un conjunto de recomendaciones que se encuentran desarrolladas por la organización internacional World Wide Web Consortium (W3C) con el objetivo de asegurar que los contenidos digitales sean accesibles para todos los usuarios, independientemente de sus capacidades y habilidades. Estas pautas establecen los principios, estándares y criterios necesarios para la mejora de la accesibilidad web y su actualización de forma periódica para su adaptación a los avances tecnológicos actuales.

Las WCAG se encuentran estructuradas en 13 pautas, las cuales están organizadas en cuatro principios fundamentales: perceptible, operable, comprensible y robusto.

• Perceptibilidad: El principio de perceptibilidad hace referencia a que “la información y los componentes de la interfaz de usuario deben ser mostrados a los usuarios en formas que ellos puedan entender”.
• Operabiidad: Consiste en que los componentes que conforman tanto a la interfaz de usuario como a la navegación sean operativos, es decir, que los usuarios deben poder operar la interfaz sin problemas.
• Comprensibilidad: Establece que los usuarios deben de ser capaces de comprender la información, así como el funcionamiento de la interfaz, facilitando para ello el uso del lenguaje sencillo y ayudas para la entrada de datos.
• Robustez: Capacidad que posee el contenido digital para ser interpretado por una amplia variedad de agentes de usuario, además de la habilidad de mantenerse funcional ante futuras actualizaciones o cambios.

Cada una de estas pautas cuenta con criterios de éxito que se clasifican en tres niveles de conformidad: A (el nivel más bajo), AA y AAA (el nivel más alto).

Si bien estas pautas se definen como un conjunto de directrices, cada país cuenta con leyes que rijen la accesibilidad web, o al menos la accesibilidad de los servicios disponibles para el público (como sitios web, televisión, espacios físicos, etc.), por lo que es recomendable informarse sobre las leyes vigentes para su correcta aplicación.

Alternativas de texto

Si bien el contenido textual es intrínsecamente accesible, no ocurre lo mismo con el contenido multimedia: las personas con discapacidad visual no pueden ver imágenes ni vídeos, y las personas con discapacidad auditiva no pueden oír el contenido de audio.

Tenemos un ejemplo simple sobre una imagen accesible

          <img 
          src="dinosaur.png" 
          alt="A red Tyrannosaurus Rex" 
          title="The Mozilla red dinosaur
          />
        

Figuras y títulos de figuras

HTML incluye dos elementos "figure" y "figcaption", los cuales asocian una figura de algún tipo (puede ser cualquier cosa, no necesariamente una imagen) con un título de figura.

          <figure>
            <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus"/>
            <figcaption id="dinodescr"> A red Tyrannosaurus Rex with small arms. <figcaption/>
          <figure/>
        

Atributos alt vacíos

En ocasiones, puede incluirse una imagen en el diseño de una página, pero su propósito principal es la decoración visual. Observarás en el ejemplo de código que el "alt" atributo de la imagen está vacío; esto sirve para que los lectores de pantalla la reconozcan, pero no intenten describirla

          <h2> Tyrannosaurus Rex: the king of the dinosaurs <h2/>
          <img src="article-icon.png" alt=""/>
        

Tablas de datos accesibles

Una tabla de datos básica se puede escribir con un marcado muy simple, por ejemplo:

         <table>
            <caption>List of dinosaurs/<caption>
            <tr>
               <td>Name</td>
               <td>Period</td>
               <td>Diet</td>
            </tr>
            <tr>
               <td>Tyrannosaurus rex</td>
               <td>Late Cretaceous</td>
               <td>Carnivore</td>
            </tr>
            <tr>
               <td>Triceratops</td>
               <td>Late Cretaceous</td>
               <td>Herbivore</td>
            </tr>
         </table>
            

Enlaces

De manera predeterminada, los enlaces son visualmente diferentes del resto del texto, tanto en color como en decoración del texto: : son azules y subrayados de manera predeterminada, morados y subrayados si se visitan, y con un anillo de enfoque cuando reciben el foco del teclado.

El color no debe utilizarse como único método para distinguir los enlaces del contenido no enlazante. El color del texto del enlace, como el de todo texto, debe ser diferente del color de fondo (un contraste de 4,5:1).

Enlaces externos y enlaces a recursos que no sean HTML

Enlace que abre una nueva pestaña o ventana:

          <a target="_blank" href="https://www.wikipedia.org/">Wikipedia (opens in a new window)</a>
        

WAI-ARIA (Iniciativa de Accesibilidad Web - Aplicaciones de Internet Enriquecidas Accesibles) es una especificación del W3C que define un conjunto de atributos HTML adicionales que pueden aplicarse a los elementos para proporcionar semántica adicional al HTML semántico o mejorar la accesibilidad donde sea deficiente.

Mediante ARIA es posible definir controles complejos como barras de progreso, alertas, listas ordenadas, árboles de contenido o validaciones en formularios, indicando la obligatoriedad de un campo o la presencia de errores

La especificación define tres características principales:

• Roles.
• Propiedade.
• Estados.