Biblioteca Complutense

  1. Portada
  2. Imágenes
  3. Accesibilidad

Accesibilidad

Pautas de Accesibilidad al Contenido en la Web (WCAG) 2.1

WCAG 2.1 (W3C)

Web Content Accessibility Guidelines (WCAG) 2.1. W3C Recommendation 05 June 2018

La norma EN 301549 incluye las Pautas de Accesibiblidad WCAG 2.1 que son de aplicación en Europa a través de la Directiva 2016/2012 sobre la Accesibiblidad de los sitios Web y aplicaciones móviles del sector público. Las Pautas WCAG 2.1 son la última versión de las pautas de accesibilidad del contenido en la Web del World Wide Web Consortium (W3C). 

WCAG 2.0 se publicó el 11 de diciembre del 2008. WCAG 2.1 se publicó el 5 de junio del 2018. Todos los requisitos (criterios de conformidad) de la versión 2.0 están incluidos en la versión 2.1. Los criterios de conformidad 2.0 son exactamente iguales (literalmente) que los criterios 2.1. Hay criterios de conformidad adicionales en 2.1 que no existen en 2.0.

El Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público establece que la información disponible en las páginas de Internet de las administraciones públicas españolas debe ser accesible a las personas mayores y personas con discapacidad, con un nivel mínimo de accesibilidad que cumpla los requisitos de nivel A y AA de las Pautas de Accesibilidad.

La accesibilidad debe entenderse como un conjunto de principios y técnicas que se deben respetar a la hora de diseñar, construir, mantener y actualizar los sitios web y las aplicaciones para dispositivos móviles.


WCAG 2.1

CUATRO PRINCIPIOS

Son los fundamentos de la accesibilidad web.

  1. PERCEPTIBLE: La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos. Consta de 4 pautas u objetivos básicos que se deben cumplir. 
  2. OPERABLE: Los componentes de la interfaz de usuario y la navegación deben ser operables. Consta de 5 pautas u objetivos básicos que se deben cumplir.
  3. COMPRENSIBLE: La información y el manejo de la interfaz de usuario deben ser comprensibles. Consta de 3 pautas u objetivos básicos que se deben cumplir.
  4. ROBUSTO: El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas. Consta de 1 pauta u objetivo básico que se deben cumplir.

TRECE PAUTAS

Proporcionan los objetivos básicos que los editores (y desarrolladores web) deben lograr con el fin de crear un contenido más accesible. En lo relativo a las imágenes debemos observar con especial atención las siguientes pautas:

  • Pauta 1.1 Alternativas textuales: proporciona alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple.
  • Pauta 1.4 Distinguible: facilita a los usuarios ver y escuchar el contenido, incluso separar el primer plano del fondo (uso del color, contraste mínimo, espaciado de texto...).

CRITERIOS DE ÉXITO

Cada una de las 13 pautas recoge un conjunto de criterios de éxito que explican cómo aplicar cada pauta. Cada uno de estos criterios de éxito está asociado a un nivel de conformidad que define el nivel de exigencia del criterio (Nivel A, AA y AAA) y a una serie de técnicas que podemos usar para cumplir los criterios:

  • Criterio de éxito 1.1.1. Contenido sin texto (Nivel A). Todo el contenido que no es texto que se presenta al usuario tiene una alternativa de texto que sirve para un propósito equivalente, excepto en las situaciones que se enumeran a continuación: imágenes decorativas, medios basados en el tiempo (como vídeos, que necesitan requisitos adicionales), etc.
  • Criterio de éxito 1.4.1. Uso del color (nivel A) El color no se utiliza como el único medio visual de transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.
  • Criterio de éxito 1.4.3. Contraste Mínimo (Nivel AA). La presentación visual de texto e imágenes de texto tiene una relación de contraste de al menos 4.5: 1, excepto:
    • Texto grande: El texto a gran escala y las imágenes de texto a gran escala tienen una relación de contraste de al menos 3: 1.
    • Las imágenes decorativas y los logotipos no tienen requisitos de contraste.
  • Criterio de éxito 1.4.5. Imágenes de texto (Nivel AA). Si un editor puede usar texto en lugar de imágenes de texto para lograr el mismo efecto, debe presentar la información como texto en lugar de usar una imagen, excepto cuando la imagen sea esencial para la información que se transmite: por ejemplo un logotipo que contiene texto (la presentación visual del texto es esencial para representar la identidad corporativa). El logotipo tiene una alternativa textual.

TIPOS DE IMÁGENES

IMÁGENES NO DECORATIVAS. Texto alternativo

Silueta de Panorama urbano (skyline)

Toda imagen incluida en una página Web debe proporcionar un texto alternativo que aporte la misma información o función que la imagen. Podemos usar diferentes técnicas para conseguirlo:

  1. Técnica HTML: añadir el texto alternativo en el atributo alt de los elementos IMG.T
  2. Técnica Widget Texto: añadir el texto alternativo en el campo "Descripción de la imagen".
  3. Técnica PDF: añadir el texto alternativo en "Establecer texto alternativo".
  4. Añadir el texto alternativo en el contexto y entorno de la propia imagen.

El texto alternativo cumple varias funciones:

  • Es leído por lectores de pantalla en lugar de las imágenes permitiendo que el contenido y función de la imagen sean accesibles a personas con dificultades visuales o cognitivas.
  • Los navegadores web lo muestran en lugar de la imagen si ésta no se ha cargado, o si el usuario tiene las imágenes deshabilitadas.
  • Proporciona un significado semántico y descriptivo a la imagen que puede ser usado posteriormente por motores de búsqueda para determinar el contenido de la imagen.

El texto alternativo debe ser preciso y equivalente, breve, no redundante, no usar frases como "imagen de...".

Cuando una imagen contiene sólo texto, el texto que muestra puede usarse normalmente como texto alternativo.

IMÁGENES DECORATIVAS

Si el contenido no textual es simple decoración, es decir, se utiliza únicamente para definir el formato visual, debemos implementarlo de manera que pueda ser ignorado por la tecnología de asistencia:

  1. Técnica HTML: atributo alt vacio.
  2. Técnica Widget Texto: campo "Descripción de la imagen" vacio.
  3. Técnica PDF: Marcar como "Figura decorativa".

Establecer texto alternativo. Adobe Acrobat
  Marcado como "Figura decorativa" en Adobe Acrobat