Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Accessibility

Cómo puedes usar el software de Adobe para mejorar la accesibilidad de tus diseños

by
Length:MediumLanguages:

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

Es importante que la mayor cantidad de gente posible sea capaz de participar con éxito en los diseños digitales. En este artículo, veremos algunas de las formas en que las grandes empresas de tecnología como Adobe están trabajando para mejorar la accesibilidad, y cómo puedes aplicar estos métodos en tus propios diseños.

El 3 de diciembre se celebra el Día Internacional de las Personas con Discapacidades, por lo que es especialmente adecuado que examinemos más a fondo la cuestión de la accesibilidad en el diseño hoy en día.

International Day of Persons with Disabilities logoInternational Day of Persons with Disabilities logoInternational Day of Persons with Disabilities logo

¿Qué es accesibilidad?

Cuando se inventó y desarrolló Internet, se diseñó teniendo en cuenta a la mayoría de la gente. Sin embargo, muchas personas con discapacidades* tuvieron dificultades para acceder al contenido electrónicamente.

* Un informe de 1997 de la Oficina del Censo de los EE.UU. categoriza al 19,6% de la población de los EE.UU. como con algún tipo de discapacidad.

Para los diseñadores, el tema de la accesibilidad concierne dos cosas:

  1. Cómo acceden los usuarios con discapacidades a la información electrónica.
  2. Cómo los diseñadores y desarrolladores de sitios web permiten que los sitios web funcionen con dispositivos de asistencia utilizados por personas con discapacidades.

En el caso de los usuarios con discapacidades, la preocupación es encontrar herramientas que faciliten el acceso al contenido. En el caso de los diseñadores, el objetivo es crear y utilizar esas herramientas de manera eficaz, mejorando la experiencia general del usuario para el mayor número posible de personas.

En 2006, la Junta de Acceso de los Estados Unidos comenzó a trabajar con compañías tecnológicas como Adobe para actualizar la Ley de Rehabilitación de 1973. Después de alrededor de una década de trabajo, la junta publicó su regla actualizada el año pasado, en 2017. La parte más significativa de la revisión es la adopción de las Pautas de Accesibilidad al Contenido en la Web (WCAG) 2.0. Esto fue particularmente importante ya que puso las reglas del gobierno de los EE.UU. en sintonía con el resto del mundo, lo que desde entonces ha facilitado a las empresas americanas como Adobe el desarrollo de productos que pueden ser utilizados en todo el mundo.

adobe accessibility websiteadobe accessibility websiteadobe accessibility website

¿Qué significa esto para los diseñadores?

Los usuarios con discapacidad suelen utilizar hardware y software para acceder al contenido de la web. Estas herramientas, conocidas como tecnologías de asistencia, van desde lectores de pantalla hasta pantallas táctiles y head pointers.

Para los diseñadores, es importante diseñar teniendo en cuenta a todos. Las suites de software como las aplicaciones de Adobe están siendo constantemente mejoradas, con funciones de accesibilidad que se añaden a más y más productos. Sin embargo, corresponde al diseñador hacer uso de esas funciones y tener en cuenta los requisitos de accesibilidad de los usuarios con discapacidades.

Por ejemplo, un usuario con ceguera o problemas de visión puede utilizar un lector de pantalla para leer el contenido de una página web en voz alta. Un diseñador debe ser consciente de que un lector de pantalla solo puede leer texto, y no imágenes o animación de video. Por lo tanto, las imágenes y los videos deben recibir descripciones de texto, conocidas como texto alternativo (alt), que los lectores de pantalla puedan leer.

Un usuario con problemas de movilidad puede confiar en el teclado en lugar del ratón para navegar por las páginas web. En algunos navegadores web, pulsar la tecla Tab permite al usuario desplazarse por todos los enlaces disponibles en una página. Al pulsar la tecla Intro se activa el enlace. En este caso, es fundamental que la página web pueda funcionar completamente sin necesidad de un ratón.

Los efectos de "hover" y las listas desplegables son solo un par de ejemplos de las características comunes de las páginas web que tienden a depender de un ratón para su funcionalidad. Por lo tanto, el diseñador debe crear la página con interacciones basadas en el teclado y el ratón.

¿Qué herramientas de accesibilidad están disponibles en los productos de Adobe?

Adobe es una de las empresas de tecnología a la vanguardia de la mejora de la accesibilidad para los usuarios con discapacidades. Hay tres formas principales en las que los productos de Adobe han sido optimizados teniendo en cuenta a estos usuarios:

  1. Los documentos de Adobe InDesign pueden prepararse para una mejor accesibilidad.
  2. Los sitios accesibles se pueden hacer usando Adobe Flash Professional.
  3. Los PDF accesibles pueden ser creados usando Adobe Acrobat.

Echemos un vistazo a dos de estas áreas, la preparación de documentos de InDesign y la autoría de PDF, y sugerimos los pasos que puede seguir para crear diseños más accesibles.

Cómo preparar documentos de diseño para la accesibilidad

Cuando se crea un documento en InDesign, con la intención de que se exporte como un PDF, los primeros pasos para hacer ese PDF accesible deben tomarse en InDesign, antes de la exportación.

Tendrás que asegurarte de que el contenido del texto de tu documento de InDesign se lea en el orden correcto. Para los usuarios sin discapacidad visual, el orden del texto suele estar determinado por la jerarquía del texto en la maqueta, marcada por el tamaño y la posición en la página. Para los usuarios con discapacidad visual, el texto tendrá que ser procesado por una máquina para ellos, así que depende de ti determinar el orden correcto del texto.

infographic without text orderinfographic without text orderinfographic without text order
Este documento de InDesign puede tener un orden lógico de lectura para la mayoría de los usuarios, pero para los usuarios con discapacidad visual, el flujo de texto está determinado por una máquina, no por la posición o la jerarquía de tamaño de la página.

Observa las siguientes comprobaciones para que tus documentos de InDesign sean lo más accesibles posible.

  • Si estás creando un documento con varios marcos de texto separados, un buen primer paso es asegurarte de que los marcos estén enlazados (ve a View > Extras > Show Text Threads (Ver > Extras > Mostrar hilos de texto) para ver qué marcos están conectados). Esto significa que un lector de pantalla leerá los marcos conectados como una narración continua.
  • También puedes anclar objetos, como imágenes, a marcos de texto, para asegurarte de que se lean en el orden correcto junto con el marco de texto que los acompaña. Coloca el cursor de Type Tool (T) (Herramienta de escritura (T)) en el marco de texto en el que quieres insertar el elemento anclado y ve a Object > Anchored Object > Insert. (Objeto > Objeto anclado > Insertar).
anchored objectanchored objectanchored object
  • Otra forma de mejorar el orden del texto es crear Paragraph Styles (Estilos de Párrafo )(Window > Styles > Paragraph Styles) ((Ventana > Estilos > Estilos de Párrafo)) y asignar estilos de encabezado, subencabezado y cuerpo de texto al texto de tu documento.
  • Etiquetar el contenido de tu documento de InDesign es el siguiente paso para mejorar la accesibilidad. Ve a View > Structure > Show Structure (Ver > Estructura > Mostrar estructura). A continuación, vuelve a View > Structure (Ver > Estructura) y elige Show Tag Markers (Mostrar marcadores de etiquetas) y Show Tagged Frames (Mostrar marcos etiquetados).
structure show structurestructure show structurestructure show structure

Abre también el panel de Etiquetas, yendo a Window > Utilities > Tags (Ventana > Utilidades > Etiquetas).

Sin ningún contenido etiquetado, tanto el panel de Structure (Estructura) como el de Tags (Etiquetas) simplemente mostrarán "Root".

tags panel indesigntags panel indesigntags panel indesign

Para empezar a etiquetar el contenido del documento, selecciona Add Untagged Items (Agregar elementos sin etiquetar) en el menú principal del panel Structure (Estructura).

show untagged itemsshow untagged itemsshow untagged items

InDesign cargará automáticamente los diferentes marcos en los paneles de Estructura y Etiquetas, resaltando cada uno en un color diferente.

tags paneltags paneltags panel

Toma nota de que Acrobat solo aceptará etiquetas en un formato determinado, por lo que depende de ti reescribir las etiquetas correctamente para que sean aceptadas por Acrobat en la exportación. Las etiquetas que Acrobat aceptará son:

  • Article <Art>
  • Document <Root>
  • Figure <Figure>
  • Heading <H>
  • Heading Level 1 <H1>
  • Heading Level 2 <H2>
  • Heading Level 3 <H3>
  • Heading Level 4 <H4>
  • Heading Level 5 <H5>
  • Heading Level 6 <H6>
  • Paragraph <P>
  • Section <Story>
  • Table <Table>

Una vez que los elementos previamente desmarcados se cargan en el panel de Structure (Estructura), puedes reordenar las etiquetas para darle al documento el orden de lectura correcto. Puedes elegir Show Text Snippets (Mostrar fragmentos de texto) en el menú desplegable del panel para mostrar un adelanto del texto de ese elemento, lo que te ayudará a determinar qué marco es cuál.

show text snippetsshow text snippetsshow text snippets
  • Con tu documento ordenado y etiquetado, estás listo para exportarlo como un PDF. Ve a File > Export (Archivo > Exportar) y elige Adobe PDF (Print (Imprimir)) en el menú Format (Formato). Como muchos usuarios no tendrán acceso a la última versión de Acrobat, es una buena idea establecer la compatibilidad del archivo en algún punto intermedio, como Acrobat 6 (PDF 1.5).
compatibility pdfcompatibility pdfcompatibility pdf

Asegúrate de que la opción Create Tagged PDF (Crear PDF con etiquetas) esté marcada en la sección Options (Opciones).

create tagged pdfcreate tagged pdfcreate tagged pdf

En Include (Incluir) en la parte inferior de la ventana, marca tanto los Bookmarks (Marcadores) como los Hyperlinks (Hipervínculos). Luego estás listo para hacer clic en Export (Exportar).

bookmarks and hyperlinksbookmarks and hyperlinksbookmarks and hyperlinks

Cómo crear archivos PDF accesibles con Acrobat

La creación de documentos PDF accesibles es un proceso doble, que comienza con la preparación correcta del documento en InDesign (véase más arriba). Una vez hecho esto, también puede continuar mejorando la accesibilidad de tu documento en Acrobat.

En Acrobat, con tu documento abierto, empieza por ir a Advanced > Accessibility > Full Check (Avanzado > Accesibilidad > Comprobación completa). Esto genera un informe que te indica si tu documento PDF es completamente, o solo parcialmente, accesible a nivel técnico.

accessibility check pdfaccessibility check pdfaccessibility check pdf
add tags in pdfadd tags in pdfadd tags in pdf

Puedes mejorar la accesibilidad de tus PDFs incluyendo las siguientes cosas en tu documento:

Texto buscable

Toda imagen escaneada de texto, como las firmas, debe convertirse en texto susceptible de búsqueda mediante reconocimiento óptico de caracteres (OCR) antes de abordar la accesibilidad en el documento. Puedes convertir los documentos escaneados en texto con capacidad de búsqueda en Acrobat DC.

Fuentes que permiten que los caracteres (por ejemplo, Braille) sean extraídos al texto

Acrobat extrae los caracteres al texto Unicode cuando se lee un PDF con un lector de pantalla, o cuando se guarda como texto para un grabador Braille.

Características interactivas útiles, como hipervínculos y ayudas a la navegación

Las ayudas a la navegación, como los enlaces, los encabezamientos y un índice, ayudan a los usuarios a navegar por un PDF sin tener que leer todo el documento. Los marcadores son particularmente útiles, y pueden ser creados a partir de los encabezados de los documentos.

Estructura y contenido etiquetado

Puedes editar el orden del contenido y el contenido de las etiquetas en tu PDF desde los paneles de Estructura y Etiquetas en Acrobat.

structure and tagsstructure and tagsstructure and tags

Texto alternativo para elementos no textuales

Ten en cuenta que los elementos no textuales, como las imágenes y las formas, no pueden ser leídos por los lectores de pantalla, por lo que es importante que se les asigne un texto alternativo (alt). En Acrobat, ve a Advanced > Accessibility > Touch Up Reading Order (Avanzado > Accesibilidad > Orden de lectura de retoque).

touch up reading ordertouch up reading ordertouch up reading order

Busca los elementos que están marcados con una advertencia que dice: "Figure – No alternate text exists (Figura - No existe texto alternativo)". En cada imagen, puedes hacer Right-click > Edit Alternate Text (clic derecho del ratón > Editar texto alternativo). Puedes añadir texto alternativo en la ventana que se abre.

Conclusión: ¿Qué es lo nuevo y lo que se espera de Adobe y la accesibilidad?

Adobe se esfuerza constantemente por mejorar la accesibilidad de sus productos, centrándose actualmente en hacer que los documentos exportados sean lo más accesibles posible para los usuarios con discapacidades.

Por ejemplo, ahora hay nuevas versiones de Adobe Acrobat Reader para Android y dispositivos móviles iOS que incluyen mejoras en la accesibilidad.

Adobe también se ha comprometido a buscar nuevas formas de mejorar la accesibilidad de los contenidos multimedia sofisticados mediante Adobe Animate CC y Flash Player 11. Puedes leer más sobre estos desarrollos aquí.

A medida que se siguen desarrollando los productos de Adobe y se publican nuevas versiones, parece probable que la accesibilidad se sitúe a la vanguardia de la funcionalidad, lo cual es una gran noticia para los usuarios con discapacidades y para el futuro del diseño inclusivo.

Más información sobre el Día Internacional de las Personas con Discapacidades y su manifiesto para mejorar el acceso para todos.

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