Guía de ClaudeNivel 3 · AutomatizarLevel 3 · Automating
Accesible desde el principioAccessible from the start
Seis reglas que ahora van en cada app, y un error que se coló igual.Six rules that now go into every app, and a bug that slipped through anyway.
Hacer una pantalla accesible después es caro, porque hay que deshacer decisiones. Hacerla accesible antes sale casi gratis: alcanza con que Claude sepa, desde el arranque, qué reglas seguir. Las fui juntando app por app, y confieso que todavía no están en un solo lugar (juntarlas está en la lista de pendientes, debajo de otras cuarenta cosas).
Las seis reglas
Tocables de 44 píxeles. Todo lo que se aprieta mide al menos 44 por 44. Es la pauta de Apple, y sale de pedirle criterio de diseño con una app que tenía botones de 20.
Contraste medible. Las pautas de accesibilidad web (WCAG) piden al menos 4,5 a 1 entre el texto y el fondo. El gris tenue de una de mis apps da 5,3, medido. Antes lo elegía a ojo, y a ojo siempre me parece bien.
Movimiento con permiso. Si el sistema operativo de quien usa la app pide menos animación, la app respeta esa preferencia (prefers-reduced-motion). Las animaciones se apagan y la información sigue ahí.
El color nunca es la única señal. Un estado en rojo tiene que decir también “error” con texto o con un ícono. El texto manda; el color y el ícono acompañan. Quien no distingue rojo de verde, o mira la pantalla con el brillo al mínimo, lee igual.
Avisos que no gritan. Cuando algo cambia sin que nadie toque nada, como un mensaje de “guardado”, va en una región con aria-live="polite": el lector de pantalla lo anuncia cuando termina de hablar, no encima.
Sin presión de racha. Nada de rachas (dan ansiedad) ni de confeti o sonidos por defecto (son ruido). Una app puede ser agradable sin hacerte sentir que le debés algo.
El error que se coló
Hubo uno, y está en el registro de calidad, con fecha del 9 de octubre. En la app de mi diario, una recarga automática redibujaba la pantalla y se llevaba el campo donde estaba escribiendo. Con el perfil a medio editar, lo escrito se perdía. Parecía un detalle de programación y era exactamente lo contrario de una app amable.
La regla nueva es corta: si hay un campo con el foco, no se redibuja. Y si hay que redibujar, el foco vuelve adonde estaba.
Cómo se pide
No hace falta saber de accesibilidad para pedirla. Alcanza con copiar la lista de arriba en tu archivo general o en el del proyecto, y pedir que la revisión final la repase punto por punto. Lo que Claude no puede hacer es probar con un lector de pantalla real; eso lo tengo pendiente, y lo digo para que no creas que con la lista alcanza.
El prompt
Revisá esta app contra estas reglas de accesibilidad: tocables de al menos 44 píxeles, contraste del texto tenue cercano a 5,3 a 1, respeto de prefers-reduced-motion, el color nunca como única señal, avisos con aria-live polite, el foco que no se pierde al redibujar, y nada de rachas ni confeti. Para cada regla decime si se cumple, con archivo y línea, y qué falla. Aclará qué no pudiste verificar sin un lector de pantalla. Proponé los arreglos como diff y no guardes nada sin que lo apruebe.
Making a screen accessible afterward is expensive, because you have to undo decisions. Making it accessible beforehand costs almost nothing: all it takes is for Claude to know, from the start, which rules to follow. I've been collecting them app by app, and I confess they're still not in one place (collecting them is on the to-do list, under forty other things).
The six rules
Tap targets of 44 pixels. Everything you press measures at least 44 by 44. It's Apple's guideline, and it came out of asking for design judgment on an app that had 20-pixel buttons.
Measurable contrast. The web accessibility guidelines (WCAG) ask for at least 4.5 to 1 between text and background. The muted gray in one of my apps comes out at 5.3, measured. I used to pick it by eye, and by eye it always looks fine to me.
Motion with permission. If the operating system of whoever's using the app asks for less animation, the app respects that preference (prefers-reduced-motion). The animations switch off and the information stays right there.
Color is never the only signal. A status in red also has to say “error,” with text or an icon. Text leads; color and icon go along. Someone who can't tell red from green, or who's looking at the screen with the brightness at minimum, reads it just the same.
Alerts that don't shout. When something changes without anyone touching anything, like a “saved” message, it goes in a region with aria-live="polite": the screen reader announces it when it finishes talking, not on top of it.
No streak pressure. No streaks (they cause anxiety), and no confetti or sounds by default (they're noise). An app can be pleasant without making you feel you owe it something.
The bug that slipped through
There was one, and it's in the quality log, dated October 9. In my diary app, an automatic reload redrew the screen and took away the field I was typing in. With a profile half edited, what I'd written was lost. It looked like a programming detail and it was exactly the opposite of a friendly app.
The new rule is short: if a field has focus, it doesn't get redrawn. And if it has to be redrawn, focus goes back to where it was.
How to ask for it
You don't need to know about accessibility to ask for it. Copying the list above into your general file or the project's is enough, and then asking for the final review to go through it point by point. What Claude can't do is test with a real screen reader; that's still pending for me, and I'm saying so you don't think the list is enough.
The prompt
Review this app against these accessibility rules: tap targets of at least 44 pixels, muted-text contrast close to 5.3 to 1, respect for prefers-reduced-motion, color never as the only signal, alerts with aria-live polite, focus that isn't lost on redraw, and no streaks or confetti. For each rule tell me whether it's met, with file and line, and what fails. Say what you couldn't verify without a screen reader. Propose the fixes as a diff and don't save anything until I approve it.