Accesibilidad web: Programas para subtitulado

Formatos de subtítulos

En la actualidad existen infinidad de formatos y programas de subtitulado, los más comunes son:

  1. SubRip,
  2. Substation Alpha
  3. Timed Text Markup Language.
  4. SMIL

 

Programa para subtitulado y formatos de subtítulos

Formato SubRip

Este formato de subtitulado, con extensión .srt, es uno de los formatos más básicos de entre todos los formatos de subtítulos, y está compuesto por cuatro partes:

  • Número indicando el orden en la secuencia de subtítulos.
  • El momento en el tiempo en el que el subtítulo debe aparecer enpantalla, y cuando debe desaparecer.
  • El texto del subtítulo.
  • Una línea en blanco indicando que comienza un nuevo fragmento del subtítulo.

El principal inconveniente de este formato es que no admite colores, sinembargo es uno de los formatos más extendidos para publicar subtítulos en internet.

Formato Substation Alpha

El formato Substation Alpha, con extensión .ssa, es más avanzado que SubRip y tiene un formato avanzado que se denomina Advanced SubStation Alpha, con extensión .ass. Permite colores, efectos y otros elementos.

Permite la utilización de fuentes por lo que el usuario necesitará tenerinstalada la fuente que se indica en el fichero del subtítulo. Por lo demás,este formato es un fichero de texto en el que se indican los parámetros necesarios para la visualización del subtítulo.

Formato Timed Text Markup Language

El formato Timed Text Markup Language, DFXP, es una recomendación del W3C, para subtitular contenido en páginas web. Este formato, basado en XML, permite presentar un subtítulo sincronizado con contenidos multimedia, puede incorporar estilos y colores.

Formato SMIL (Synchronized Multimedia Integration Language)

Este formato es un estándar del W3C, permite sincronizar audio, vídeo u otros contenidos multimedia y texto. SMIL es el acrónimo de Lenguaje de Integración Multimedia Sincronizada. Este formato está basado en XML, y describe las fuentes del contenido, la sincronización, la temporización, la posición de las fuentes, enlaces y animaciones.

Edición de subtítulos

Siempre que sea posible, los subtítulos deben ser literales. No obstante, para ayudar a mantener el sincronismo, cuando la velocidad de la persona oradora es muy alta, existen ciertas estrategias para economizar el vocabulario.

Algunas estrategias para economizar el vocabulario son:

  • Utilizar todas las siglas que permite la Real Academia Española, y los acrónimos más conocidos (OTAN, ONU…).
  • Evitar las muletillas, repeticiones o saludos innecesarios.
  • Utilizar las formas cortas o más coloquiales de entidades u organismos. (Ejemplo: sustituir «La Cámara de los diputados» por «El Congreso»).
  • Utilizar en la medida de lo posible pronombres.
  • Utilizar las formas cortas de los nombres de personalidades o de sus cargos. (Ejemplo: sustituir «Sus Majestades los Reyes de España Don Felipe y Doña Letizia» por «Los Reyes de España».)

Herramientas para edición de subtítulos

Existe un gran número de herramientas en Internet que permiten subtitular vídeos.

Amara

Amara es una herramienta web colaborativa de código abierto que permite subtitular cualquier vídeo que esté publicado en plataformas como Youtube o Vimeo. A su vez permite que los usuarios incluyan traducciones de los subtítulos, insertar los vídeos subtitulados en páginas web, y descargar los subtítulos en formato srt.

Esta herramienta depende de la Participatory Culture Foundation, organización sin ánimo de lucro.

Jubler
Jubler permite editar subtítulos en formato de texto. Con él podemos crear nuevos subtítulos o convertir, editar y transformar subtítulos ya existentes. A su vez permite visualizarlos en tiempo real, comprobar la ortografía, traducirlos y editar los formatos entre otras funcionalidades.

Aegisub
Aegisub permite editar subtítulos en diferentes formatos y la creación de macros para facilitar su edición. Permite gran cantidad de opciones para la personalización de los subtítulos: color, tipografía, formato de subtítulo, etc.

Subtitle Workshop
Subtitle Workshop permite crear, editar y transformar subtítulos en prácticamente todos los formatos existentes. Puede guardar más de 60 formatos de subtítulos a través de la biblioteca de API de subtítulos, así como guardar subtítulos en un formato de archivo personalizado definido por el usuario. Así mismo, viene equipada con algunas opciones interesantes como la comprobación de la ortografía y la previsualización de vídeos.

Dotsub
Esta aplicación web permite crear, traducir e incluir subtítulos en múltiples lenguas en vídeos disponibles en diferentes plataformas.

HandBrake

Es un conversor de vídeo multiformato que podemos disfrutar en Windows, Mac y Linux libre y gratuitamente.

Herramientas para conversión de formatos de subtítulos

Caption Format Converter

Convierte los subtítulos en diferentes tipos de formatos. Es una herramienta bastante interesante.

Accesibilidad web: Técnicas PDF para las WCAG 2.1

Introducción

En esta entrada voy a hablar de las técnicas PDF para las WCAG 2.1 y os doy una serie de consejos prácticos para cada una.

El título de cada una de las técnicas os llevará a su descripción en la documentación de las WCAG 2.1

Técnicas pdf para las WCAG 2.1

Técnicas PDF de las WCAG 2.1

PDF1: Aplicar las alternativas de textos a imágenes con ALT

Esta técnica nos sirve para proporcionar alternativas de texto para las imágenes a través de un atributo Alt. Aquí os dejo una entrada donde hablé sobre cómo aplicar texto alternativo a las imágenes y cómo diferenciar unas de otras.

PDF2: Crear marcadores

El objetivo de esta técnica es permitir que las personas usuarias localicen contenido utilizando marcadores. Esto resulta beneficioso para las personas con diversidad funcional intelectual, por la facilidad que presenta el esquema jerárquico del documento. Esta técnica está asociada al criterio 2.4.5: Múltiples vías.

PDF3: Asegurar el tabulado correcto y el orden de lectura en documentos

Esta técnica sirve para que las personas usuarias puedan navegar a través del contenido en un orden lógico que sea consistente con el significado del contenido. Es imprescindible revisar el orden de lectura del documento mediante un lector de pantalla. Técnicas asociadas a los criterios 1.3.2: Secuencia significativa, 2.1.1: Teclado , 2.4.3: Orden del foco.

PDF4: Ocultar imágenes decorativas con la etiqueta “Artifact”

Esta técnica está relacionada con la técnica PDF1, en referencia a las imágenes decorativas. Esta asociada al criterio 1.1.1: Contenido sin texto

PDF5: Indicar los controles de formulario requeridos

Con esta técnica lo que pretendemos es notificar al usuario cuando un campo que debe completarse no se haya completado en un formulario PDF.

Para ello, hay que tener en cuenta la accesibilidad de los formularios en los sitios web.

Criterios: 3.3.1: Identificación de error, 3.3.2: Etiquetas o instrucciones,
3.3.3: Sugerencia de error

PDF6: Usar elementos de tabla para el marcado

Esta técnica nos da los pasos para marcar el etiquetado de las tablas. También es importante tener en cuenta la accesibilidad en las tablas. El criterio asociado es el 1.3.1: Información y relaciones.

PDF7: Aplicar Optical Character Recognition (OCR) en un documento PDF escaneado para proporcionar texto.

Un documento que tiene imágenes escaneadas de texto es intrínsecamente inaccesible. En este caso, las imágenes escaneadas de texto se pueden convertir a PDF mediante el reconocimiento óptico de caracteres (OCR). Criterios: 1.4.5: Imágenes de texto y 1.4.9: Imágenes de texto (sin excepción)

PDF8: Proporcionar definiciones de abreviaturas a través de una entrada para un elemento de estructura

El objetivo de esta técnica es proporcionar una expansión o definición de una abreviatura para la primera aparición de la abreviatura. Criterio 3.1.4: Abreviaturas.

PDF 9: Proveer encabezados al marcar el contenido con etiquetas de encabezado

Los encabezados se marcan utilizando los elementos de encabezado y tiene ser lógico y coherente. Es importante validar el documento siempre con un lector de pantalla. Criterios asociados: 1.3.1: Informaciones y relaciones y 2.4.1: Bloques de desvío

PDF10: Suministrar etiquetas para controles de formulario interactivos

Los campos de formulario tienen que tener un nombre significativo que esté relacionado con él, incluida la ayuda contextual. Criterios asociados: 1.3.1: Información y relaciones, 3.3.2: Etiquetas o instrucciones y 4.1.2: Nombre, Rol, Valor

PDF11: Proporcionar enlaces y vincular el texto mediante la anotación “Link”

La forma más sencilla de proporcionar enlaces que cumplan con los criterios de éxito de WCAG es crearlos al crear el documento, antes de la conversión a PDF. Es importante que el texto del enlace y el contexto en el que se incluye sea significativo, y en caso contrario añadir un texto alternativo. Criterios asociados: 1.3.1: Información y relaciones, 2.1.1: Teclado, 2.4.4: Propósito de los enlaces (en contexto) y 2.4.9: Propósito de los enlaces (sólo enlaces)

PDF12: Facilitar información de nombre, función y valor para los formularios

Como ya he dicho, todo campo de formulario debe tener un nombre y también tenemos que poner su valor y estado por defecto. Los criterios relacionados son: 1.3.1 y 4.1.2.

PDF13: Proveer texto de reemplazo usando la entrada “Alt” para enlaces

Volvemos a la técnica PDF11, donde se habla de los propósitos de los enlaces. Los criterios relacionados con esta técnica son: 2.4.4: Propósito de los enlaces (en contexto) y 2.4.9: Propósito de los enlaces (sólo enlaces).

PDF14: Proporcionar encabezados y pies de página en ejecución

Los encabezados y pies de página deben ser consistentes y deben incluir información relevante, así, como tener en cuenta la ubicación, ya que esto ayuda a las personas con diversidad funcional intelectual a orientarse
a lo largo de todo el documento. Los criterios relacionados son: 2.4.8: Ubicación y 3.2.3: Navegación consistente.

PDF15: Suministrar botones de envío con la acción de presentación en formularios

Al igual que ocurre en los sitios webs, también deberemos hacer lo mismo con los PDF. Criterio asociado a esta técnica, 3.2.2: En la entrada

PDF16: Configurar el idioma predeterminado mediante la entrada “Lang”

Con esta técnica, lo que conseguimos es especificar el idioma predeterminado de un documento. De esta manera, las personas con diversidad funcional pueden entender mejor el contenido. Es importante recordar que, también hay que marcar los cambios de idioma. Criterio asociado 3.1.1: Idioma de la página

PDF17: Describir la numeración de página coherente para documentos

Si vamos a añadir la paginación, por ejemplo en el pie, esta debe ser coherente con la paginación del propio documento. Criterios relacionados: 1.3.1 Información y relaciones, 2.4.8: Ubicación y  3.2.3: Navegación consistente.

PDF18: Especificar el título del documento mediante la entrada “Título”

Una de las cosas más importantes que siempre se recomienda es, como indica esta técnica: poner un título descriptivo al documento. Tiene mucho que ver con el criterio 2.4.2: Título de la página.

PDF19: Detallar el idioma para una frase con la entrada “Lang”

Volvemos a la técnica 16, donde ya se explicó. Si el texto en otro idioma está insertado dentro de un párrafo, será necesario convertirlo en una etiqueta independiente: <span></span>. Los criterios relacionados son: 3.1.1: Idioma de la página y 3.1.2: Idioma de las partes

PDF20: Utilizar el Editor de tablas de Adobe Acrobat Pro para tablas erróneas

En la técnica 6 explico todo lo que se refiere a las tablas. Criterio 1.3.1.

PDF21: Usar etiquetas de lista para documentos PDF

Esta técnica sirve para crear listas de elementos relacionados utilizando elementos de lista apropiados según su propósito, y que estén correctamente etiquetadas. Esto permite al lector de pantallas avisar de que hay listas. Criterio: 1.3.1: Información y relaciones

PDF22: Indicar la entrada de usuario que se encuentra fuera del formato requerido

Al igual que en un formulario web, en un formulario PDF se debe indicar los campos que son obligatorios y los formatos requeridos. Ya lo comenté en la técnica 5. Los criterios relacionados son: 3.3.1: Identificación de error y 3.3.3: Sugerencia de error

PDF23: Proporcionar controles de formularios interactivos en documentos PDF

Los formularios PDF deben ser accesibles también por teclado. Criterios relacionados: 2.1.1: Teclado.

WCAG-EM: Evaluación de Conformidad con la Accesibilidad Web

Introducción

WCAG-EM pretende proporcionar una metodología armonizada internacionalmente para la evaluación de todo tipo de sitios web (estáticos, dinámicos, responsive design, versiones móviles, etc.) de acuerdo con las WCAG 2.0. También es compatible con WCAG 2.1.

En el documento se especifican los pasos concretos, y ofrece orientación sobre las buenas prácticas para definir el alcance de la evaluación, explorar el sitio, seleccionar una muestra representativa cuando no es factible evaluar todo el sitio, auditar la muestra seleccionada y reportar los resultados de la evaluación mediante informes estructurados y uniformes.

wcag em_ Evaluación de conformidad con la accesibilidad web

La metodología se aplica siempre a un sitio web completo. También se permite aplicar a ámbitos claramente separables de un único sitio web, como podría ser la parte pública y la parte privada del mismo, o diferentes versiones del sitio (versión móvil, versión en determinado idioma, etc.)

Se especifica también el conocimiento que debería tener el evaluador y que se puede resumir en un profundo conocimiento de las WCAG 2.0, del diseño web accesible, de los distintos productos de apoyo y de cómo las personas con diferentes diversidades funcionales usan la Web. Esto implica comprender las tecnologías web, las barreras de accesibilidad o las técnicas, herramientas y métodos de evaluación para identificar dichas barreras.

Los pasos del procedimiento de evaluación son 5:

  1. Definir el alcance de la evaluación
  2. Explorar el sitio web
  3. Seleccionar una muestra representativa
  4. Auditar la muestra seleccionada
  5. Registrar los resultados de la evaluación.

 

Paso 1. Definir el alcance de la evaluación

  • 1a: definir el alcance del sitio, las páginas (y los estados de las mismas) a las que se va a aplicar la evaluación, sin contradecir las limitaciones que se han indicado en el ámbito de aplicación de la metodología.

Es necesario documentar aspectos particulares como servicios desarrollados externamente, diferentes versiones de la misma (móvil, versiones por idioma), partes del portal que forman parte del mismo aunque no estén integradas en él (por ejemplo la zona de ecommerce), etc. Esto puede requerir conocer las propiedades o el proceso de desarrollo de algunas partes del sitio, y tener que llevarse a cabo a la vez que el paso 2 (navegar por el sitio web).

El resultado debe ser una definición no ambigua que determine para cada página si está o no dentro del alcance de la evaluación. Se recomienda utilizar formalizaciones como expresiones regulares o listados de URIs para definir las páginas que están en el alcance.

  • 1b: definir cuál el nivel de adecuación (A, AA, AAA) que se va a evaluar. Habitualmente será el nivel AA, pero a menudo es útil ampliar el alcance para tener una imagen más completa de la accesibilidad del sitio.
  • Paso 1c: definir el soporte de la accesibilidad, es decir, un listado de los navegadores web, los productos de apoyo u otros agentes de usuario con los que las características de accesibilidad deben ser compatibles. Salvo en el caso de las Intranets, lo ideal es que sea lo más amplia posible. Ponen el siguiente ejemplo: la posibilidad de enseñar subtítulos en un reproductor de vídeo no estará soportado por todas las combinaciones posibles de navegadores y productos de apoyo, y en este sentido las WCAG 2.0 no definen para qué combinación concreta debe ser soportada, pues depende del contexto particular del sitio.
  • Paso 1d (opcional): definir los requisitos de evaluación adicionales acordados entre el evaluador y quien ha encargado la evaluación (páginas adicionales solicitadas, casos de uso especiales, si desean un informe muy detallado indicando la solución para cada problema detectado, la participación de personas con diversidad funcional, etc.)

Paso 2. Explorar el sitio web

El evaluador debe poder acceder a todas las páginas. Este paso permite comprender mejor el uso, propósito y funcionalidad del sitio; y además ayuda a identificar las páginas relevantes o con problemas que son candidatas a incluirse en la muestra a analizar.

Suele ser más eficaz si se hace participes a los desarrolladores y/o a los propietarios del sitio. La exploración inicial suele ser refinada en los pasos posteriores.

Se divide en los siguiente subpasos:

  • 2a: identificar las páginas (o estados de las páginas) relevantes Incluye la home, la página de login y otras páginas de entrada, el mapa del sitio, la página de contacto, de ayuda, de información legal y otras similares que normalmente están enlazadas desde todas las páginas (por lo general en la cabecera, el pie o el menú de navegación)
  • 2b: identificar las funcionalidades clave del sitio, el propósito de este paso no es identificar de forma exhaustiva todas las funcionalidades de un sitio web, sino determinar aquellas que son esenciales para el propósito y el objetivo del sitio. El resultado de este paso es una lista de funcionalidades que los usuarios pueden realizar en el sitio como “selección y compra de un producto”, “registrar una cuenta en el sitio”, “rellenar y enviar un formulario”, etc.
  • 2c: identificar los diferentes tipos de páginas y estados de página con diferentes estilos, layout, estructuras y funciones, que a menudo son generadas por diferentes plantillas y escritas por diferentes personas. También pueden ser páginas con diferentes estados, páginas que se ven o comportan diferente dependiendo del usuario y el contexto.

El contenido que se debe buscar para identificar diferentes tipos de páginas o diferentes estados de una página son:

 

  • Contenido web con diferentes estilos, layout, estructura, navegación, interacción y diseño visual;
  • Diferentes tipos de contenido, como formularios, tablas, listas, encabezados, multimedia y scripts;
  • Contenido con diferentes componentes funcionales, tales como selector de fechas, lightbox, slider, y otros;
  • Contenido que utilizan diversas tecnologías, tales como HTML, CSS, JavaScript, WAI-ARIA, PDF, etc.;
  • Contenido de diferentes áreas del sitio (home, departamentos, ecommerce, etc.);
  • Contenido que ha sido creado usando diferentes plantillas;
  • Contenido cuya autoría es de diferentes personas, departamentos o entidades;
  • Contenido en el que cambia la apariencia y comportamiento en función del usuario, el dispositivo, el navegador, el contexto o la configuración;
  • Contenido dinámico: mensajes de error, cuadros de diálogo, pop-ups u otro tipo de interacción

 

  • 2d: identificar las tecnologías de las que se depende, que pueden ser HTML, CSS, JavaScript, WAI-ARIA, SMIL, SVG, PDF, etc. Si es posible, a menudo es útil identificar también las bibliotecas y los componentes utilizados como Dojo o jQuery.
  • 2e: identificar otras páginas (o estados de páginas) relevantes para las personas con discapacidad o para la accesibilidad del sitio: páginas que explican características de accesibilidad; con información y ayuda sobre el uso del sitio; páginas donde se explica la configuración, preferencias, opciones o accesos directos o páginas con información de contacto, direcciones o instrucciones de soporte.

Paso 3. Seleccionar una muestra representativa

Lo ideal es que se evalúe el sitio completo, pero esto no suele ser posible, y se debe seleccionar una muestra de páginas que represente a todo el sitio, de manera que asegure que los resultados de la evaluación reflejan la accesibilidad de todo el sitio con suficiente fiabilidad.

El tamaño de la muestra dependerá del tamaño, complejidad o consistencia del sitio y de otros factores que se enumeran.

Los subpasos de los que se compone (a no ser que pueda hacerse la evaluación del sitio completo) son:

  • 3a: incluir una muestra estructurada, en concreto las páginas (y estados de páginas) que se identificaron en el paso 2. Las identificadas como relevantes (2a, 2e), las que además tienen funcionalidades esenciales (2b), diferentes tipos de páginas (2c) o que dependan de diferentes tecnologías (2d). La cuidadosa selección de las páginas puede reducir significativamete el tamaño de la muestra requerida manteniendo una representación adecuada de todo el sitio web.
  • 3b: incluir una muestra al azar, de páginas y estados de páginas que no forman ya parte de la muestra y que actúa como indicador de verificación de los resultados y aumenta la confianza en los mismos. Debe ser un 10%, debe seleccionarse dentro de todo el ámbito del sitio y sin seguir un patrón predecible. Han de documentarse cuáles son porque en el paso 4c se compararán con el resto de la muestra.
  • 3c: incluir en la muestra procesos completos. Es decir, todas las páginas de un proceso, no se puede seleccionar solo una página del proceso. Se describe con detalle cómo identificarlas y seleccionarlas.

Paso 4. Auditar la muestra seleccionada

Se debe verificar por cada página de la muestra (comparando la muestra estructurada y la muestra seleccionada al azar) si cumple con los cinco requisitos de conformidad de las WCAG 2.0, y si cumple con los criterios de conformidad del nivel de adecuación que se evalúa.

  • 4a: revisa todas las páginas iniciales. Comprueba que todas las páginas (o estados de página) de la muestra que no estén dentro o al final de un proceso se ajustan a los cinco requisitos de conformidad de las WCAG 2.0 de acuerdo al nivel de conformidad definido. Esto incluye todos los componentes sin activar ninguna función, introduciendo datos o de cualquier otra manera en la que se pueda interactuar con el contenido. Los componentes comunes como la cabecera o el pie no necesitan ser re-evaluados en cada página.Ten en cuenta las técnicas y errores comunes documentados en las WCAG 2.0 pero recuerda que no son normativos y puede haber más.Si no hay contenido relacionado con los criterios de éxito (por ejemplo, no hay vídeo), entonces los criterios son satisfechos. Opcionalmente se puede indicar específicamente los criterios de conformidad para los que no hay contenido relevante, por ejemplo, indicando “no presente”.El contenido de las páginas o estados de páginas pueden tener versiones alternativas, en ese caso se evalúan juntas (la página y la versión alternativa) como una unidad.Comprueba que todas las características son soportadas por los navegadores y productos de apoyo definidos en el paso 1c.
  • 4b: evalúa todos los procesos completos seleccionados en el paso 3c, comprobando la funcionalidad, introducción de datos, notificaciones y otro tipo de interacciones. No es necesario evaluar todo el contenido, solo el que cambia a lo largo del proceso.En particular incluye:
    • la interacción con formularios, cuadros de diálogo y otros componentes de la página.
    • la confirmación de entrada de datos, los mensajes de error y otros feedback resultantes de la interacción con el usuario.
    • comportamiento con diferentes ajustes, preferencias, dispositivos y parámetros de interacción.
  • 4c: compara las páginas de la muestra que seleccionaste de forma estructurada con las páginas de la muestra que seleccionaste aleatoriamente. Comprueba que en la muestra al azar no hay contenidos o resultados no representados en la muestra estructurada, en caso contrario es que la muestra estructurada no era suficientemente representativa y debes volver a los pasos anteriores.

Paso 5. Registrar los resultados de la evaluación

Los resultados se presentan al final del proceso, pero se registran durante la evaluación. No todos los datos registrados se tienen o pueden incluir obligatoriamente después en el informe, por ejemplo por motivos de confidencialidad.

Los subpasos propuestos son:

  • 5a: proporcionar documentación para cada paso. Documentar los resultados de los pasos 1, 2, 3 y 4 para justificar los resultados y garantizar su transparencia y su replicabilidad. Esta documentación no es necesario que sea pública, dependerá del nivel de confidencialidad acordado.Se debe documentar al menos:
    • Acerca de la evaluación: nombre del evaluador, nombre de la persona/empresa/organización que ha solicitado la evaluación y la fecha en la que se ha llevado a cabo la misma (fecha concreta o periodo de tiempo)
    • Alcance de la evaluación: alcance definido en el paso 1a, el nivel de adecuación a evaluar definido en el paso 1b, el soporte de accesibilidad definida en el paso 1c y los requisitos adicionales definidos en el paso 1d.
    • Exploración del sitio: tecnologías de las que se depende definidas en el paso 2d. Opcionalmente las páginas y funcionalidades identificadas en los pasos 2a, 2b, 2c, 2e.
    • Muestra representativa: las páginas seleccionadas de acuerdo a los distintos subpasos del paso 3.
    • Auditoría de la muestra: evaluación de los resultados según los subpasos del paso 4.

    Según la granularidad del informe, los resultados del paso 4 se pueden dar por cada página o por toda la muestra en su conjunto, indicando si se cumple o no en toda la muestra y poniendo al menos un ejemplo por cada requisito de conformidad que no se cumple. Pero en los requisitos adicionales se pudo acordar un informe más detallado con todos los fallos de cada página y recomendaciones para solucionarlos.

  • 5b (opcional): registrar los detalles específicos de la evaluación, guardar las páginas y estados auditados, una captura de pantalla y las rutas; describir los ajustes, datos introducidos o acciones para llegar a las páginas o a un estado de las mismas; credenciales de acceso para poder replicar los datos y flujo de trabajo; registrar las herramientas, navegadores, tecnologías de apoyo u otro software (nombre y versión); métodos, procedimientos y técnicas utilizados para la auditoría. Suele ser un registro interno pero es una buena práctica por ejemplo en caso de conflicto.
  • 5c (opcional): proporcionar una declaración que describa el nivel de conformidad de los resultados. Como se ha indicado, en la mayoría de las situaciones esta metodología no permite una declaración de conformidad de acuerdo a las WCAG 2.0 de todo el sitio completo. Se puede hacer una declaración pública de los resultados si se cumple la metodología y el propietario del sitio web se compromete a velar por la exactitud y validez de la declaración de conformidad de la evaluación.

    La declaración de conformidad según esta metodología debe incluir: la fecha de la declaración; el título, versión y URI de las pautas utilizadas; el nivel de conformidad satisfecho; una descripción de las páginas para las que se efectúa la declaración (según paso 1a); una lista de tecnologías web de las que se depende (identificadas en el paso 2d); y el soporte de la accesibilidad como se define en el paso 1c.

    La declaración puede ser parcial, en cuyo caso deben indicarse las áreas que no son conformes y la razón (contenido de terceros o falta de soporte para la accesibilidad)

  • 5d (opcional): proporcionar una puntuación, que puede ser útil para controlar el progreso a través del tiempo. Señala que actualmente no hay un indicador ampliamente reconocido, fiable, preciso y práctico. De hecho pueden ser engañosos porque no proporcionan suficiente contexto e información para comprender el estado de la accesibilidad real sitio.El documento del W3C Research Report on Web Accessibility Metrics proporciona diferentes enfoques y sus limitaciones. En cualquier caso, si se incluye una puntuación, el método de puntuación debe indicarse siempre claramente junto a la puntuación y debería documentarse para facilitar la transparencia y fiabilidad.
  • 5e (opcional): proporcionar un informe legible por máquinas (como EARL)

Herramienta de apoyo para la generación del informe

WCAG-EM Report Tool

El W3C tiene una herramienta, online y gratuita, WCAG-EM Report Tool que:

  • ayuda a aplicar la metodología del W3C/WAI WCAG-EM (Website Accessibility Conformance Evaluation Methodology) de evaluación de accesibilidad de un sitio web de acuerdo a las WCAG 2.0;
  • genera el informe de la evaluación de accesibilidad a partir de los datos introducidos.

Herramienta de informe wcag-em

Accesibilidad web: Materiales audiovisuales. UNE 153010:2012

Introducción

La accesibilidad aplicada a los contenidos audiovisuales, independientemente del formato, ha de ofrecer una alternativa auditiva o visual para el seguimiento del contenido a personas con diversidad funcional. Existen dos sistemas de accesibilidad audiovisual: el subtitulado, para personas sordas o con diversidad funcional auditiva y la audiodescripción para personas ciegas o con diversidad funcional visual.

Otras medidas de accesibilidad son la lengua de signos, empleada para eventos en directo, o la utilización de textos alternativos con la información visual y la transcripción del audio.

Accesibilidad de medios audiovisuales

Requisitos de accesibilidad audiovisual

Básicamente los requisitos a tener en cuenta para los materiales audiovisuales son:

  1. Transcripción en formato texto
  2. Subtitulado
  3. Audiodescripción
  4. Interpretación en lengua de signos

Documentos de sólo audio

Para mejorar la accesibilidad de los materiales que contienen audio se necesita realizar transcripciones en formato texto. En estos documentos deberemos incluir lo siguiente:

  • Identificación de las personas hablantes
  • Contenidos de los diálogos
  • Eventos sonoros: música, risas, aplausos, efectos especiales

Documentos de sólo vídeo

Para mejorar la accesibilidad de los materiales que contienen vídeos se puede hacer mediante dos combinaciones:

  • Transcripción en formato texto.
  • Alternativa en audio (audiodescripción).

En este caso lo más habitual es crear una descripción del contenido del vídeo a modo de transcripción en formato texto. Deberemos incluir la siguiente información:

  • Descripción de las acciones.
  • Descripción de las personas.
  • Descripción de expresiones corporales.
  • Descripción de escenarios y localizaciones.
  • Transcribir los textos que se muestren en pantalla, o leerlos en voz alta si se está realizando una alternativa en formato audio.

Documentos de vídeo sonoro

Estos documentos son los que requerirán una mayor accesibilidad, ya que contienen información visual y sonora.

En este tipo de documentos podemos distinguir:

  • Si se van a emitir en directo o en formato grabado, deberemos garantizar que el material se subtitule, siendo muy habitual añadir interpretación en lengua de signos.
  • Si el documento se va a distribuir en formato grabado deberemos tomar las siguientes medidas en función del nivel de accesibilidad que necesitemos garantizar:
    • Nivel A: subtitulado y transcripción en formato texto o audiodescripción.
    • Nivel AA: subtitulado, transcripción en formato texto y audiodescripción.

Transcripción de un vídeo sonoro

Para hacer una trascripción textual deberemos tener en cuenta tanto el contenido sonoro como el visual y describir los siguientes elementos:

Contenido sonoro:

  • Los mismos que se utilizan para la transcripción de audio.

Contenido visual

  • Descripción de las acciones.
  • Descripción de las personas
  • Descripción de expresiones corporales
  • Descripción de escenarios y localizaciones
  • Transcripción de los textos que se muestren en pantalla.

Subtitulado

La utilización de subtítulos está muy extendida y es la forma más habitual de mejorar la accesibilidad de un documento.

Se deberá seguir lo establecido en la Norma UNE 153010, Subtitulado para personas sordas y personas con discapacidad auditiva.

En el caso de que se vaya a usar junto con un intérprete de lengua de signos, deberemos garantizar que ambos sistemas no se solapan ni ocultan, siendo siempre recomendable que puedan activarse y desactivarse según las necesidades de la persona usuaria.

Audiodescripción

La audiodescripción es una narración, sincronizada con el contenido del vídeo, que aporta información sobre aquellos elementos que son perceptibles mediante la vista. Por tanto, están vedados a una persona con diversidad funcional visual.

En este caso, se pausa el vídeo el tiempo requerido para la narración de la audiodescripción ampliada. Está técnica puede resultar molesta para otras personas usuarias, así que, lo recomendable es publicar una versión del material sin audiodescripción y otra con audiodescripción.

Interpretación en lengua de signos

La interpretación la deberá realizar un intérprete cualificado y serán necesarios determinados requisitos técnicos para su inserción en el vídeo.

Esta medida de accesibilidad sólo se requiere en el nivel AAA, pero es frecuente recurrir a ella en mensajes institucionales o actos en directo.

Lo esencial es que el intérprete se visualice con suficiente calidad y claridad para que sea comprendido correctamente. La interpretación en lengua de signos deberá recoger la siguiente información y adecuarse a la audiencia a la que se dirija el contenido:

  • Los diálogos y contenido oral.
  • Los eventos sonoros relevantes: música, aplausos, efectos especiales, etc

Aspectos generales del subtitulado

Para ello, nos vamos a centrar en lo que establece la Norma UNE 135010 de subtitulado para personas sordas y personas con discapacidad auditiva.

Existen dos tipos de subtítulos, abiertos o cerrados:

  • Los subtítulos cerrados son aquellos que el usuario puede activar o desactivar en función de sus necesidades
  • Los subtítulos abiertos son aquellos que van incrustados en el vídeo y la persona usuaria no puede activarlos y desactivarlos. Siempre que sea posible se recomienda utilizar subtítulos cerrados para que la persona decida si quiere activarlos o no.

Presentación de subtítulo: Aspectos visuales

Los subtítulos de todo aquello que no sean efectos sonoros deben aparecer centrados en la parte inferior de la pantalla, excepto cuando oculten información relevante.

Posición de los efectos sonoros

Cuando un sonido se considere efecto sonoro su subtítulo debe ubicarse en la parte superior derecha, siempre que sea técnicamente posible, excepto en los subtítulos en directo.

Número de líneas de texto

Los subtítulos deben ocupar como máximo dos o excepcionalmente tres líneas de texto.

Líneas distintas por personajes

En los diálogos, se debería asignar líneas de texto distintas a cada personaje.

Presentación del subtítulos: Aspectos temporales.

Velocidad de exposición del texto del subtítulo

La velocidad de exposición del texto del subtítulo debe seguir el ritmo del original y facilitar una lectura cómoda.

Sincronismo

Excepto en el caso de subtitulado en directo, las entradas y salidas de los subtítulos deben coincidir, siempre que sea posible, con el movimiento labial, con los cambios de plano, con la locución y/o con la información sonora.

Retardo en el subtitulado en directo

En el subtitulado en directo se debería minimizar el retardo entre la emisión del contenido y del subtítulo correspondiente.

Subtitulado de música

Se debería subtitular la música si es importante para ayudar al espectador a comprender la trama, utilizando uno o más de los tres contenidos siguientes:

  • el tipo de música;
  • la sensación que transmite;
  • identificación de la pieza (título, autor…).

Criterios editoriales

División del texto

La división del texto en subtítulos y los subtítulos en líneas se debería hacer de acuerdo con los siguientes criterios:
  • aprovechar las pausas interpretativas y silencios;
  • aprovechar las pausas gramaticales o los signos de puntuación.
  • escribir en la línea inferior las conjunciones y los nexos
  • no separar en líneas los sintagmas nominales, verbales y preposicionales

Combinación de colores para caracteres y fondos

Existen ciertas combinaciones de colores que resultan más legibles, producen mayor contraste y menor fatiga visual, facilitando así la lectura. Estas combinaciones de colores que se establecen en la norma UNE 135010 son las siguientes en orden de preferencia:

  1. Carácter amarillo sobre fondo negro.
  2. Carácter verde sobre fondo negro.
  3. Carácter cian sobre fondo negro.
  4. Carácter magenta sobre fondo negro.
  5. Carácter blanco sobre fondo negro.
  6. Carácter rojo sobre fondo blanco.
  7. Carácter azul sobre fondo blanco.
  8. Carácter azul sobre fondo amarillo.

Accesibilidad web: Sensibilidad reducida al contraste

Sensibilidad reducida al contraste: Introducción

Como bien sabemos hay muchas personas que tienen problemas de visión, y la variedad que existe es enorme. Existen dificultades como la baja visión, el daltonismo, la retinosis pigmentaria, glaucoma, etc…

En esta ocasión vamos a a hablar de una dificultad visual que quizás mucha gente no lo tiene en cuenta porque es muy poco conocida: La sensibilidad reducida al contraste.

Definición de sensibilidad reducida al contraste

El contraste se define como “la capacidad de discriminar diferencias de iluminación entre áreas adyacentes cuyo umbral se estima como la menor cantidad de contraste que se hace para lograr esta distinción.”
Dicho de otra manera, la sensibilidad al contraste representa el menor contraste que el sistema visual puede detectar, es decir, que si no utilizamos los contrastes de la manera adecuada puede originar problemas de accesibilidad.

¿A qué se debe esta dificultad visual?

Este problema de visión se puede deber a enfermedades como las cataratas, los glaucomas, la diabetes, el SIDA, el Alzheimer o a una mala cirugía refractiva, como la miopía, la hipermetropía o el astigmatismo.

La sensibilidad al contraste se relaciona por diversas causas: el reconocimiento de objetos, la percepción de las caras o las distancias.

Valoración de la sensibilidad reducida al contraste

Una de las formas es, por medio de rejillas de enrejado. Están formadas por rejillas curvas en cartillas impresas.

Test de Sensibilidad al contraste

Por medio de letras de contraste decreciente. Estas son una cartillas creadas por Denis Pelli y  John Robson, en la que conforme va disminuyendo el contraste, la legibilidad se va perdiendo.

Por lo tanto, hace que estas personas tengan problemas a la hora de leer el contenido si no se establece un buen contraste.
Sensibilidad de contraste: Prueba de letras

 

Se considera que la sensibilidad al contraste se puede medir más facilmente utilizando cartillas del mismo tamaño pero con contraste decreciente y el umbral de contraste se determina, según la última línea en la cual la persona pueda reconocer los caracteres.

El test de Lea Hyvarinen

El test de Lea lo desarrolló Lea Hyvarinen, natural de Finlandia, que consiste en una serie de figuras pictóricas, como cuadrados, manzanas, casas y círculos con varias versiones para valorar problemas de visión: la visión lejana, la vista cansada, la sensibilidad al contraste, la ambliopía u ojo vago y el daño cerebral.

Sensibilidad reducida al contraste al contraste: Test de Lea Hyvarinen

 

Otra de las pruebas que se realizan es el Test de Bajo Contraste de Hiding Heidi, que determinan los niveles de contraste que un bebé puede detectar. Ayuda a proporcionar datos de referencia para evaluar los cambios futuros.

Consiste en 4 tarjetas impresas por ambos lados, de 23cm x 23cm, con los siguientes contrastes:
Negro, 25%, 10%, 5%, 1,25%

Sensibilidad al contraste: Test de Hiding Heidi

Ahora bien, una vez definida la sensibilidad al contraste y cómo se llevan a cabo los diferentes tipos de test, tenemos que tener en cuenta las pautas referentes al contraste de colores determinado en las WCAG 2.1.

1.4.3 Contraste (mínimo): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1, excepto en los siguientes casos:

  • Textos grandes: Los textos de gran tamaño  y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1.

1.4.6 Contraste (mejorado): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 7:1, excepto en los siguientes casos.

  • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 4.5:1.

 

Herramientas para evaluar el contraste de colores

Color Contrast Checker, de WebAim
Color Contrast Tester, de Joe Dolson

Recuerda que siempre hay que utilizar contrastes altos entre el color y el fondo

 

 

 

Accesibilidad web: ¿Cómo trabajar los enlaces?

Introducción

En esta entrada voy a hablar sobre cómo hacer enlaces más accesibles para facilitar su comprensión a todas las personas.

Cómo trabajar los enlaces

Para ello, tenemos que tener en cuenta que para trabajar con enlaces, el texto del propio enlace debe indicar claramente cuál es su propósito, como el contenido o información que se encuentra en el documento de destino o descripción de la acción que invoca.

El objetivo de esto es ayudar a las personas con diversidad diversidad funcional a comprender el propósito de cada enlace, de forma que puedan decidir seguir el enlace o no.

Criterios por los que se aplican los enlaces y su significado

Una vez explicado, vamos a hablar ahora de los criterios que establecen las Pautas de Accesibilidad al Contenido Web (WCAG 2.1).

2.4.4 Propósito de los enlaces (en contexto): El propósito de cada enlace puede ser determinado con sólo el texto del enlace o a través del texto del enlace sumado al contexto del enlace determinado por software, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general. (Nivel A)

2.4.9 Propósito de los enlaces (sólo enlaces): Se proporciona un mecanismo que permite identificar el propósito de cada enlace con sólo el texto del enlace, excepto cuando el propósito del enlace resultara ambiguo para los usuarios en general. (Nivel AAA)

Elementos de un enlace

Poniendo un ejemplo de lo que dice el criterio 2.4.4 es bien sencillo:

  1. Para más información, pulse este enlace.
  2. Puedes ver las fotos en Twitter o en Instagram

 

Como se puede intuir, de las dos opciones que tenemos, el enlace que se entiende mejor es el segundo, porque tiene un enlace descriptivo. Tiene que ser lo más descriptivo posible, es decir, en este caso, se cumple lo que establece el propio criterio: El enlace acompañado del contexto.

En la primera opción, por mucho que leamos, nos queda la duda: “¿para más información qué?”

Distinto sería dividir la información en dos párrafos, por ejemplo:

Puedes ver las fotos: (Un párrafo)

en Twitter o en Instagram (Otro párrafo)

Al poner la información en dos párrafos separados, su contexto no puede ser entendido por el software, por lo tanto, se trata de un enlace NO descriptivo.

Sin embargo, si lo ponemos como lista también es válido. En este caso sí es descriptivo.

 

Hay que tener en cuenta una consideración:

  1. Dos o más enlaces que tienen la misma función y/o propósito se identifican de manera coherente.

 

¿Qué quiero decir con esto?

Que tiene que haber una coherencia en los enlaces y no dar lugar a confusión, es decir, tenemos que ser consistentes con lo que hacemos.

Los dos documentos que se idfentifican como PDF, se interpretan de la misma manera con respecto a los otros dos, cuya identificación NO es consistente.

Texto del enlace descriptivo

A la hora de trabajar con los enlaces descriptivos según su contexto, hay que analizar si el enlace al leerlo tiene sentido, y en el caso que no lo tenga, intentar que se entienda de la mejor manera posible.

Tenemos dos ejemplos:

  1. “Había mucho derramamiento de sangre durante la época medieval“.
  2. Envíe su voto e infórmese sobre la Comisión de Voto Electrónico”

 

En la primera opción, está claro que no cabe dudas sobre el sentido del enlace. Sin embargo, en la segunda opción, el contexto no queda muy claro.

Por lo que, es preferible que la información adicional que aclare el contexto vaya antes del enlace.

Es decir:

“Infórmese más acerca de la Comisión sobre Voto Electrónico y envíe su voto“.

 

El texto del enlace y el contexto deben estar en la misma oración

  1. Aprenda más acerca de la Comisión sobre Voto Electrónico.

 Envíe su voto.

2. “Infórmese más acerca de la Comisión sobre Voto Electrónico y envíe su voto

También se puede poner el enlace acompañado por una imagen.

Y en los enlaces a documentos no HTML es mejor proporcionar algún indicativo al usuario de que va acceder a otro formato de documento. Al ser información relevante hay que incluirla dentro del enlace.

Por otro lado, si por ejemplo, hablamos de noticias, o cualquier cosa interesante, es importante mostrar el título de la noticia, así como que vaya acompañado de una breve descripción.

  • Titulo de la noticia 1

Descripción de noticia 1

  • Titulo de la noticia 2

Descripción de la noticia 2

Si por ejemplo, tenemos en cuenta enlaces de libros se hace así:

¿Cómo indicamos la apertura de una ventana nueva?

  • Lo podemos indicar en el texto del enlace:

Constitución Española (PDF, abre en una ventana nueva).

  • Indicarlo en el título del enlace (a través del campo descripción).

Consideraciones importantes para el título del enlace

  • Sólo lo usaremos para complementar la información, no todos los enlaces tienen que tener título.
  • No duplicar el texto que aparece en el enlace
  • No usar la palabra “Enlace”. El lector de pantalla ya nos dice que es un enlace.
  • No debemos abrir nueva ventana cuando estemos en el mismo sitio web.

 

Enlaces que provocan un cambio de contexto.

¿Qué es un cambio de contexto?
Cuando enlazamos una página con diferente estructura, diferente disposición de contenidos, diferente menú principal, etc… se produce un cambio de contexto.

¿Cuándo ocurre?

  • Un enlace externo siempre provoca un cambio de contexto.
  • Existen enlaces internos, que también provocan cambios de contexto.

¿Qué tenemos que hacer?

Hemos de avisar al usuario que el enlace provoca un cambio de contexto, va a otro “sitio/espacio web”.

¿Cómo lo hacemos?
En el texto del enlace, o en la descripción del enlace.

Dirección del enlace (URL) como texto del enlace

No incluir la dirección web (URL) como texto del enlace, a no ser que refiera a la de la página de entrada al sitio.

¿Por qué no se puede hacer esto? Muy sencillo.

Porque cuando el lector de pantalla lee la URL dice: “http dos puntos barra w w w punto…” y resulta tedioso para las personas que usan lector de pantallas.

Accesibilidad web: Guías de interfaces móviles accesibles

Guías de interfaces móviles accesibles

Voy a hablar de unas pautas, de unas guías que son imprescindibles para llevar a cabo el desarrollo de la accesibilidad de los móviles.

guías de interfaces móviles accesibles

Están desarrolladas por Funka, una empresa sueca especializada en accesibilidad de reconocido prestigio internacional.

Estas guías nos ofrecen un listado de pautas, estudiadas y testeadas con usuarios, que nos permiten diseñar e implementar interfaces móviles más usables y accesibles.

Pautas para el desarrollo de interfaces móviles accesibles

Están disponibles en castellano: Pautas para el desarrollo de interfaces móviles accesibles (PDF)

Son 48 pautas agrupadas en 6 temas.

Elección de una solución

1. Observe que su sitio web básico funcione en dispositivos móviles.

Recomiendan utilizar el enfoque “Mobile First”.

2. No obligue al usuario a utilizar una versión móvil, pero ofrézcala en caso de que las páginas del sitio web básico sean grandes o tengan unas funcionalidades complejas.

3. Una versión móvil del sitio web debe, en la medida de lo posible, facilitar al usuario la misma información y servicios que el sitio web normal, a no ser que se trate expresamente de una versión móvil de un servicio o funcionalidad específicamente delimitados.

4. Cree aplicaciones para funcionalidades claramente delimitadas a las que el usuario pueda necesitar acceder con frecuencia.

Diseño

5. Siga las WCAG 2.0 excepto en los aspectos que las presentes pautas contradigan a las WCAG 2.0.

6. Al crear aplicaciones para dispositivos específicos, deberán seguirse las directrices de diseño y accesibilidad, siempre y cuando no contradigan estas pautas.

7. Si desarrolla una aplicación para una plataforma específica, deberá ser compatible con las características propias de la plataforma.

8. Identifique los elementos gráficos, iconos y botones con su motivo o función.

9. Cada objeto de formulario debe tener una etiqueta o una descripción.

10. No utilice marcos en interfaces web.

11. Ayude al usuario a introducir datos adaptando el teclado virtual al contenido que debe introducirse.

12. Minimice el uso de scripts ejecutados en cliente.

13. Realice pruebas prácticas de la solución.

Estructura y presentación

14. En las vistas con scroll, coloque las cosas importantes más arriba y las menos importantes más abajo.

Pero ten en cuenta también que es difícil conseguir hacer clic en los objetos que se encuentran arriba del todo en la pantalla. Por lo tanto, una interacción importante no debe situarse en la parte de arriba del todo de la pantalla.

zonas_mas_faciles_pulsar

15. Agrupe los elementos que van juntos.

La página debe redistribuirse, en la medida de lo posible, de modo que la información relacionada se posicione justo detrás de la sección con la que se relaciona, en lugar de que todo el material relacionado se coloque abajo del todo.

16. Procure crear un diseño limpio y minimice el número de objetos “innecesarios”.

17. Procure que el encabezado de la página sea pequeño.

18. Cree áreas grandes para hacer clic.

Procure que el área para hacer clic tenga como mínimo el alto de fila del cuerpo de texto en un sentido y el alto de fila del cuerpo de texto multiplicado por 3 en el otro sentido. Los iconos de una aplicación deberían tener, como mínimo, 9 milímetros de ancho y de alto.

19. No coloque los botones de uso frecuente en el margen derecho o izquierdo, a no ser que ocupen, como mínimo, una tercera parte del ancho de la pantalla.

A los usuarios que solo utilizan una mano, o que tienen que equilibrar el móvil sobre la rodilla para poder utilizarlo, les resulta difícil pulsar botones que están en los márgenes.

20. No coloque a la derecha los botones, funcionalidades o grupos con botones y funcionalidades, a no ser que el grupo ocupe, como mínimo, el 75 % de la pantalla en todas las posiciones.

Beneficia específicamente a los usuarios que no ven el sitio web y utilizan el dedo índice para escanear la interfaz.

21. Oriente los botones y los enlaces en filas claras (horizontal y verticalmente).

22. Las etiquetas de los campos de introducción deben colocarse principalmente encima del campo.

Son una excepción las casillas de verificación y los botones de opción, en los que el texto puede situarse a la derecha, pero el título del grupo se colocaría encima del mismo.

23. Las longitudes de línea deben adaptarse al ancho de la pantalla, pero nunca superar un máximo de 70 caracteres por línea, espacios incluidos.

El objetivo es que la longitud sea de 55-60 caracteres por línea, espacios incluidos.

24. Limite la cantidad de información y el número de objetos mostrados.

25. Utilice iconos conocidos.

26. Diseñe los objetos clicables para que sean obvios.

Los enlaces no se deben distinguir solo por el color.

27. Utilice contrastes altos.

28. Debe ser posible utilizar la interfaz en la visualización tanto horizontal como vertical.

Interacción

29. Utilice conceptos de navegación sencillos.

Los mega-menús no funcionan bien en móvil y han de rediseñarse.

30. Si desarrolla una aplicación para un sistema operativo o un dispositivo móvil que pueda tener botones de control (por ejemplo, teclas de flecha y un botón Aceptar), debe ser posible utilizarlos para navegar por la interfaz.

31. Si desarrolla una interfaz que se pueda utilizar en dispositivos a los que se pueda conectar un teclado, la interfaz debe, cuando sea posible, poder controlarse con el teclado.

32. Inserte atajos para facilitar que el usuario salte de una parte a otra del contenido en las páginas largas.

Aunque estén ocultos inicialmente, deben mostrarse al recibir el foco en la navegación por teclado.

33. Minimice la introducción de texto en la interfaz.

34. Si la interfaz admite el control mediante gestos, debe implementarse esta función.

35. No incluya funciones que solo se puedan ejecutar mediante gestos, compleméntelas siempre con un botón o enlace.

36. Permita controlar la interfaz solo con un dedo.

37. Sea sistemático.

Por ejemplo, coloca los botones que tengan una determinada funcionalidad en el mismo lugar de la pantalla o diséñalos de forma homogénea.

38. Utilice los objetos integrados según su uso previsto y de la forma en que el usuario espera que se utilicen.

Es decir, en vez de implementar componentes propios con una funcionalidad equivalente.

39. Proporcione feedback al usuario.

Mediante un sonido y una vibración breve si el dispositivo lo permite, pero siendo posible desconectar esta confirmación. Puede haber excepciones cuando un exceso de confirmaciones se perciba como molesto (por ejemplo, una aplicación que funciona como podómetro no debe confirmar cada paso registrado).

40. Proporcione información de estado clara al usuario.

Por ejemplo, si la aplicación o sitio web están cargando datos, es conveniente mostrar el progreso de la carga.

41. Proporcione al usuario tiempo suficiente y avísele antes de que se supere el límite de tiempo.

Si fuera posible, también debería existir la posibilidad de prorrogar el tiempo de forma sencilla.

42. Ayude al usuario a evitar y a corregir posibles errores.

Por ejemplo con autocompletado o con sugerencias de búsqueda. Si aun así se producen errores, debe informarse claramente al usuario tanto en la parte superior de la página como en el lugar en el que se haya producido el error. Cuando sea posible, se debe ofrecer también propuestas de solución.

Contenido

43. Utilice imágenes solo si son realmente útiles para el usuario.

44. Utilice encabezados breves y descriptivos para estructurar la información.

45. Evite las abreviaturas.

Configuración de usuario

46. Asegure que la interfaz pueda ampliarse.

47. Considere la posibilidad de proporcionar una opción para invertir los colores.

48. Considere la posibilidad de proporcionar un ajuste para cambiar el tipo de letra.

Pautas de navegación móvil

Estas pautas están en inglés: “Mobile Navigation Guidelines”

 

Son 23 pautas que se agrupan en 5 temas.

Interacción

1. El concepto de navegación es fácil de comprender

2. La navegación es consistente y predecible entre los diferentes niveles de la estructura de información.

Una excepción es la navegación por el nivel superior, que puede ser diferente a la de los submenús sin crear problemas.

3. El usuario recibe feedback relevante.

Por ejemplo, se informa de la opción de menú seleccionada; un título visible indica en qué página se ha aterrizado; etc.

4. La comprensión del concepto de navegación no está basado en la ruta del enlace

5. El tiempo que se necesita para navegar está minimizado

Por ejemplo, se reduce el número de pasos para alcanzar el contenido si dichos pasos requieren una carga de página. Las pruebas demuestran que a menudo hacer scroll es más rápido.

6. La navegación trabaja en diferentes tamaños de ventanaNo solo en diferentes tamaños sino también en posición vertical y horizontal. Ciertos conceptos funcionan mejor en pantallas grandes y otros mejor en pantallas pequeñas, por ello no cambies demasiado pronto a la versión de navegación móvil.

7. La estructura de navegación soporta diferentes niveles de profundidad (si así se requiere). Hay conceptos que solo soportan uno o dos niveles de profundidad. Si tu web tiene una estructura más profunda debes escoger el concepto de navegación adecuado.

8. El menú solo debe contener la estructura de la información

Si la función de búsqueda está en el menú, habrá personas a las que les costará encontrarla. Tampoco recomiendan que tengas que abrir el menú para cambiar de idioma.

9. La estructura de la información se ha estudiado detenidamenteSi la arquitectura de información del sitio es incorrecta o está desequilibrada, el concepto de navegación se vuelve irrelevante, pues la información será difícil de encontrar independientemente del mismo.

Layout y diseño

10. El menú tiene un diseño claro.

Trata la importancia de saber en qué página estás, en qué nivel de la estructura te encuentras y qué otras opciones hay al mismo nivel. O también aspectos como el diseño consistente o la delimitación clara de las diferentes zonas clicables.

11. Presentar el menú verticalmente

Este punto no se aplica necesariamente al menú superior.

12. Áreas clicables suficientemente grandes.

Indican 9 mm medidos en la pantalla del dispositivo.

13. El menú es fácil de encontrar.

14. El icono del menú más texto complementario (si hay icono de menú).

Utiliza el icono de menú que los usuarios esperan encontrar y acompáñalo del texto “Menú”.

15. El menú es de fácil acceso.

Debes poder acceder fácilmente al mismo cuando sostienes el teléfono con una sola mano.

16. Las opciones importantes del menú no están ocultas

No se refiere al menú oculto tras un botón “menú”, medida eficaz si su ubicación y diseño es claro y que además permite poner el foco en el contenido. Se refiere a ocultar opciones de menú tras un enlace “Mostrar más”. Muchos usuarios evitan hacer clic en este tipo de enlaces incluso si no encuentran lo que están buscando en las opciones visibles.

Contenido

17. Poner el foco en el contenidoLo prioritario de la página es el contenido, que confirma además si lo que estás buscando es esa página o si llegaste a la página correcta. El menú no debe ocupar toda la pantalla a menos que el usuario así lo haya elegido

18. Los enlaces a las páginas importantes también están incluidos en el contenidoLas preferencias de navegación varían: unos usuarios utilizan el menú, otros el buscador, y muchos hojean títulos y enlaces relevantes, evitando el menú y el buscador. Los enlaces deben ser claros, descriptivos y legibles, para lo cual ayuda que estén en líneas separadas.

Diseño técnico

19. El menú trabaja con el lector de pantalla.

20. El menú puede ser usado con el teclado. Además el orden de tabulación ha de ser lógico y el foco visible.

21. Puedes navegar incluso cuando javascript está desactivado

Preferencias de los usuarios

22. El menú admite diferentes tamaños de texto y fuentes

Es decir, el usuario puede cambiar el tamaño de texto o las fuentes, mediante las opciones de personalización de su navegador o el sistema operativo, y el menú debe admitirlo y visualizarse correctamente,

23. El menú admite zoom.

Accesibilidad web: La Confederación Estatal de Personas Sordas

Escribo esta entrada a modo de reflexión porque las personas con diversional funcional, sea del tipo que sea, sin distinción, formamos parte de esta sociedad, no sólo las personas sordas.

Y también voy a comentar los problemas de accesibilidad que presenta el sitio web de la Confederación Estatal de Personas Sordas.

Confederación Estatal de Personas Sordas

El otro día navegando por internet me entró curiosidad por ver cómo se desenvuelven las personas sordas por estos lares. Así que nada mejor que investigar en su sitio web principal, y ver vídeos en youtube.

Tal fue mi sorpresa que me di cuenta de que la Confederación Estatal de Personas Sordas  discrimina al resto de personas con Diversidad Funcional y también a las personas oyentes.

Que vale, que sí, que es una asignatura pendiente que tenemos y que deberemos adaptarnos tarde o temprano a su mundo, que es un mundo tan desconocido y tan incomprendido, que ya va siendo hora de que aprendamos algo, aunque sea lo más básico.

Pero como siempre digo, hasta que no lo tienes cerca no eres consciente del problema y la dificultad que entraña vivir con este hándicap: el principal, convivir en sociedad, ya que su círculo es bastante reducido.

Y ojalá pudiera terminar este post aquí, pero… ahora viene la parte negativa de este asunto y es algo que es imposible pasar por alto.

Que la propia Confederación Estatal de Personas Sordas discrimine al resto de personas con diversidad funcional es algo que no se puede permitir.

Porque por ejemplo, investigando en su web, tienen una guía de autodefensa. Si no me explicas con subtítulos qué puedo hacer para ayudar a la persona en cuestión, por si en algún momento nos encontramos en esa situación, complicado lo tenemos, porque no todas las personas que tienen una diversidad funcional auditiva necesitan lengua de signos, como las personas que lleven audífonos o personas que usen implantes cocleares.

Siempre es bueno informar y tener un conocimiento mínimo de cómo poder desenvolverse, que se supone que es el objetivo de los vídeos: información general para TODAS LAS PERSONAS, sin distinción.

Como se suele decir: cada persona es un mundo y hay que intentar adaptarse a las necesidades de cada cual. Hace falta mucha concienciación.

Y aquí no acaba todo… aún hay más. Vamos a lo importante:

Su web presenta graves problemas de accesibilidad

La web NO es accesible para todas las personas con diversidad funcional.

 

Imágenes sin texto aternativo en la CNSE

el menú principal es inaccesible por teclado

  • Es imposible navegar por teclado, te vuelves loca. Y además, el foco de teclado no se distingue.
  • El formulario de contacto no está correctamente etiquetado, y está maquetado con tablas.

formulario de CNSE inaccesible

Captcha y botón Enviar de CNSE

 

Y por último y no por ello, menos importante, (aunque hay más cosas), señalar la razón por la que escribo este post: subtítulos en los vídeos tanto en youtube, como en su propia web.

Y como muestra, un ejemplo, un vídeo de la Ley 27/2007 por la que se aprueba la lengua de signos:

En la web:

video presentación CNSE

 

Usabilidad web: ¿Qué es UI y UX? Diferencias

He decidido hacer esta entrada porque todavía hay mucha gente que suele confundir dos términos que son parecidos, pero que no significan lo mismo.

UI, que se le conoce como Interfaz de usuario y UX, que es Experiencia de Usuario.

ux y ui: diferencias

¿Qué es UI? (Interfaz de usuario)

La interfaz del usuario hace referencia al conjunto de elementos de la pantalla que hacen que el usuario interactúe con el sitio web. El experto en usabilidad y uno de los mayores referentes en UI, Jakob Nielsen ha desarrollado una serie de mejoras. Según él, los elementos más importantes de una IU son:

  • Propósito del sitio: tiene que quedar claro a quién pertenece la web y qué funciones permite realizar.
  • Ayuda al usuario: el sistema de navegación tiene que estar a la vista, y también tiene que incluir un sistema de búsqueda adicional.
  • Mostrar el contenido: tiene que estar explicado de manera clara y con elementos de texto que ayuden a su lectura (como títulos, negritas, etc.).
  • Diseño gráfico funcional: los elementos gráficos deben ir dirigidos a ayudar al usuario en encontrar lo que quiere, y no solamente como adorno.

 

Componentes de la UI (Interfaz de Usuario)

La UI, principalmente presenta las posibilidades de interacción junto con el diseño visual. Esto quiere decir, que las decisiones de la Arquitectura de Información y el Diseño de Interacción se reflejan en la interfaz.

La arquitectura establece la estructura, además se piensa en cómo se comporta el sistema en respuesta al usuario y por último tiene una serie de características: colores, texturas y gráficos que lo hacen estético.

Según Usability.gov, los elementos que generalmente se presentan en una UI son los siguientes:

  • Controles de Input: botones, campos de texto, casillas de verificación, botones de radio, listas drop down, campos de fecha…
  • Componentes de Navegación: migas de pan, sliders, formularios de búsqueda, paginación, tags, iconos…
  • Componentes de Información: ayudas adicionales, iconos, barras de progreso, notificaciones, cajas de mensajes.
  • Contenedores

Principios del Diseño de UI (Interfaz de Usuario)

Según Larry Constantine y Lucy Lockwood, existen ciertos principios para el diseño de interfaz centrado en el usuario. Estos principios son:

  1. Estructura: El diseño debe organizar la interfaz de usuario a propósito, de manera significativa y útil basada en modelos claros y consistentes que son evidentes y reconocible para los usuarios, poniendo cosas relacionadas entre sí y que separa las cosas no relacionadas, diferenciando cosas diferentes y hacer cosas similares se parecen entre una y otra. El principio de estructura concierne a la arquitectura general de la interfaz de usuario.
  2. Simplicidad: El diseño debe facilitar las tareas sencillas y comunes, comunicarse de forma clara y sencilla en el propio idioma del usuario y proporcionar buenos accesos directos que estén significativamente relacionados con procedimientos más largos.
  3. Visibilidad: El diseño debe hacer visibles todas las opciones y materiales necesarios para una tarea determinada sin distraer al usuario con información superflua o redundante. El buen diseño no abruma a los usuarios con alternativas o confunde con información innecesaria.
  4. Retroalimentación: El diseño debe mantener a los usuarios informados de las acciones o interpretaciones, los cambios de estado o condición, y los errores o excepciones que son relevantes y de interés para el usuario a través de un lenguaje claro, conciso y claro que sea familiar para los usuarios.
  5. Tolerancia: El diseño debe ser flexible y tolerante, reduciendo el costo de los errores y el mal uso al permitir deshacer y rehacer, y al mismo tiempo evitar los errores siempre que sea posible, tolerando entradas y secuencias variadas e interpretando todas las acciones razonables.
  6. Reuso: El diseño debe reutilizar los componentes y comportamientos internos y externos, manteniendo la coherencia con el objetivo en lugar de consistencia meramente arbitraria, reduciendo así la necesidad de los usuarios a repensar y recordar.

 

¿Qué es la UX? Experiencia de usuario.

La experiencia de usuario hace referencia a las sensaciones que experimenta el usuario antes, durante y después de interactuar con un sitio, es decir, son las sensaciones que percibe y hace que el usuario se sienta satisfecho y feliz. Si esto ocurre, estaremos hablando de que ha producido una buena buena experiencia, que hemos hemos aplicado la accesibilidad y hemos hecho el sitio web lo más usable posible.

La experiencia de usuario, como se refiere al análisis del comportamiento del usuario, tiene actitudes relacionadas con la psicología:

  • La percepción. Tenemos que saber qué nos llama la atención, cómo nos afectan los colores y cómo desplazamos la mirada por la pantalla.
  • Las emociones. Las emociones no son reacciones automáticas, y por lo tanto hay que entender cómo se generan y qué implicaciones tienen. Las personas nos dejamos guiar más por las emociones que por cualquier otra cosa, y precisamente por eso es tan importante tenerlas en cuenta.
  • La memoria. Cuando diseñamos una web tenemos que pensar en las limitaciones de las personas para recordar. Muchas veces no se tienen en cuenta los caminos para que el usuario vuelva al punto de partida, y eso puede hacer que se sienta confuso.
  • La mentalidad. El usuario tendrá creencias, estereotipos, su interpretación de la sociedad y de las personas que lo rodean. Siguiendo en esta línea, vemos por qué cada vez más los usuarios buscan valoraciones de otras personas acerca de un producto en la red: no es solamente desconfianza, también implica qué prejuicios y creencias tiene.
  • La motivación. El usuario tiene que estar motivado durante todo el tiempo que esté en una web, no solamente al principio (de lo contrario, puede irse). Actualmente existen muchas empresas que usan el Gaming para tener a sus usuarios motivados y entretenidos.
  • El aprendizaje. Desde el momento en que un usuario entra en una página web se convierte en un aprendiz y eso significa que tenemos que enseñarle los pasos que tiene que dar para que consiga su objetivo. Además, se tiene que estructurar la información para que el usuario entienda fácilmente todo el contenido de la web.

Principios de la UX. (Experiencia de usuario)

 

  1. Esté fuera del camino de las personas: En diseño, mucho puede ser excesivo. En realidad las personas saben lo que desean y es mucho mejor hacer esa experiencia de la manera más fácil posible, sin complicaciones.
  2. Cree jerarquías que vayan de acuerdo con lo que las personas necesitan: si el principio 1 es hacerlo todo más simple, es importante que lo que las personas encuentren tenga una organización similar a sus necesidades.
  3. Limite las distracciones: si usted tiene una idea clara de qué desea que los usuarios hagan, tenga cuidado con lo que pone al lado, pues puede lograr resultados contraproducentes. Un diseño limpio y sin distracciones es un buen aliado.
  4. Provea de manera fuerte la esencia de la información: lo que más puede limitar una buena experiencia es no tener todo el conocimiento o contenido adecuados. Por ello, el diseño debe incluir lo necesario para la navegación y los contenidos prometidos o esperados por el usuario.
  5. Provea signos y pistas: hay que aprovechar todos los elementos a la mano, en especial los visuales, lo cual generalmente es un excelente complemento de la información adecuada.
  6. Es necesario el contexto: piense que no todos tienen el mismo nivel de conocimiento e información, por lo que muchas veces el contexto es parte importante para el desarrollo de la experiencia. Casi siempre todo necesita un porqué.
  7. Use el contenido constantemente: crear alertas y comunicar todo el tiempo en qué parte del proceso o del sitio se encuentra el usuario es vital para la buena experiencia.
  8. Haga reversibles las acciones: si hay algo que puede ser difícil de asumir para un usuario es que lo que hizo en el sitio web no pueda cambiarse o requiera muchos pasos para lograrlo. Por ello, es necesario dar la posibilidad de deshacer algunas decisiones, desde la simple de regresar a la página anterior hasta cancelar un pedido en una tienda en línea.
  9. Establezca un canal de retroalimentación: este puede ser uno de los canales más eficientes para saber lo que está sucediendo en su sitio web con la experiencia de usuario. Mantenga siempre una comunicación abierta. Si muchos usuarios ‘están equivocados’ o ‘no captan’ lo que usted está tratando de ofrecer o comunicar, lo más probable es que no sean ellos los del error.
  10. Es importante generar una primera buena impresión: lo que hace que los usuarios vuelvan y se conviertan en usuarios, lectores o visitantes fieles de un sitio es su experiencia. Generar buenos momentos y de tal forma buenos recuerdos impulsa esa fidelidad, y también el que comparta el sitio con otros.

Conclusión entre UI y UX

Por lo tanto la experiencia de usuario es lo que siente el usuario de interactuar con un producto, mientras que la interfaz de usuario es una capa visual de colores, texturas, formas y elementos. Por eso es algo que muchas personas suelen confundir con facilidad, porque digamos que una se integra dentro de la otra.

Es decir, la diferencia entre la interfaz de usuario y la UX o experiencia de usuario sería esta: El diseño de interacción se ocupa de decidir cuál será el recorrido y dónde se deberán situar los botones que desencadenarán las diferentes acciones, es la parte de estrategia y la experiencia de usuario trata sobre los aspectos relativos a esos procesos o acciones que se desencadenan, se ocupa de qué es lo que sucede cuando se activan los botones o mecanismos, y sería la parte mecánica del proceso.

Entradas relacionadas:

Accesibilidad y usabilidad web: Diferencias

Usabilidad web: ¿Qué el es enfoque “Mobile First”?

Responsive Design. ¿Qué es?

Responsive Web Design (RWD) es una técnica de diseño y desarrollo de sitios y aplicaciones web que permite que las páginas se adapten al tamaño, la resolución y orientación de la pantalla, y por tanto al dispositivo del usuario. Y todo ello con un código único, una única página, una única URL.

Boston Globe

Boston-Globe-ejemplo-de-Responsive-Web-Design

Responsive Design. ¿Cómo se hace?

Esta flexibilidad se consigue mediante el uso de un código HTML único pero que se presenta de manera diferente gracias a:

  • La separación entre el contenido y la presentación: todos los estilos están definidos en las CSS.
  • Layouts basados en grids: la información se organiza en ejes verticales y horizontales. Tendremos definidos diferentes layouts en diferentes CSS, por ejemplo uno de 3 columnas, uno de 2 columnas y uno de 1 columna.

 

layout_rwd

 

  • Fluids Grids, es decir, el uso de medidas relativas que permitan que el contenido se pueda adaptar realmente como se ve en la imagen anterior. Permite utilizar todo el espacio disponible y evitar el desplazamiento horizontal.
  • Media Queries, permite cargar dinámicamente las diferentes CSS que hemos definido en función del tamaño de pantalla, su resolución o su orientación.

<link rel="stylesheet" type="text/css" href="style2col.css" media="all and (min-width: 400px) and (max-width: 800px)" />

En este ejemplo se especifica la CSS a utilizar (layout de 2 columnas) con un viewport (la parte de pantalla donde se representa el documento) de una anchura entre 400px y 800px.

  • Configuración del meta viewport: mediante este meta indicamos que nuestra web es flexible para adaptarse a los diferentes anchos y resoluciones de pantalla, le indicamos al navegador que no aumente o reduzca la página, que use el zoom por defecto.

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

  • Imágenes y vídeos de tamaño flexible, que también se adapten al espacio disponible. Se puede conseguir de diferentes maneras, cada una con sus ventajas e inconvenientes.

 

Uso de las imágenes

  • La imagen se define como fondo de un elemento en las CSS (background-image) Se tienen diferentes versiones de la imagen a diferentes tamaños, en cada CSS se carga una de ellas. Para ello, hay que tener en cuenta la accesibilidad de las  imágenes y usar el texto alternativo según la imagen que corresponda.
  • La imagen se incluye en el código HTML con el elemento IMG pero se define su anchura y altura en las diferentes CSS. El gran inconveniente es que aunque muestras la imagen a diferente tamaño en realidad se carga siempre la de mayor peso.
  • Los logotipos e iconos se incluyen con SVG adaptándolos mediante media queries. Media Queries son recomendación del W3C desde junio de 2012.

 

Enfoque “Mobile First”

Desde 2009 Luke Wroblewski viene defendiendo un enfoque Mobile First, basado en el principio de Mejora Progresiva. Pensar primero en la versión móvil y después ir añadiendo complejidad mediante Media Queries, que serán ignoradas por los navegadores que no las soporten.
Este enfoque, dada las limitaciones de las pantallas pequeñas, te permite centrarte y priorizar las tareas claves para los usuarios

Los dispositivos móviles requieren que los equipos de desarrollo de software se centren únicamente en los contenidos y en las acciones más importantes de la aplicación. Simplemente no hay espacio en una pantalla de 320x480px para los elementos innecesarios. Hay que priorizar.
Así que, cuando un equipo diseña primero para el móvil, el resultado final es una experiencia centrada en las tareas clave que los usuarios quieren lograr, sin distracciones. Eso es bueno para la experiencia de usuario y bueno para los negocios.

Relación entre Responsive Design y accesibilidad

Parten de un enfoque o filosofía similar: defienden una web única, que los sitios sean flexibles, independientes del dispositivo y a disposición de todos los usuarios.

Hay ciertos requisitos de accesibilidad, a nivel de código, que tienen gran impacto en la accesibilidad de las páginas y que deben tenerse en cuenta desde el comienzo del desarrollo: el uso de estándares, la separación entre el contenido y la presentación, el uso de medidas relativas, evitar las tablas para maquetar o la definición de jerarquías de información estructuradas correctamente.

Por otra parte, también hemos comentado que la metodología Mobile First va más allá de la mera adaptación del sitio al tamaño de pantalla.

Esto ayuda a priorizar contenidos y funcionalidades eliminado lo innecesario: las páginas son más cortas y sencillas y la navegación más racional. Como resultado tendremos sitios más fáciles de navegar y entender, con menor carga cognitiva y visual.

Favorece a todos los usuarios, pero sin duda especialmente a los usuarios con diversidad funcional cognitiva, a los usuarios que utilizan lectores de pantalla o a los usuarios que tienen una diversidad funcional física y utilizan dispositivos de entrada alternativos.

¿Cómo puede favorecer a la accesibilidad de un sitio que este sea Responsive Design?

Tener en cuenta el Criterio 1.3.1 para:

  • El contenido y la presentación están separados, los estilos están definidos en las CSS y no se usan tablas para maquetar. Todo ello beneficia a las personas con diferentes discapacidades al permitir a los agentes de usuario adaptar el contenido de acuerdo a sus necesidades.
  • Tendencia a tener la información estructurada y jerarquizada más correctamente
  • Tendencia al uso de elementos semánticos para poder definir sus estilos en las CSS. Indicar explícitamente la función estructural o valor semántico del contenido permitirá que esta información se pueda determinar mediante software favoreciendo la accesibilidad.
  • Tendencia a un mayor respeto por los estándares web, lo cual maximizará la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas (pauta 4.1)
  • El diseño flexible y la definición de tamaños relativos permiten que el texto se pueda ampliar sin desbordamientos y hacer zoom con garantías (criterio de conformidad 1.4.4)
    • El tamaño flexible de las imágenes y vídeos permitirá que se adapten mejor al espacio disponible sin que se superpongan con otros contenidos.
    • Mejor experiencia para los usuarios con baja visión que suelen tener resoluciones de pantalla más bajas y suelen ampliar la pantalla.
  • Además, el diseño flexible y que no se usen tablas para maquetar ayuda a garantizar un orden de lectura correcto.
  • Se tiene muy presente que el sitio se visualizará en distintos dispositivos y por tanto:
    • Es más probable que tu sitio no sea operable solo con el ratón, la forma de interactuar ahora es muy variable y esto ayuda al diseño inclusivo.
    • Es más probable que mejores el contraste de color, que suele ser más pobre en los dispositivos móviles ya que bajamos el brillo para ahorrar batería, además de que son habituales los reflejos en la pantalla (criterios de conformidad 1.4.3 y 1.4.6)
    • Mayor uso de la técnica de Mejora Progresiva, que consiste en una implementación básica, que funciona a través de múltiples dispositivos y con una amplia gama de tecnologías de asistencia, añadiendo después más funcionalidades para los dispositivos que las soportan.
  • Focalizarse solo en lo necesario, priorizar y simplificar, dará como resultado sitios más fáciles de navegar y entender, con menor carga cognitiva y visual, mejorando la legibilidad y la accesibilidad.
    • Mayor uso de la técnica de Revelación Progresiva, que se basa en diferenciar el contenido primario del secundario. El contenido primario aparece inmediatamente en el flujo normal de la página y es muy visible. El objetivo es mostrar solo lo relevante para el usuario en este momento. Nos beneficia a todos, pero especialmente a los usuarios con discapacidad cognitiva o con déficit de atención, y bien hecho facilita la navegación a los usuarios de lectores de pantalla o a las personas con diversidad funcional motriz.