Prefacio

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: translation-feedback@oreilly.com

Hace unos años, di una charla sobre accesibilidad web en un meetup. Después, uno de los asistentes me preguntó por qué me especializaba en accesibilidad: ¿es porque yo o alguien cercano a mí tiene una discapacidad? Cuando respondí "No", me miraron sorprendidos. No entendían cómo alguien no afectado personalmente podía estar interesado en hacer sitios web accesibles. Les expliqué que es porque me preocupo por las personas y por la calidad.

Como desarrolladores, nos enfrentamos a retos prácticos todos los días. A menudo, estamos tan centrados en la parte técnica del desarrollo que olvidamos el verdadero objetivo de nuestros trabajos. No se trata de resolver problemas técnicos, sino de construir productos para seres humanos. Lo que hacemos es muy técnico en su esencia, pero las consecuencias de nuestras decisiones son muy humanas: afectan mucho a la vida de las personas, a su acceso a la información y a su participación en la sociedad.

Al igual que las personas tienen diferentes preferencias, necesidades, capacidades, discapacidades y hábitos, sus enfoques para acceder y consumir contenidos web también son diferentes. Desde el momento en que comprendí esto, hacer que los sitios web fueran accesibles no fue simplemente una opción para mí: se convirtió en algo obligatorio. Preocuparse por la accesibilidad significa tener en cuenta la diversidad y, por tanto, proporcionar acceso al mayor número de personas posible. Suena obvio (¡porque lo es!), pero a veces es necesario decir lo obvio para aceptarlo.

Lo que hace que la accesibilidad sea técnicamente interesante, además de su naturaleza humana, es su complejidad, alcance e interrelación con otras disciplinas de la web. Para hacer sitios web accesibles, necesitas conocimientos básicos de diseño de interfaz de usuario (UI), experiencia de usuario (UX), usabilidad, rendimiento, estrategia de contenidos, optimización para motores de búsqueda (SEO) y seguridad. Un sitio web con mal rendimiento es inaccesible, una mala UX suele significar una mala UX para todos, un HTML mal escrito es malo para el SEO y la accesibilidad, etc.

La accesibilidad no sólo afecta a las distintas disciplinas del desarrollo y el diseño web, sino que las conecta intrínsecamente. Por tanto, hacerlo bien requiere conocimientos e interés en una amplia gama de disciplinas. Eso es un reto, y muchos desarrolladores web ven la accesibilidad como una carga desalentadora. Sin embargo, superar ese obstáculo puede ser emocionante y gratificante, independientemente de la etapa que hayas alcanzado en tu carrera.

Este libro tiende un puente entre la naturaleza técnica del desarrollo web y su impacto en los seres humanos. Más de 70 recetas describen cómo construir de forma accesible los patrones más comunes en la web. Cada capítulo esboza problemas, proporciona soluciones escritas en código y explica cómo las distintas vías pueden afectar a los usuarios. Aprenderás a escribir código frontend accesible y, lo que es más importante, por qué deberías hacerlo. Al final, la accesibilidad web te resultará menos oscura y estarás equipado para construir y probar tus propias soluciones accesibles.

Mi objetivo con el Libro de cocina sobre accesibilidad web es que te entusiasme la accesibilidad tanto como a mí y darte las herramientas adecuadas para hacer de la web un lugar más inclusivo para todos.

A quién va dirigido este libro

Este libro es para cualquiera que escriba código frontend: desarrolladores frontend, ingenieros UX, desarrolladores full stack y backend. No importa si eres nuevo en el desarrollo web o si llevas más de una década escribiendo HTML, CSS y JavaScript.

Quieres aprender a estructurar páginas y componentes con HTML y cómo afectan los elementos semánticos a la experiencia del usuario. Conoces CSS y quieres aprender a dar estilo a tus sitios web de forma que sirva a tus usuarios. Te interesa ARIA y cómo utilizarla eficazmente para mejorar la experiencia de los componentes interactivos escritos en JavaScript.

El libro de cocina sobre accesibilidad web proporciona todo lo que necesitas saber para crear sitios, páginas y componentes accesibles. Comienza a un alto nivel, explicando cómo estructurar los documentos, y luego profundiza en temas generales como el uso de enlaces, botones, tablas y formularios. Se hace especial hincapié en el HTML porque es la base de cualquier sitio web accesible, pero el libro también contiene muchos componentes que funcionan con JavaScript, como toggles, acordeones, modales, filtros y navegaciones.

Este libro es para ti si quieres no limitarte a copiar y pegar soluciones, sino comprender realmente cómo funcionan y cómo benefician a tus usuarios.

Qué hay en este libro/Organización

El libro de cocina sobre accesibilidad web se centra en el aspecto técnico de la accesibilidad web. Aprenderás a construir patrones comunes escritos de forma accesible en HTML, CSS y JavaScript. También empezarás a comprender cómo las buenas y malas prácticas afectan a las personas, especialmente a las que tienen discapacidades. El libro no trata los aspectos médicos, sociales o socioeconómicos de la accesibilidad. Abarca una variedad de discapacidades, como las visuales, motoras y de aprendizaje, pero no todas, lo que iría más allá de las limitaciones de este libro. Si quieres saber más sobre la accesibilidad y la intersección entre accesibilidad y tecnología, quizá quieras echar un vistazo a los siguientes títulos:

Cada capítulo de este libro es independiente. Puedes leerlo de principio a fin o saltar directamente a un tema concreto. He elegido los problemas y las soluciones basándome en mi experiencia personal auditando sitios web. Cada receta está orientada a la practicidad y contiene patrones de frontend comunes y soluciones para problemas típicos. También encontrarás referencias a otras recetas y recursos adicionales.

He aquí un breve resumen del contenido.

El Capítulo 1 se centra en las partes de tus sitios web que se repiten y son similares o idénticas en todas las páginas. Aprenderás a configurar el <head> y a crear una estructura base en el <body>.

En el Capítulo 2, dejarás la estructura base de tu sitio web y te adentrarás en la página propiamente dicha. Los cimientos de una página bien diseñada son la agrupación de elementos, los puntos de referencia y los encabezamientos. Aprenderás a utilizar <section>, <nav>, o <article> con eficacia y a combinarlos con los encabezamientos para crear un sólido esquema del documento.

Los hiperenlaces son la base de la World Wide Web. Por eso, el Capítulo 3, dedicado a los enlaces de contenido, es uno de los más extensos del libro. Analiza las características del elemento <a> y te ayuda a aplicarlo con eficacia. Aprenderás a enlazar distintos tipos de contenido, imágenes y grupos de elementos. Una receta se centra en el enrutamiento del lado del cliente y en lo que hay que tener en cuenta al enlazar páginas en una misma aplicación. Otra aborda cómo dar estilo visual a los enlaces.

El capítulo 4 es similar al anterior, salvo que pone en primer plano el elemento <button>. Aprenderás distintas técnicas para etiquetar botones y cómo utilizarlos con los atributos ARIA más comunes.

En el Capítulo 5, pasamos del HTML al CSS y hablamos del color, el contraste, la animación, las unidades y los tamaños. Aprenderás a escribir CSS respetando las preferencias de los usuarios .

La accesibilidad del teclado es un tema importante en este libro. El Capítulo 6 describe todo lo que necesitas saber sobre el estilo de enfoque, la gestión del enfoque y el orden del DOM.

Casi todos los sitios web tienen una navegación principal. El capítulo 7 disecciona la navegación de un sitio típico y explica cada parte en detalle, explicando por qué ciertos elementos semánticos pueden ser útiles para los usuarios de lectores de pantalla. Aprenderás a crear una navegación responsiva con submenús y a entender la diferencia entre navegaciones y menús.

Existen diferentes formas de ocultar contenido en CSS y HTML. El Capítulo 8 analiza sus pros y sus contras. Aprenderás a crear widgets de divulgación y acordeones. El capítulo también compara el elemento nativo <details> con soluciones personalizadas.

El capítulo 9 se centra en un tema complejo: los formularios. Comienza con las buenas prácticas generales para crear formularios y se vuelve más específico con cada receta. Aprenderás los aspectos más importantes del diseño de formularios: etiquetado, descripción de los elementos del formulario, gestión de errores y agrupación.

En el Capítulo 10, aprenderás a construir un formulario de filtro de principio a fin. También conocerás la respuesta dinámica para usuarios de lectores de pantalla, la paginación y la ordenación.

Las tablas se utilizan tan mal que muchos desarrolladores tienen miedo de trabajar con ellas. El Capítulo 11 desmitifica el elemento <table> y presenta buenas prácticas y orientaciones para utilizarlo. También explica cómo ordenar tablas y combinarlas con elementos interactivos .

Los elementos personalizados son un estándar apasionante y, combinados con otras API, una potente herramienta para crear componentes web. El capítulo 12 explica todo lo que debes tener en cuenta en relación con la accesibilidad cuando trabajes con ellos.

La confianza es buena; el control es mejor. El Capítulo 13 te presenta herramientas automáticas de comprobación y depuración que te ayudan a identificar, depurar y solucionar problemas de accesibilidad.

Convenciones utilizadas en este libro

En este libro se utilizan las siguientes convenciones tipográficas:

Cursiva

Indica nuevos términos, URL, direcciones de correo electrónico, nombres de archivo y extensiones de archivo.

Constant width

Se utiliza en los listados de programas, así como dentro de los párrafos para referirse a elementos del programa como nombres de variables o funciones, bases de datos, tipos de datos, variables de entorno, sentencias y palabras clave.

Constant width bold

Muestra comandos u otros textos que deben ser tecleados literalmente por el usuario.

Constant width italic

Muestra el texto que debe sustituirse por valores proporcionados por el usuario o por valores determinados por el contexto.

Consejo

Este elemento significa un consejo o sugerencia.

Nota

Este elemento significa una nota general.

Advertencia

Este elemento indica una advertencia o precaución.

Utilizar ejemplos de código y software compatible

Los ejemplos de código de cada receta están disponibles en accessibility-cookbook.com y en GitHub.

Se utilizaron los siguientes sistemas operativos, navegadores y lectores de pantalla al desarrollar y probar los ejemplos de código de este libro:

  • macOS 13.4.1
  • Androide 13
  • Windows 11
  • Cromo 121
  • Safari 16.5.2
  • Firefox 122
  • VoiceOver en macOS e iOS
  • TalkBack en Android
  • NVDA 2023.3.2
  • MORDAZAS 2023.2307.37

Si tienes una pregunta técnica o un problema al utilizar los ejemplos de código, envía un correo electrónico a

Este libro está aquí para ayudarte a hacer tu trabajo. En general, si se ofrece código de ejemplo con este libro, puedes utilizarlo en tus programas y documentación. No es necesario que te pongas en contacto con nosotros para pedirnos permiso, a menos que estés reproduciendo una parte importante del código. Por ejemplo, escribir un programa que utilice varios trozos de código de este libro no requiere permiso. Vender o distribuir ejemplos de los libros de O'Reilly sí requiere permiso. Responder a una pregunta citando este libro y el código de ejemplo no requiere permiso. Incorporar una cantidad significativa de código de ejemplo de este libro en la documentación de tu producto sí requiere permiso.

Agradecemos la atribución, pero en general no la exigimos. Una atribución suele incluir el título, el autor, la editorial y el ISBN. Por ejemplo "Web Accessibility Cookbook por Manuel Matuzović (O'Reilly). Copyright 2024 Manuel Matuzović, 978-1-098-14560-6".

Si crees que el uso que haces de los ejemplos de código no se ajusta al uso legítimo o al permiso concedido anteriormente, no dudes en ponerte en contacto con nosotros en

Aprendizaje en línea O'Reilly

Nota

Durante más de 40 años, O'Reilly Media ha proporcionado formación tecnológica y empresarial, conocimientos y perspectivas para ayudar a las empresas a alcanzar el éxito.

Nuestra red única de expertos e innovadores comparten sus conocimientos y experiencia a través de libros, artículos y nuestra plataforma de aprendizaje online. La plataforma de aprendizaje en línea de O'Reilly te ofrece acceso bajo demanda a cursos de formación en directo, rutas de aprendizaje en profundidad, entornos de codificación interactivos y una amplia colección de textos y vídeos de O'Reilly y de más de 200 editoriales. Para más información, visita https://oreilly.com.

Cómo contactar con nosotros

Dirige tus comentarios y preguntas sobre este libro a la editorial:

Tenemos una página web para este libro, donde se enumeran erratas, ejemplos y cualquier información adicional. Puedes acceder a esta página en https://oreil.ly/web-accessibility-cookbook.

Para obtener noticias e información sobre nuestros libros y cursos, visita https://oreilly.com.

Encuéntranos en LinkedIn: https://linkedin.com/company/oreilly-media

Míranos en YouTube: https://youtube.com/oreillymedia

Agradecimientos

Nunca se me habría ocurrido escribir un libro por mi cuenta. De algún modo, Amanda Quinn me encontró y me convenció para embarcarme en esta aventura. Estoy agradecida por ello, porque escribir este libro fue una experiencia que no me habría querido perder. Con Amanda llegó Sarah Grey a mi vida como autora. Es editora, como sería de desear. Se las arregló para lidiar con mi caótica agenda y mantenerme en el buen camino sin presionarme. Sus comentarios fueron siempre claros y constructivos, lo que dio forma a este libro y me ayudó a mejorar como escritora.

¿Cómo sabes si las miles de palabras que has escrito tenían algún sentido? Si tienes grandes revisores técnicos, ellos te lo dirán; los míos fueron extraordinarios. Adrian Roselli, James Scholes, Joschi Kuphal, Lea Rosema, Matthias Ott, Sara Joy Wallén y Sonja Weckenmann cuestionaron mis recetas e hicieron las preguntas adecuadas para ayudarme a mejorarlas.

Mis conocimientos sobre accesibilidad no proceden de cualquier parte. Aprendí todo lo que sé de personas inteligentes, hábiles y con talento como Adrian Roselli, Alice Boxhall, Bruce Lawson, Carie Fisher, Dennis Lembrée, Eric W. Bailey, Eric Eggert, Heydon Pickering, Hidde de Vries, Joschi Kuphal, Karl Groves, Kitty Giraudel, Leonié Watson, Marco Zehe, Marcy Sutton, Scott Vinkle, Steve Faulkner, Rian Rietveld, Rob Dodson, Scott O'Hara, Val Head y muchos más.

Mi mentor, Aaron Gustafson, me enseñó mucho, me guió en la dirección correcta y me ayudó a ganar confianza para escribir en un blog y hablar. Vitaly Friedman y el equipo de Smashing Magazine, Marc Thiele de Beyond Tellerrand y todos los demás organizadores de la conferencia me dieron acceso a un público más amplio y me permitieron crecer.

Este libro no existiría sin la escena austriaca de la accesibilidad. Personas como Jo Spelbrink, Maria Putzhuber, Wolfram Huber y Wolfgang Leitner me inspiraron y apoyaron en mis comienzos y me ayudaron a evolucionar. Me enseñaron la accesibilidad web, me introdujeron en la escena y me dieron un escenario en la conferencia A-Tag. Michael Rederer confió mucho en mí, me orientó y me ayudó a profesionalizarme. Werner Rosenberger me permitió mejorar mis habilidades en las pruebas de accesibilidad.

Mis amigos de todo el mundo, con los que he pasado horas interminables escribiendo y hablando sobre accesibilidad web en las redes sociales, por correo electrónico y en conferencias, son la razón por la que disfruto compartiendo contenidos y sigo haciéndolo. Mi amigo y antiguo compañero de oficina Bernhard Steinbrecher, sin saberlo, me ayudó a ganar confianza para escribir.

Por último, quiero dar las gracias a las personas que siempre confiaron en mí y, al hacerlo, hicieron la contribución más significativa a este libro: mi madre Vera, mi hermana Sne, mi prometida Claudi y nuestras maravillosas hijas pequeñas, Johanna, Olivia y Philippa. Lo sois todo para mí y la razón de ser de este libro.

Get Recetario de accesibilidad web now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial