Haz que tu aplicación sea accesible

Todos deberían poder usar las aplicaciones de App Maker, incluidas las personas con discapacidad. Las discapacidades comunes que afectan el uso de una aplicación por parte de una persona incluyen ceguera o visión reducida, daltonismo, sordera o problemas de audición y habilidades motoras restringidas.

Cuando desarrollas aplicaciones con la accesibilidad en mente, mejoras la experiencia de todos los usuarios, no solo de las personas con discapacidad.

Diseño accesible

El diseño accesible incluye el diseño, el tamaño, el color y la navegación de tu aplicación, así como su interacción con tecnologías adaptativas y de apoyo.

Para permitir que los usuarios con cualquier tipo de capacidad usen tu aplicación correctamente, aplica las prácticas recomendadas de accesibilidad de Material Design. En la tabla siguiente, se describen los principios fundamentales de las consideraciones de accesibilidad y del diseño.

Prácticas recomendadas del diseño accesible
Disposición y diseño claros y adaptables Facilita a los usuarios el uso de tu aplicación mediante un diseño simple, claro y ordenado. En particular, considera lo siguiente:
  • Los elementos deben ser claramente visibles, incluso a gran aumento.
  • Para adaptar el diseño a diferentes tamaños de pantalla, usa el diseño responsivo.
  • El texto, los botones y otros elementos deben ser lo suficientemente grandes y tener un contraste lo suficientemente alto. El color no debe ser la única forma de transmitir información o distinguir contenido.
  • Si tu aplicación tiene elementos que se desvanecen después de un tiempo de espera, no establezcas un tiempo de espera en los elementos necesarios para completar una tarea.
  • Completa y corrige el lenguaje de marcado de encabezados, listas y tablas. Un lenguaje de marcado adecuado ayuda a las tecnologías adaptativas a leer tu contenido en voz alta, ampliarlo, cambiar el contraste o adaptarlo de alguna otra manera.
Navegación fácil de seguir
  • La navegación debe tener flujos de tareas claros y cortos.
  • La navegación debe ser fácil de encontrar y coherente entre las páginas. Por ejemplo, en cada página usa una plantilla de encabezado que proporcione el mismo menú de navegación y cuadro de búsqueda.
  • Organiza los elementos de las páginas en un orden lógico.
  • Agrupa elementos relacionados bajo encabezados descriptivos.
Etiquetas descriptivas de elementos de la IU Proporciona etiquetas útiles, únicas y descriptivas que expliquen el propósito de cada elemento interactivo a los usuarios. Estas etiquetas permiten a los lectores de pantalla explicar adecuadamente la función de un control particular a los usuarios que dependen de estos servicios.
Texto alternativo o descripciones para los medios En las imágenes o los videos que no contienen información, proporciona texto alternativo que describa brevemente el contenido.

Si la imagen contiene información que el usuario debe conocer, como un gráfico o un diagrama, incluye una descripción de los datos.

Para videos informativos, agrega subtítulos o proporciona una transcripción del texto completo.
Control de sonido y video Los usuarios deben poder pausar o detener el audio y sonido, ajustar el volumen y, si está disponible, activar y desactivar los subtítulos.
Control del teclado Organiza tu aplicación para que los usuarios puedan navegar por ella y usarla solo con el teclado (generalmente con el Tabulador o las teclas de flecha).

El enfoque del teclado debe ser visible y seguir una secuencia intuitiva centrada en la acción a través de la página. No pierdas el enfoque cuando el usuario cierra un diálogo o envía un formulario.

Por ejemplo, abre [App Maker](https://appmaker.google.com/){:.external target="_blank"} y usa solo el teclado para desplazarte por tu aplicación.
Ayuda con errores Proporciona texto descriptivo para los mensajes de error que incluya cómo resolver el problema, si es posible.

Permite a los usuarios deshacer acciones importantes o solicita confirmación antes de que puedan continuar. Por ejemplo, solicita a un usuario que confirme que desea borrar datos y, luego, continúa.
Automatiza la recopilación de datos Puedes usar las secuencias de comandos del cliente para obtener automáticamente información de la sesión, como el nombre o el correo electrónico del usuario, o la fecha de creación de un registro. Por ejemplo, la siguiente secuencia de comandos obtiene el correo electrónico del usuario y lo guarda en el campo "user". También obtiene la fecha y la guarda en el campo "date".

    record.user = Session.getActiveUser().getEmail();
    record.date = new Date();
    

Herramientas de accesibilidad de App Maker

App Maker te permite diseñar aplicaciones accesibles de las maneras siguientes:

  • El tema incorporado de Material Design cumple con las recomendaciones de contraste y tamaño.
  • Los elementos de App Maker tienen una propiedad ariaLabel. Úsala para la semántica de WAI-ARIA (Aplicaciones de Internet Enriquecidas y Accesibles) si necesitas anular el comportamiento predeterminado del lector de pantalla o agregar etiquetas ARIA para widgets personalizados.
  • Si los lectores de pantalla no anuncian automáticamente el resultado de una acción del usuario, como la eliminación correcta de una fila de tabla, puedes usar la función de la API del cliente app.accessibility.announce() para proporcionar texto a los lectores de pantalla. Para obtener más detalles, ve a la sección sobre accesibilidad.

Personaliza las descripciones de la IU con etiquetas ARIA

Cada elemento en una página de App Maker tiene una propiedad de etiqueta ARIA. La propiedad ariaLabel establece el atributo HTML de la etiqueta ARIA, que utiliza la tecnología de apoyo para comunicar el propósito del widget a un usuario con discapacidad visual.

Los lectores de pantalla están diseñados para obtener contexto y etiquetas directamente del lenguaje de marcado HTML. La mayoría de las veces, no necesitas ingresar explícitamente una etiqueta ARIA.

Establece una etiqueta ARIA en los casos siguientes:

  • Deseas anular el nombre predeterminado de un elemento, como cuando quieres proporcionar un nombre más descriptivo para un botón destinado a los usuarios de lectores de pantalla.
  • Creas un widget personalizado con acción que un lector de pantalla no puede detectar. Por ejemplo, creas un panel contraíble cuya visualización se puede activar o desactivar. Debes proporcionar un texto que describa el estado del panel y especificar cómo el enfoque del teclado debe navegar hasta el panel y dentro y fuera de este.

Para establecer la propiedad ariaLabel de un widget, haz lo siguiente:

  1. Selecciona el widget y ve a su pestaña del editor de propiedades.
  2. Haz clic en Otro.
  3. Ingresa un valor para el texto o vincula el valor y considera lo siguiente:

    • Para ingresar texto, haz clic en el cuadro ariaLabel.
    • Para vincular el valor, haz clic en la flecha hacia abajo y selecciona la fuente.

Proporciona texto a los lectores de pantalla

Los lectores de pantalla anuncian muchos cambios en la IU de la aplicación, como cuando se abren un diálogo, una ventana emergente o un menú. Si la interfaz de tu aplicación cambia como resultado de alguna acción del usuario, por ejemplo, cuando se crea una fila de tabla o se abre un widget giratorio, los usuarios con discapacidad visual podrían no estar al tanto del cambio.

Para alertar a los usuarios, puedes agregar una secuencia de comandos que use la función app.accessibility.announce a fin de indicarle a un lector de pantalla que realice un anuncio como parte de la acción.

Por ejemplo, puedes crear una aplicación con una tabla. Para borrar un registro en la tabla, el usuario de la aplicación hace clic en un botón a fin de quitar una fila. Para hacer que un lector de pantalla anuncie que la fila desapareció (o no, si la acción no funciona), configura la acción onClick del botón como se muestra a continuación:

widget.datasource.deleteItem({
      success: function (record) {
        app.accessibility.announce(‘Record was deleted and removed from the table.');
        console.info('Record with ID ' + record.id + ' was deleted from the database.);
      },
      failure: function (error) {
        app.accessibility.announce("The record wasn't deleted. Please try again");
        console.info('Record with ID ' + record.id + ' couldn't be deleted.');
      }
    });
    

Este ejemplo usa funciones de devolución de llamada asíncronas para alertar al usuario sobre el éxito o fracaso de la acción.