Acce­si­bi­li­dad

Toda persona debería poder utilizar este sitio web, independiente de sus capacidades. Para lograr este objetivo se implementaron funciones de accesibilidad web, habilitadas de forma predeterminada, que otorgan vías alternativas para desplazarse por el sitio y acceder a los contenidos.

Estas funciones se diseñaron siguiendo las Directrices de Accesibilidad para el Contenido Web (o WCAG en inglés) 2.1 Nivel AA, publicadas por la Iniciativa de Accesibilidad Web del Consorcio World Wide Web. Esto debe considerarse como un trabajo en progreso.

Sobre esto, algunas consideraciones:

Se implementaron dos familias tipográficas: la principal se llama Atkinson Hyperlegible, un tipo de letra redonda sin serifas en versiones regular y negrita, pensada para títulos, cabeceras y párrafos (como este). Adicionalmente, se usó la fuente tipográfica IBM Plex Mono, una monoespaciada en versión regular, para mostrar código de programas y detalles como representaciones de teclas o ciertos caracteres.

Baja visión

La fuente Atkinson Hyperlegible fue encargada por el Braille Institute of America para entregar “mayor legibilidad y facilidad de lectura para los lectores con baja visión”^[1], ya que los caracteres son notoriamente distintos entre sí, permitiendo la lectura incluso por personas con muy baja visión.

Dislexia

Sobre el efecto de Atkinson Hyperlegible en personas con dislexia, los desarrolladores mencionan que “La dislexia y la baja visión no están necesariamente relacionadas. Ambas causan dificultades de lectura, pero de manera diferente. La diferenciación de los caracteres es importante para ambas, pero aquí nos centramos más en la baja visión”^[2]. Además, algunos estudios han concluido que “no hay evidencias de que ayuden a niños o adultos a leer más rápido y con menos errores”^[3].

De todas formas, se evitó de forma intencional el uso de la letra cursiva u oblicua, la que suele causar problemas de lecturas en personas con dislexia, con baja visión, o en adultos mayores, optando por usar negritas o comillas en su lugar para destacar texto.

Contraste de color

La elección de la paleta de colores tuvo como prioridad conseguir un alto contraste entre el texto y el fondo. Para determinar esto se empleó la herramienta Color Contrast Checker de Coolors.

Enlaces

Con excepción de algunos enlaces internos (# y ↑), la mayoría de los enlaces distinguen, en forma y color, entre enlaces no visitados, enfocados (con el cursor o el teclado), activos y visitados.

Este es el esquema de colores de los enlaces según sus diferentes estados:

Por otra parte, los enlaces externos, es decir, aquellos que apuntan a sitios fuera del dominio filipo.neocities.org, están demarcados con una flecha oblicua (↗) a su derecha:

Una excepción son los enlaces de las direcciones de correo y chat, las que no cuentan con este ícono para evitar copiarlo por error.

Los enlaces para descargar archivos también están demarcados con una flecha hacia abajo (⬇️) a su derecha:

Desplegables

Cierto contenido requiere interactuar con el usuario, como los menús desplegables que contienen el índice de las páginas. En estos casos, un triángulo negro hacia abajo (▼) indica que el contenido se puede plegar o cerrar, y un triángulo negro hacia la derecha (▶) indica que el contenido se puede desplegar o abrir. Por defecto, los desplegables se encuentran cerrados.

Sobre los textos, siempre que fue posible se optó por usar un lenguaje claro y conciso.

Igualmente, cuando fue razonable, se evitó el uso de abreviaturas o siglas, optando por la escritura completa del término.

Todas las figuras (imágenes, audios o videos con información semántica) cuentan con una leyenda visible (elemento “figcaption”) bajo el contenido, más una descripción invisible para lectores de pantalla (atributo “alt”).

El contenido audiovisual o animado no se reproduce de forma automática, y el material que pueda resultar perjudicial para personas con epilepsia fotosensible cuenta con una advertencia clara y visible tanto al interior del material, al inicio en obras audiovisuales, como de forma externa, en la página.

Contenido decorativo como ciertas imágenes o emojis con poca o nula relevancia semántica están marcados con el atributo “aria-hidden” para ser ignorados por lectores de pantallas.

Se destaca que el sitio funciona incluso sin soporte de imágenes o contenido multimedia. Si bien no es la forma ideal de usar el sitio, personas con escasa o nula visión cuentan con alternativas textuales para describir contenido visual, audiovisual o sonoro.

Las cabeceras de páginas cuentan con un menú de migas de pan o breadcrumb, sobre el título, el que permite identificar el nivel o subnivel en páginas anidadas (ejemplo: Inicio > Acerca de > Mapa del sitio), para volver a niveles superiores rápidamente.

Bajo el título está el menú de navegación principal desde donde se puede acceder a las páginas principales.

Cada artículo con dos o más secciones cuenta con un índice desplegable (abierto por defecto) que permite saltar entre secciones.

Consejo: al presionar la tecla tabulador o [Tab ↹] inmediatamente después de entrar en una página, se desplegará un enlace sobre la cabecera que permite saltar al índice del artículo o, si no hay índice, al encabezado de la sección.

Las secciones y subsecciones cuentan con enlaces permanentes o permalinks (#) para ser enlazadas desde sitios externos, y para volver a la cabecera (↑).

Igualmente, el pie de página cuenta con un enlace para subir a la cabecera de la página.

Toda sección con contenido semántico debería poder ser alcanzada usando tanto el ratón o mouse como el teclado.

Las páginas están estructuradas usando elementos semánticos de HTML 5 tales como: cabeceras, pie de página, secciones, encabezados, citas y abreviaturas, entre otros.

De igual modo, las direcciones de las páginas (los URL) tienen nombres significativos para reforzar la ubicación al navegar por el sitio.

Todo contenido en idioma distinto al español fue identificado con el atributo "lang", y los enlaces que apuntan a contenido en otro idioma con el atributo "hreflang".

Por último, al comienzo de cada artículo y enmarcado con líneas discontinuas, se describe de forma acotada el contenido de la página.

Esta es una lista de funciones que actualmente no están disponibles, pero están contempladas para ser implementadas a futuro:

• Versión en audio de los textos de secciones y figuras
• Accesos directos para secciones y enlaces
• Sistema para aumentar o reducir el tamaño del texto
• Paleta de colores optimizada para personas con otros tipos de daltonismo
• Glosario de términos técnicos o complejos
• Versión para imprimir (a color y en blanco y negro, con y sin imágenes)
• Otras

Se aceptan sugerencias y comentarios.