Saltar al contenido principal

Lista de comprobación

Comprueba si tu sitio web sigue las pautas de accesibilidad.

Diseño

    • Utiliza una fuente clara y que no produzca confusión entre caracteres parecidos, como por ejemplo: 1, i y l.
    • Utiliza un tamaño de fuente relativo (rem) en lugar de fijo (píxeles) para que el usuario pueda modificar el tamaño en las opciones del navegador.
  • Se recomienda un espacio entre líneas de 1.5 veces el tamaño de fuente.

  • La longitud de línea no debería ser superior a 80 caracteres.

  • Evita justificar el texto. La justificación del texto produce grandes espacios entre las palabras que pueden dificultar la lectura.

    • No subrayes el texto, podría confundirse con un enlace.
    • Evita escribir en mayúsculas, dificulta la lectura.
    • Asegúrate de que hay suficiente contraste entre el color de texto y el color de fondo en todos los elementos del sitio. Para comprobar el contraste puedes utilizar una herramienta como Contrast Ratio.
    • Evita indicar información importante utilizando solo el color.
  • Los elementos que cumplen una misma función deberían estar identificados con las mismas etiquetas y seguir un mismo estilo.

  • Comprueba que todos los elementos del sitio web se adaptan a cualquier tamaño de pantalla.

Para más información sobre diseño accesible consulta la sección de Diseño.

Contenido

  • Utiliza palabras simples y frases cortas. Evita el lenguaje técnico a menos que se trate de un texto dirigido a expertos.

    • Utiliza encabezados para organizar el contenido y asegúrate de que siguen un orden jerárquico correcto.
    • Divide el texto en párrafos para facilitar su lectura. Evita el uso de párrafos vacíos para crear separación vertical.
    • Utiliza el elemento lista para agrupar elementos relacionados.
  • Identifica el idioma tanto de la página como de los cambios que pueda haber en el contenido.

  • Describe el contenido o la función de las imágenes utilizando el atributo alt. En este artículo puedes ver más información sobre el texto alternativo de las imágenes.

    • Ofrece subtítulos sincronizados como alternativa al audio de los vídeos.
    • Ofrece una transcripción textual para los contenidos de audio y vídeo.
    • Incluye el título de la tabla con el elemento caption.
    • Identifica los encabezados de una tabla con elemento th
    • Indica si los encabezados afectan a filas o a columnas con el atributo scope.
    • Identifica cada campo de un formulario con su correspondiente etiqueta label.
    • Ordena los campos de manera que sigan un orden de tabulación lógico.
    • Agrupa los campos relacionados mediante el elemento fieldset.
    • Proporciona instrucciones que ayuden a los usuarios a rellenar los formularios.
    • Identifica los campos obligatorios.
    • Valida los datos antes de enviar el formulario y notifica cualquier error al usuario.

Para más información sobre contenido accesible consulta la sección de Contenido.

Navegación

  • Utiliza un título de página (title) descriptivo. El título de página es el primer elemento que lee un lector de pantalla.

  • Identifica las diferentes regiones de una página con las etiquetas estructurales de HTML y los atributos ARIA landmark roles.

    • Utiliza textos de enlace descriptivos que indiquen al usuario a dónde irá al hacer clic.
    • Subraya los enlaces que están dentro de un texto para que sean fácilmente reconocibles (no utilices únicamente color).
  • Proporciona información al usuario acerca de dónde se encuentra dentro de un sitio web.

  • Proporciona más de un camino para localizar una página dentro de un sitio web. Ejemplos: mapa del sitio, función de búsqueda, tablas de contenidos.

  • Incluye enlaces que permitan saltar los bloques de contenido que se repiten en cada página, como por ejemplo el menú de navegación.

  • Comprueba que tu sitio web es navegable utilizando únicamente el teclado.

Para más información sobre contenido accesible consulta la sección de Navegación.