a11y-prefs · guía para quien traduce
Un panel que hace la web legible para quien lo necesita
Qué es este proyecto, dónde vive, cómo se ve por dentro, y en qué consiste exactamente la ayuda que te estoy pidiendo.
No necesitas saber programar, ni usar GitHub, ni instalar nada. Esta página existe justamente porque el trabajo que te pido no es técnico: es decidir cómo se dicen las cosas en tu idioma.
Léela una vez de arriba abajo. Al final está la petición concreta.
Escribí hace tiempo un artículo sobre accesibilidad web en gobierno.
De ahí nació buena parte de las ganas de construir este proyecto — vale la pena leerlo para el contexto.
Qué es esto, en una frase
a11y-prefs es un panel de preferencias de lectura que una página web puede añadirse a sí misma.
Aparece como un botón redondo flotando en una esquina. Quien visita la web lo pulsa y elige lo que necesita para poder leer: la letra más grande, más separación entre líneas, más contraste, que se paren las animaciones, un cursor más visible. La página se ajusta al momento, y la elección se recuerda en su propio navegador para la próxima vez.
No lo decide la web. Lo decide quien está leyendo. Esa distinción es el proyecto entero, y vas a verla repetida por todas partes.
El alcance: qué tan real es esto
Te cuento esto porque cambia el peso de tu ayuda. Esto no es una maqueta ni algo que solo existe en el ordenador de alguien: es un programa publicado que cualquier persona del mundo puede descargar e instalar ahora mismo — y que la gente ya está descargando.
| Dónde vive | Qué es | Estado |
|---|---|---|
| npm | El almacén del que los programadores del mundo descargan piezas de código para meterlas en sus proyectos. Publicar aquí es ponerlo a disposición de cualquiera. | Publicado como a11y-prefs, versión 0.4.1.
133 descargas en los últimos 7 días. |
| GitHub | Donde vive el código a la vista de todo el mundo, con su historial completo. Cualquiera puede leerlo, copiarlo o proponer cambios. | github.com/EFEELE/a11y-prefs, con licencia
MIT: se puede usar en cualquier sitio, incluso comercial, sin pedir
permiso ni pagar nada. |
| WordPress | Un complemento para el sistema con el que está hecha buena parte de las webs del mundo, para que alguien sin conocimientos técnicos pueda instalarlo con dos clics. | Empaquetado y listo. |
Ese número de descargas es pequeño, y no quiero hacerlo parecer más grande de lo que es. Pero significa que hay páginas reales — que no controlo, que probablemente nunca voy a ver — mostrando este panel a gente real. El texto que tú escribas es el que esa gente va a leer. Nadie lo revisa después de ti: lo que me mandes es, literalmente, lo que sale publicado.
El proyecto es gratuito y de código abierto. Nadie cobra por esto, yo tampoco. No hay empresa detrás ni plan de convertirlo en un producto de pago.
Cómo se ve
Empecemos por el botón. Es lo único que se ve hasta que alguien lo pulsa. Quien instala el panel elige su forma y su posición, así que aparece de estas cuatro maneras:
La forma pill es la única que muestra texto: esa
palabra sale de la traducción. En las otras tres, el nombre del botón existe
igualmente, pero solo lo oye quien usa un lector de pantalla.
El panel abierto
Al pulsarlo se abre esto. Cada cuadrado es un ajuste; se pulsa y se aplica. Los que tienen niveles (como el tamaño del texto) van avanzando con cada pulsación y vuelven a apagarse al final.
Accesibilidad
El título del panel y los dos botones de la esquina: reiniciar todo y cerrar. Los tres son texto que traduces.
Las tarjetas. El nombre de cada ajuste es lo más importante de todo el encargo: es lo que la gente lee para decidir si le sirve.
Las rayitas marcan en qué nivel está un ajuste. Debajo aparece «Nivel 2 de 4», que también se traduce.
Cuando un ajuste está encendido, la tarjeta se pone azul y debajo dice «activado».
El pie es una promesa de privacidad: no se envía nada a ningún servidor, nunca.
Aquí se ven diez de los dieciséis ajustes; el panel real continúa hacia abajo con desplazamiento. Los nombres que aparecen son la traducción al español, que ya existe — la tuya ocupará exactamente ese hueco.
Qué hace cada ajuste, en la práctica
Esto es lo que no se puede adivinar leyendo una lista de palabras sueltas. A la izquierda, una página normal. A la derecha, la misma página con el ajuste encendido.
Tamaño del texto
Los cuatro niveles multiplican por 1,125 · 1,25 · 1,5 y 2.
Espaciado del texto
El nivel 2 no es un número inventado: es exactamente lo que exige el criterio WCAG 1.4.12, la norma internacional de accesibilidad web.
Contraste
Un texto con un enlace dentro.
Un texto con un enlace dentro.
Un texto con un enlace dentro.
Un texto con un enlace dentro.
Resaltar enlaces, títulos y campos
Un título de sección
Un párrafo con un enlace que hay que poder distinguir del resto.
Un título de sección
Un párrafo con un enlace que hay que poder distinguir del resto.
Muchas webs pintan los enlaces de un color apenas distinto al del texto. Si no distingues bien los colores, no hay forma de saber dónde se puede pulsar.
Alinear al inicio
Los que hay que ver en movimiento
Cuatro no se pueden enseñar en una imagen fija, y son justo los que más cuesta nombrar: la ayuda a la lectura (una regla o una máscara que sigue al ratón), el cursor grande, parar las animaciones y soltar las barras fijas — esas cabeceras que te siguen al bajar y que, con la letra al doble, se comen media pantalla. Para esos, usa la sección siguiente.
Pruébalo tú
Aquí abajo hay una web de mentira, con el panel de verdad funcionando dentro. Pulsa el botón azul de la esquina y toca lo que quieras: es el componente real, el mismo que se descarga de npm. Nada de lo que hagas sale de este recuadro.
Si el recuadro aparece vacío, no pasa nada: las figuras de arriba cuentan lo mismo. Prueba a activar «Contraste», luego «Espaciado» y luego «Soltar barras fijas» con la cabecera de la cafetería a la vista.
Lo que este proyecto NO es
Esto importa para traducir, así que no te lo saltes.
Existe un tipo de producto llamado overlay que promete que, con solo instalarlo, tu web pasa a ser accesible y a cumplir la ley. Es mentira, y es una mentira cara: en enero de 2025 la FTC — la agencia que protege a los consumidores en Estados Unidos — multó con un millón de dólares a accessiBe, una de esas empresas, justo por decir eso.
Las personas con discapacidad llevan años denunciando que estos productos les estorban más de lo que les ayudan. El resultado es que hoy, cualquier cosa que suene a overlay despierta desconfianza inmediata en la comunidad de accesibilidad.
a11y-prefs es otra cosa: no arregla la web, ayuda a quien la lee. La accesibilidad de verdad se arregla en el código y en los contenidos del sitio, y este panel no sustituye ese trabajo — así lo dice la documentación del proyecto, a propósito, en todos los sitios donde se presenta.
De ahí salen dos de las reglas de traducción que vienen ahora.
La ayuda que te pido
Son 35 cadenas de texto: todo lo que se lee en el panel. No es un proyecto de traducción, es un par de horas de cuidado.
Trabajarás sobre una hoja de cálculo que te paso aparte, con una fila por cadena. Escribes tu propuesta, me la devuelves, y yo la paso al código. No tienes que tocar nada más.
Por qué aquí las palabras pesan más de lo normal
Quien más probablemente abra este panel es justo quien menos margen tiene para sortear una etiqueta confusa. Alguien con baja visión leyendo al 200% de zoom. Alguien que usa un lector de pantalla y oye la etiqueta sin llegar a ver nunca el icono que tiene al lado. Alguien con una discapacidad cognitiva, para quien un giro ingenioso es un obstáculo y no un placer.
Así que: llano, corto, aburrido. La palabra más ordinaria de tu idioma le gana a la más precisa. Si un término es habitual en el software de tu idioma pero desconocido fuera de él, es el término equivocado.
Reglas que no están a discusión
Nunca
Ni «widget» ni «overlay». Busca la palabra de tu idioma que diga que la persona que visita elige.
Por la multa que acabas de leer: esas palabras ya no se pueden usar sin sonar sospechoso. Esto es un panel de preferencias, y el nombre tiene que dejarlo claro.
Nunca
No insinúes que el sitio pasa a ser accesible, conforme ni WCAG-lo-que-sea. Nada de «hace accesible este sitio», «versión accesible» ni «cumple con».
Es exactamente la afirmación por la que multaron a aquella empresa.
Siempre
Conserva {n} y {max} tal cual.
Muévelos donde la gramática los necesite; solo tienen que sobrevivir las
llaves y lo que va escrito dentro.
Son huecos: el programa los cambia por números reales. «Nivel {n} de {max}» se convierte en «Nivel 2 de 4».
Siempre
Mantente cerca del largo del inglés y sigue las convenciones de tu idioma para mayúsculas y puntuación.
Ya viste el tamaño de las tarjetas: son estrechas. Una etiqueta del doble de larga se parte en tres líneas justo cuando alguien puso la letra al doble — que es justo cuando más importa. Si tu idioma no puede ser tan corto, dímelo. No intentes que quepa a la fuerza.
Las 35 cadenas
ui.* es el mobiliario del panel. feature.* son los
ajustes. option.* son las opciones dentro de un ajuste que tiene
más que encendido y apagado. Las claves y el inglés se dejan tal cual: tu
traducción va en la hoja.
El panel
| Clave | Inglés | Dónde aparece |
|---|---|---|
ui.title | Accessibility | El título arriba del panel abierto |
ui.open | Accessibility options | Solo se oyeEl nombre del botón flotante que abre el panel |
ui.close | Close | La X de la esquina |
ui.reset | Reset all | La flecha circular: apaga todos los ajustes de golpe |
ui.statement | Accessibility statement | Enlace a la declaración de accesibilidad del sitio. Solo aparece si el sitio tiene una |
ui.on | on | Solo se oyeEl estado de un ajuste, dicho como «Cursor grande, activado» |
ui.off | off | Solo se oyeLo contrario |
ui.level | Level {n} of {max} | Lo que ves bajo las rayitas. Tamaño de texto va de 1 a 4, espaciado de 1 a 3 |
ui.didReset | Preferences reset | Solo se oyeSe anuncia al pulsar la flecha circular |
ui.hint | Your preferences are stored in this browser only. | La línea del pie. Es la promesa de privacidad |
Los ajustes
| Clave | Inglés | Qué hace |
|---|---|---|
feature.fontSize | Text size | Agranda el texto, en cuatro pasos |
feature.textSpacing | Text spacing | Abre el espacio entre letras, palabras y líneas, en tres pasos |
feature.contrast | Contrast | Cambia entre los tres tratamientos de color que viste arriba |
feature.dyslexia | Dyslexia-friendly font | Cambia la tipografía por una que a algunas personas disléxicas les resulta más fácil |
feature.links | Highlight links | Subraya los enlaces y los destaca |
feature.headings | Highlight headings | Marca los títulos para que se vea la estructura de la página |
feature.focusOutline | Visible focus | Marca dónde está el teclado al ir tabulando, para quien no usa ratón |
feature.stopAnimations | Stop animations | Congela animaciones y transiciones |
feature.readingHelp | Reading help | Una regla o una máscara que sigue al ratón mientras se lee |
feature.bigCursor | Big cursor | Agranda el puntero del ratón |
feature.hideImages | Hide images | Oculta imágenes y vídeos, dejando solo el texto |
feature.alignStart | Align to start | Deshace el texto justificado y centrado |
feature.newTab | Mark new-tab links | Marca los enlaces que abren una pestaña nueva, para que no sorprendan |
feature.fields | Outline form fields | Contornea los campos de formulario para poder encontrarlos |
feature.noSticky | Unstick fixed bars | Suelta las cabeceras que te siguen al bajar por la página |
feature.selection | High-contrast selection | Fuerza colores legibles al seleccionar texto con el ratón |
Las opciones
| Clave | Inglés | Notas |
|---|---|---|
option.contrast.high | High | Más contraste, mismos colores |
option.contrast.invert | Inverted | Colores invertidos: lo claro se vuelve oscuro |
option.contrast.grayscale | Grayscale | Sin color |
option.readingHelp.guide | Guide | Una barra que sigue al puntero, como una regla bajo el renglón |
option.readingHelp.mask | Mask | Todo atenuado salvo una franja alrededor del puntero |
En qué punto está cada idioma
en · inglés
Estás editando el original, no traduciendo. Todos los demás idiomas se escriben a partir de tu texto, así que una cadena inglesa torpe se propaga. Dilo si una es vaga, si dos se pisan, o si una etiqueta no coincide con lo que hace el ajuste: eso es lo más útil que puedes devolver.
ca · catalán
Nuevo, se escribe desde cero. No existe nada todavía. Marcas el tono del idioma.
ja · japonés
Nuevo, y con dos preguntas para ti.
Dos ajustes se diseñaron pensando en el alfabeto latino.
feature.dyslexia cambia a unas tipografías que no hacen nada
con el texto japonés: decide si la etiqueta debería decir otra cosa, o si
lo honesto es que ese ajuste no aparezca en una interfaz japonesa.
feature.textSpacing separa las letras, que en japonés no
significa lo mismo. Las dos son preguntas de producto disfrazadas de
traducción: tu respuesta cambia el programa, no solo el texto.
it · italiano
Ya existe, está en revisión. Discrepa con total libertad. Lo escribió alguien que no es hablante nativo.
Cómo devolverlo, y qué pasa después
Rellena la hoja, una fila por cadena, y usa la columna de notas con generosidad: una traducción dudosa con una nota vale más que una segura sin ella. Si prefieres trabajar en un archivo de texto, en papel, o hablarlo en una llamada, también vale.
Yo paso tus cadenas al código, una comprobación automática confirma que no falta ninguna, y sale en la siguiente versión publicada. Tu nombre va en el historial del proyecto y en los créditos, salvo que prefieras que no: dime qué prefieres y cómo quieres que te nombre.
Nada de lo que envíes es definitivo. Si dentro de seis meses ves algo mal, es un arreglo de dos minutos.
Y más adelante
El plan es traducir también la documentación del proyecto — la página que ve quien va a instalarlo. Es bastante más texto y más técnico, así que va después y por separado. Si el panel te ha resultado llevadero y te apetece seguir, ahí hay sitio; y si prefieres quedarte solo con estas 35, perfecto también.
Anexo: cómo se instala
Por curiosidad, o por si lo miras con quien lleve tu web. Quien instala esto hace una de estas tres cosas:
- Pegar una línea en el código de su web, que carga el panel desde internet.
- Instalarlo como pieza de un proyecto ya montado, con las herramientas habituales de desarrollo.
- Activar el complemento de WordPress y elegir la forma, el color y la posición desde una pantalla de ajustes, sin tocar código.
En los tres casos el resultado es el mismo botón que has visto. El idioma se elige solo: el panel mira en qué idioma está declarada la página y usa el que corresponda, y si no hay traducción para ese idioma, recurre al inglés. Por eso añadir un idioma nuevo no obliga a publicar una versión nueva del programa.