[[en]]Imagine trying to access digital content, but the interface is so cluttered, confusing, or poorly designed that it’s nearly impossible to use. For many people with disabilities, this is an all-too-common experience. That’s where accessibility comes in.[[es]]Imaginá que intentás acceder a contenido digital, pero la interfaz está tan cargada, confusa o mal diseñada que se hace casi imposible de usar. Para muchas personas con discapacidad, esta es una experiencia diaria. Ahí es donde entra la accesibilidad.
[[en]]But how exactly does one define accessibility in the context of digital design?[[es]]Pero, ¿cómo definimos accesibilidad en el contexto del diseño digital?
[[en]]Designing for accessibility means ensuring that everyone can engage with and enjoy the digital world, regardless of their abilities. Just like a great party host, designers must create inclusive experiences that welcome everyone. By prioritizing accessibility, we can ensure that nobody is left out.[[es]]Diseñar con accesibilidad en mente significa asegurarse de que todas las personas puedan interactuar con y disfrutar del mundo digital, sin importar sus capacidades. Igual que un buen anfitrión, quienes diseñamos tenemos que crear experiencias inclusivas que reciban a todo el mundo. Cuando priorizamos la accesibilidad, nos aseguramos de que nadie quede afuera.
[[en]]There’s a common myth that adding accessibility to the design process is expensive. Well, that, my friend, is just a myth. Incorporating it from the very beginning is cheaper, easier, and more effective than fixing it later as a separate project.[[es]]Hay un mito bastante instalado de que sumar accesibilidad al proceso de diseño es caro. Bueno, eso, amigos y amigas, es solo un mito. Incorporarla desde el principio es más barato, más fácil y mucho más efectivo que arreglar todo después como un proyecto separado.
[[en]]Bonus:[[es]]Bonus: [[en]]Meeting accessibility standards will also[[es]]Cumplir con los estándares de accesibilidad también va a [[en]]indirectly help your SEO [[es]]ayudar indirectamente a tu SEO
[[en]]Accessibility is not about a checklist, it’s about people.[[es]]La accesibilidad no se trata de una checklist, se trata de personas.
[[en]]The Curb-Cut Effect[[es]]El “Curb-cut effect”
[[en]]The magical thing about designing for accessibility is that we’re not only helping the 16% of the population that have disabilities. We might, in fact, be helping everyone. Too ambitious? Maybe not. And we have the curb-cut effect to thank for that.[[es]]Lo mágico de diseñar con accesibilidad es que no solo estamos ayudando al 16% de la población que tiene alguna discapacidad. En realidad, podemos estar ayudando a todas las personas. ¿Demasiado ambicioso? Tal vez no. Y de eso se trata el “curb-cut effect”.
[[en]]The curb-cut effect shows that when we design for disabilities, we make things better for everyone. The term comes from curb cuts (shocking, I know) — those small ramps added to sidewalks for wheelchairs. But they’ve also proved useful for people pushing strollers, travelers with suitcases, cyclists, and anyone with temporary mobility challenges.[[es]]El “curb-cut effect” muestra que cuando diseñamos para un público con discapacidades, mejoramos las cosas para todo el mundo. El término viene de las rampas en las esquinas de las veredas, pensadas originalmente para sillas de ruedas. Pero también resultaron súper útiles para personas con cochecitos, turistas con valijas, ciclistas y cualquiera que tenga una limitación de movilidad, aunque sea temporal.
[[en]]It’s also worth remembering that disabilities can be contextual. A cracked phone screen or glare from sunlight on a laptop can affect accessibility, even for people without a permanent visual impairment.[[es]]También vale recordar que algunas discapacidades pueden ser contextuales. Una pantalla de celular rota o el reflejo del sol en la notebook pueden afectar la accesibilidad incluso en personas sin una discapacidad visual permanente.
[[en]]Ok, cool. But where do I start?[[es]]Ok, buenísimo. Pero, ¿por dónde empiezo?
[[en]]In May 1999, the Web Content Accessibility Guidelines (WCAG) 1.0 were established. They set the international standards that still guide how we design for accessibility on the web. And when I say guidelines, I also mean legal requirements in some countries.[[es]]En mayo de 1999 se publicaron las Web Content Accessibility Guidelines (WCAG). Estas pautas marcaron los estándares internacionales que todavía hoy guían cómo diseñamos para la accesibilidad en la web. Y cuando decimos pautas, en algunos países también estamos hablando de requisitos legales.
[[en]]The WCAG established three conformance levels: A, AA and AAA.[[es]]Las WCAG definen tres niveles de conformidad: A, AA y AAA.
[[en]]Level A[[es]]Nivel A
[[en]]Minimum compliance, providing text alternatives for non-text content, ensuring compatibility with assistive technologies, and enabling full keyboard navigation.[[es]]Es el nivel mínimo. Incluye ofrecer alternativas textuales para contenido no textual, asegurar compatibilidad con tecnologías de asistencia y permitir la navegación completa con teclado.
[[en]]Level AA[[es]]Nivel AA
[[en]]Builds on Level A, adding requirements like a minimum contrast ratio of 4.5:1 between text and background, consistent navigation, and overall accessibility improvements.[[es]]Se apoya en el nivel A y suma requisitos como una relación de contraste mínima de 4.5:1 entre texto y fondo, navegación consistente y mejoras generales de accesibilidad.
[[en]]Level AAA[[es]]Nivel AAA
[[en]]The highest level includes Level A and AA plus additional requirements, such as a 7:1 contrast ratio, sign language interpretation for videos, and a ninth-grade reading level for content.[[es]]Es el nivel más alto. Incluye todo lo de los niveles A y AA, más requisitos adicionales como contraste 7:1, interpretación en lengua de señas para videos y un nivel de lectura equivalente a noveno de escuela para el contenido.
[[en]]The recommended (and often legally required) standard is AA, which ensures content meets a solid level of inclusivity.[[es]]El estándar recomendado (y muchas veces exigido por ley) es AA, que asegura un nivel sólido de inclusión.
[[en]]Now the fun part, let’s talk about designing for accessibility[[es]]Ahora sí, lo divertido: diseñar para la accesibilidad
[[en]]Theory is great, right? Right?! But when it’s time to actually design, digging through the WCAG site can feel like a maze. So here’s a simpler starting point.[[es]]La teoría está buenísima, ¿no? ¿No? Pero cuando llega el momento de diseñar de verdad, perderse en el sitio de las WCAG puede ser un poco abrumador. Así que acá va un punto de partida más simple.
[[en]]The WCAG created their content under four important principles: The user interface needs to be Perceivable, Operable, Understandable and Robust, ensuring everyone can interact with digital products, whether they have visual, physical, or neurodiverse conditions.[[es]]Las WCAG organizan su contenido en torno a cuatro principios clave. La interfaz tiene que ser Perceptible, Operable, Comprensible y Robusta, para que cualquier persona pueda interactuar con productos digitales, ya tenga condiciones visuales, físicas o de neurodiversidad.
[[en]]Let’s make that more tangible:[[es]]Veamos cada una de forma más concreta:
[[en]]Perceivable[[es]]Perceptible
[[en]]Content must be available to all users. If key information appears in an image, that information should also be accessible via an <alt> description. Context matters too, ever tried to watch a video in a quiet library? Captions make that possible.[[es]]El contenido tiene que estar disponible para todas las personas usuarias. Si aparece información clave en una imagen, esa información también tiene que ser accesible mediante una descripción alt. El contexto también importa: ¿alguna vez intentaste ver un video en una biblioteca o en un lugar donde no podés activar el audio? Los subtítulos hacen que eso sea posible.
[[en]]Operable[[es]]Operable
[[en]]Users should be able to navigate and use every feature via keyboard, not just a mouse. Try it on this post by using your tab key. Ideally, you won’t get stuck anywhere.[[es]]Las personas tienen que poder navegar y usar todas las funciones con el teclado, no solo con el mouse. Probalo en este mismo artículo usando la tecla Tab. Idealmente no deberías quedar “atrapado” en ningún elemento.
[[en]]Understandable[[es]]Comprensible
[[en]]Interfaces should behave predictably. Consistency in navigation and components helps users recognize patterns and feel comfortable moving through your site.[[es]]Las interfaces deberían comportarse de forma predecible. Mantener patrones claros y consistentes en la navegación y los componentes ayuda a que las personas reconozcan cómo está estructurado el sitio y se sientan cómodas moviéndose por él.
[[en]]Robust[[es]]Robusta
[[en]]Code matters. A well-structured HTML with semantic tags ensures that assistive technologies can read and communicate content accurately.[[es]]El código importa. Un HTML bien estructurado, con etiquetas semánticas correctas, asegura que las tecnologías de asistencia puedan leer y comunicar el contenido de forma precisa.
[[en]]Seems like a very straightforward starting point, doesn’t it?[[es]]Suena a un punto de partida bastante directo, ¿no?
[[en]]Let’s dive into examples of best practices[[es]]Veamos algunos ejemplos de buenas prácticas
[[en]]Info and relationships[[es]]Información y relaciones
[[en]]Preserve the integrity of information when changing between visual or auditory formats. For example, using larger, bold headers distinguishes them from body text, making hierarchy clear for everyone.[[es]]Es importante preservar la integridad de la información cuando cambiamos entre formatos visuales o auditivos. Por ejemplo, usar títulos más grandes y en negrita para distinguirlos de los párrafos ayuda a dejar clara la jerarquía de contenido para todas las personas.
[[en]]Error identification[[es]]Identificación de errores
[[en]]When input errors can be detected automatically, highlight them clearly and provide a textual explanation, as demonstrated in the example below.[[es]]Cuando el sistema puede detectar automáticamente errores en campos de entrada, es clave destacarlos de forma clara y explicar el problema mediante texto, como se ve en el ejemplo de abajo.
[[en]]Focus order[[es]]Orden de foco
[[en]]Elements that receive focus should follow a logical, meaningful sequence during navigation.[[es]]Los elementos que reciben foco durante la navegación deberían seguir una secuencia lógica y tener sentido para la persona usuaria.
[[en]]Finally, some basic standards to keep in mind[[es]]Por último, algunos estándares básicos a tener presentes
[[en]]The W3C also developed accessibility standards that help make digital experiences more inclusive. Here are a few to start with:[[es]]La W3C también desarrolló estándares de accesibilidad que ayudan a que las experiencias digitales sean más inclusivas. Algunos buenos puntos para empezar:
[[en]]Color contrast[[es]]Contraste de color
[[en]]People with visual impairments may struggle to perceive low-contrast interfaces. Use high-contrast colors, clear visual cues, and descriptive text alternatives.[[es]]Las personas con baja visión o dificultades visuales pueden tener problemas para percibir interfaces con poco contraste. Usar colores con buen contraste, señales visuales claras y textos alternativos descriptivos mejora muchísimo la experiencia.
[[en]]As illustrated in the example below, contrast is measured by comparing the luminance of a foreground and background color. For smaller text (below 24px), a minimum ratio of 4.5:1 is recommended; for larger text, 3:1 is acceptable.[[es]]Como se muestra en el ejemplo, el contraste se mide comparando la luminancia del color de frente y de fondo. Para texto chico (menos de 24 px), se recomienda una relación mínima de 4.5:1. Para texto más grande, 3:1 es aceptable.
[[en]]Text size and zooming[[es]]Tamaño de texto y zoom
[[en]]Font sizes play a crucial role in web accessibility. To ensure optimal legibility, be aware of the font sizes you use.[[es]]El tamaño de fuente juega un papel clave en la accesibilidad web. Para asegurar una buena legibilidad, es importante prestar atención a los tamaños que usamos.
- [[en]]Use a recommended size of 16px for body text, depending on the target audience and device.[[es]]Usar un tamaño recomendado de 16 px para el cuerpo de texto, según la audiencia y el dispositivo.
- [[en]]Avoid default fonts smaller than 12px.[[es]]Evitar tamaños por defecto menores a 12 px.
- [[en]]Ensure users can zoom text up to 200% — flexible layouts help accommodate this.[[es]]Asegurar que las personas puedan aumentar el tamaño del texto hasta un 200%; los layouts flexibles ayudan a soportar esto.
[[en]]Text spacing[[es]]Espaciado de texto
[[en]]Besides creating a clear visual structure with the help of headings, paragraphs, and lists, there are a few other essential details to consider when improving the readability of your content:[[es]]Además de crear una estructura visual clara con títulos, párrafos y listas, hay algunos detalles importantes a tener en cuenta para mejorar la lectura del contenido:
- [[en]]Line height: Line height or line spacing (distance between baselines of text) is set to at least 1.5x the font size.[[es]]Interlineado: la altura de línea (distancia entre las líneas de texto) debería ser de al menos 1,5× el tamaño de la fuente.
- [[en]]Paragraphs spacing: Spacing following paragraphs is set at least 2x the font size.[[es]]Espaciado entre párrafos: el espacio después de cada párrafo debería ser de al menos 2× el tamaño de la fuente.
- [[en]]Letter spacing: Letter spacing or kerning (distance between two letters) is set at least 0.12x the font size.[[es]]Espaciado entre letras: el espaciado (o kerning) debería ser de al menos 0,12× el tamaño de la fuente.
- [[en]]Word spacing: Word spacing or tracking (the space throughout the entire word) is set at least 0.16x the font size.[[es]]Espaciado entre palabras: el espaciado (o tracking) debería ser de al menos 0,16× el tamaño de la fuente.
[[en]]So, are you implementing accessibility throughout your design process?[[es]]Entonces, ¿estás incorporando accesibilidad en tu proceso de diseño?
[[en]]As UX designers, we have the power to create inclusive experiences by integrating accessibility from the start, not as a quick fix later on.[[es]]Como diseñadores y diseñadoras UX, tenemos la posibilidad de crear experiencias inclusivas si integramos la accesibilidad desde el inicio, y no como un parche rápido al final.
[[en]]Ready to embrace the power of accessibility? Let’s dive in together[[es]]
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
