Estándares y guías para la digitalización

Accesibilidad y diseño inclusivo

Diseño

Estos son los requerimientos obligatorios que todo servicio digital del Estado debe cumplir dentro de sus estándares de diseño accesible:

Suficiente contraste entre texto y fondo

Para que el texto sea leído fácilmente, debe diferenciarse del fondo sobre el que está escrito. Por ejemplo, si utilizas texto blanco sobre fondo amarillo, no habrá suficiente contraste y será difícil de leer. En ese caso, tendrías que optar por un fondo más oscuro, que permita distinguir claramente el texto.

Existen herramientas web que permiten medir este contraste, clasificándose en niveles. Es necesario que todos los textos cumplan con el nivel AAA, que implica un ratio de contraste de 7:1.

Tamaño mínimo de texto

El tamaño mínimo a utilizar es de 16px para el texto más importante que el usuario debe leer. Si se trata de texto complementario, puedes disminuir el tamaño a 14px. Esto permite que todas las personas, incluyendo aquellas con problemas de visión, lean el contenido del servicio sin dificultad.

No usar color como único medio para mostrar información

Es una práctica común utilizar el color rojo para mostrar errores en los servicios. Sin embargo, no todas las personas perciben los colores de la misma manera; por lo que es importante emplear también textos que expliquen los errores. Puedes acompañarlo de íconos de aspa (X) que muestran al usuario del error en ese campo, sin valerse únicamente por el color.

Elementos interactivos fácilmente identificables

Las personas que utilizan un servicio web nunca deben dudar si pueden hacer clic en un elemento. La manera estándar de diferenciar un enlace del resto de texto, por ejemplo, es ponerlo de color azul. También debes asegurarte de que los botones tengan formato de botón y que no hayan otros elementos (como títulos) que puedan ser confundidos por estos.

Opciones de navegación claras y consistentes

El menú de una página web debe ser igual en toda la página, usando etiquetas claras y descriptivas para cada opción. Adicionalmente, usa migas de pan o breadcrumbs para que el usuario sepa en qué parte del servicio se encuentra. Los títulos de cada página siempre deberán estar ubicados en el mismo espacio, logrando que el usuario los identifique fácilmente. La consistencia en el diseño facilitará la navegación del usuario en tu servicio, ya que sabrá qué significa cada elemento.

Etiquetas descriptivas en los formularios

Probablemente, la mayoría de servicios brindados por las instituciones públicas cuentan con un formulario. Es necesario que cada campo que le pidas completar al usuario esté acompañado por una etiqueta fácil de entender, que explique claramente lo que se espera que llene.

Retroalimentación fácil de identificar

Cuando una persona realiza una acción en un servicio, necesita saber que hay una respuesta. Por ejemplo, si envía un formulario, necesita ver una contestación (positiva o negativa). Si la respuesta del sistema no es automática, debes mostrar un indicador de espera o loader (en carga). Es importante que este se encuentre siempre cerca del elemento que ha causado la acción.

Diseño responsivo

Los servicios deben poder ser usados por todos, sin importar el dispositivo que utilicen; lo que se consigue con diseños responsivos. Esto significa que el diseño se adaptará a pantallas pequeñas, de celulares y tablets, para que el usuario acceda a todas las funcionalidades desde cualquier tipo de dispositivo, incluso en una computadora.

Limitar el uso de imágenes

Las imágenes demoran en cargar si la conexión a Internet del usuario es lenta. No uses imágenes decorativas (o en exceso) ya que en algunas zonas del país la señal de Internet es débil.

¿Cuándo utilizar imágenes en Gob.pe?

  • Úsalas si aportan un valor específico sobre el trámite o servicio del que trata tu contenido.
  • Si explica de manera simple algo que sería complejo decir con palabras.
  • Cuando las explicaciones textuales no son suficientes para que las personas entiendan el trámite o servicio.