Cómo escribir HTML accesible
Traducción de un articulo sobre páginas web, código Html y accesibilidad. Cómo programar una web sin perder de vista la accesibilidad, cómo mejorar el uso de etiquetas web para ofrecer a los usuarios mayor facilidad para navegar e interactuar.
2 diciembre, 2020 Traducción sobre html accesible para páginas webUn texto original de Manuel Matuzovic
Publicado originalmente el 13/12/2016 en Medium
Introducción a la accesibilidad web. Consejos para mejorar el uso de etiquetas web y ofrecer a los usuarios más alternativas y mayor facilidad para navegar e interactuar. Si no quieres leer la introducción, ve directamente a los consejos.
Disclaimer: Este es un ejercicio de traducción realizado por un estudiante de traducción en prácticas. Si lo que necesitas son servicios de traducción profesional, contacta con la empresa de traducción Ibidem Group, en su agencia de traducciones de Barcelona. Ahora también agencia de traducciones de Madrid.
Desarrollo personal y cambio de perspectiva
Cuando creé mi primera web mi prioridad era crear contenido. La funcionalidad, la accesibilidad, el rendimiento, la UX o la compatibilidad con el navegador no me interesaban mucho. ¿Para qué? Diseñé la web mediante tablas y ofrecí una versión 800×600 y 1024×768. Además, informé a los usuarios que el mejor navegador para usar la web era Internet Explorer 5.
Al principio, insertaba capturas de pantalla de la web antigua de finance.senate.gov en las que se informaba a los usuarios de que los mejores navegadores para usar la web eran Netscape e Internet Explorer con una resolución de pantalla de 800×600.
https://web.archive.org/web/20090325102735/http://finance.senate.gov/
Obviamente, todo esto fue antes de que empezara a trabajar como diseñador y de que cambiara mi visión de lo que era importante y lo que no. Años más tarde, en lugar de informar sobre los requisitos que el usuario debía cumplir para poder usar mis webs, empecé a adaptarlas a los principales navegadores.
Tras leer el artículo de Ethan Marcotte sobre cómo estaban cambiando las reglas del juego, me empecé a preocupar también por los dispositivos a los que estas webs iban dirigidas.
Es genial crear webs para todo tipo de navegadores y dispositivos, pero es bastante inútil si les falla la velocidad, así que me puse a aprender todo sobre CSS, velocidad, carga de fuentes, CDN y demás.
Accesibilidad para principiantes (a11y)
Hace poco, volví a cambiar de opinión: me he dado cuenta de que no es suficiente crear webs rápidas y con capacidad de respuesta que funcionen en versiones antiguas de navegadores si, por ejemplo, no se puede usar el teclado para navegar por ellas.
La accesibilidad no es sólo otro elemento en nuestra lista de tareas que tachar antes de lanzar nuestra web; la accesibilidad es la base de lo que hacemos como diseñadores y desarrolladores web y es nuestra obligación tratarla como tal.
Durante los últimos meses, he estado leyendo, escuchando y hablando sobre la accesibilidad web. Me ha llevado su tiempo asimilar algunas cosas y todavía estoy al principio del camino, pero, cuanto más aprendo, más me sorprende lo mucho que puedo hacer ahora mismo sin tener que aprender nada de cero.
He ampliado mis conocimientos de HTML, CSS y JavaScript, pero lo más importante es que he aprendido que la accesibilidad no es sólo un término médico que afecta solo a un cierto porcentaje de la población. La accesibilidad es algo que nos concierne a todos, tanto a ti como a mí, y con lo que tenemos que vivir todos los días. Da igual lo que creemos: si no es accesible, es inútil.
En estos artículos, quiero compartir con vosotros algunas de las cosas que he aprendido. No quiero que veáis estos consejos como una lista de cosas que ir tachando, sino como un punto de partida. Si adaptas estas técnicas a tu trabajo, podrás empezar a ocuparte de la accesibilidad y, esperamos, te darán la motivación que necesitas para aprender y preocuparte más por los usuarios.
* * *
Pero vamos al grano, estos son los consejos que os doy sobre accesibilidad:
Definir el idioma es fundamental
Decirle al navegador qué idioma se usa en el documento tiene muchos beneficios. Es bueno para el SEO, ya que ayuda a las herramientas de traducción de terceros y a los navegadores a identificar el idioma y el diccionario adecuados. Definir el lenguaje correcto en una página HTML ayuda a la tecnología de asistencia a elegir el perfil de voz o el conjunto de caracteres correctos. (1) Adrian Roselli ha recopilado otras ventajas de usar el atributo lang en una web.
<html lang="en">
…
</html>Si quieres, puedes ver cómo funciona el atributo «lang» en YouTube.
Si cambias de idioma dentro de un documento, puedes usar el atributo lang en etiquetas específicas. (2)
<p>Hay un <i lang="fr" class="idiomatic">je ne sais quoi</i> en el ambiente.</p>Asegúrate de definir siempre el idioma correcto. Steve Faulkner hizo un video en el que muestra qué pasa si no se usa el atributo lang correctamente. En el IANA Language Subtag Registry puedes encontrar el código de cada lengua.
Ocultar el contenido usando el atributo «hidden»
Si lo que quieres es ocultar contenido visualmente y a los usuarios, usa el atributo hidden.
Los navegadores soportan muy bien el atributo hidden, salvo IE 10 y versiones anteriores. Si usas este valor en tu CSS, podrás proporcionar soporte a navegadores más antiguos.
[hidden] {
display: none;
}Ventajas de añadir un atributo «alt» vacío a un elemento <img>
Si quieres utilizar una imagen como contenido, añade el atributo alt para describir brevemente el contenido y la función de la imagen. No empieces con un «Imagen/Imagen/Gráfico de…», porque el lector de pantalla lo hace siempre.
Si la imagen es puramente decorativa o no aporta información relevante, puedes incrustarla como imagen de fondo con CSS. Si tienes/quieres agregarla en HTML, no quites el atributo alt y déjalo vacío. (3)
<img src="decorative_image.jpg" alt="" />Es importante que no omitas el atributo alt.
Omitir este atributo implica que la imagen es una parte importante del contenido y que no tiene un equivalente en el texto. Dejar el atributo vacío (alt=""), indica que esta imagen no es una parte importante del contenido y que los navegadores no visuales pueden omitirla al generar el render. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
Tienes más consejos sobre el uso del atributo alt en The A11y The Project Page “Quick Tip: Using alt Text Properly”.
Si quieres crear un botón, usa el elemento <button>
Por lo general, siempre es mejor dar prioridad a los elementos propios de HTML, si los hay, en vez de crear los tuyos. Por ejemplo, si necesitas un botón, usa el elemento <button> y no <div>.
Usar botones tiene muchas ventajas/características importantes. Aquí tienes algunas:
- Posibilidad de enfocar
- Posibilidad de moverse con el ratón y las teclas
- Los lectores de pantalla los identifican como botones
Rob Dodson explicó muy bien los beneficios de <button> sobre <div>. Échale un ojo al episodio de A11ycasts «Just use button» si quieres ver más detalles u otros ejemplos.
Si no sabes muy bien si usar un botón o un enlace, lee el post de Marcy Suttons «Links vs. Buttons in Modern Web Applications«.
Es importante estructurar bien usando encabezados
Los esquemas de sonido con encabezados <h1> - <h-6> ayudan a los usuarios a entender mejor la estructura de la web y la relación entre las distintas secciones. Además, ayudan a navegar a los usuarios que usan tecnología asistencial. Los lectores de pantalla ofrecen varias formas de saltar de un contenido a otro. Por ejemplo, con el lector de pantalla NVDA los usuarios pueden saltar de un título a otro usando atajos (H y Shift + H).
Hay que saltarse niveles al introducir encabezados. (4) Además, hay que usar varios elementos H anidados para hacer el esquema. Adrian Roselli explica por qué en sus artículos “There Is No Document Outline Algorithm” y «The Truth About Multiple H1 Tags«.
<!-- No te saltes niveles: -->
<body>
<h1>My website</h1>
<h4>Heading</h4>
<h2>Subheading</h2>
<h3>Heading</h3>
</body>
<!-- No te fíes de algoritmos de esquema que no existen: -->
<body>
<h1>My website</h1>
<section>
<h1>Heading</h1>
<section>
<h1>Subheading</h1>
</section>
</section>
<section>
<h1>Heading</h1>
</section>
</body>
<!-- Haz esto: -->
<body>
<h1>My website</h1>
<h2>Heading</h2>
<h3>Subheading</h3>
<h2>Heading</h2>
</body>En Tota11y se enseña una forma muy buena de comprobar si se sigue el esquema. Otra forma sería mediante CSS, viendo si la página se puede leer y la estructura tiene sentido.
Los puntos de referencia ayudan a los usuarios a navegar en una web
Es posible y aconsejable etiquetar las secciones temáticas con HTML5 (<article>, <aside>, <nav>, <section>). También puedes usar atributos rol WAI-ARIA para navegadores antiguos o secciones que no tienen etiqueta, como “buscar”. (5) Los elementos section no son intercambiables con <div>. Úsalos para etiquetar fragmentos más grandes de contenido relacionado distinto de otros contenidos. No utilices los elementos de seccionamiento en exceso. Usa <div> solo para CSS/JS y secciones, para la semántica.
Una de las principales ventajas es que los usuarios de lectores de pantalla pueden navegar por las webs saltando de una sección a otra. Estas secciones navegables se denominan puntos de referencia. (7) En YouTube hay demostraciones de cómo se navega con puntos de referencia.
<body>
<header> <!-- landmark -->
<nav> <!-- landmark -->
...
</nav>
</header>
<aside> <!-- landmark -->
</aside>
</body>Con una extensión del navegador llamada Landmarks puedes simular el salto de un punto de referencia a otro. Presiona Alt + Shift + N para saltar al siguiente y Alt + Shift + P para volver al punto de referencia anterior.
Si quieres más información sobre secciones, consulta la página de “Tutoriales de accesibilidad web” sobre secciones. Ten en cuenta que no todos los softwares tratan igual los puntos de referencia.
Los contenidos, encabezados y pies de página, también son puntos de referencia.
Si se introduce el contenido principal de la web en un elemento <main> , algunos usuarios podrán saltar directamente al contenido principal mediante atajos. El elemento main representa la sección principal de contenido del cuerpo del documento o de la aplicación y se debe utilizar más de una vez por documento (5).
Como ya hemos comentado, es recomendable dividir contenido en puntos de referencia. <header> y <footer> se comportan en todos los navegadores principales como puntos de referencia si no están incrustados en un elemento <section> o <article>. Si necesitas soporte para navegadores antiguos, puedes convertir el encabezado y el pie de página de la página principal en puntos de referencia usando atributo rol con valores banner para el encabezado y contentinfo para el pie de página.(6)
<!-- Los atributos rol adicionales sólo son importantes para navegadores más antiguos -->
<body>
<header role="banner">
<h1>My personal blog</h1>
</header>
<main>
<section>
<h2>Blog posts</h2>
....
</section>
</main>
<footer role="contentinfo">
© 2016 Me
</footer>
</body>Usar fieldset para agrupar elementos de forma y adecuarlos más al contexto
Seguramente ya hayas tenido que añadir varios botones de radio o casillas de verificación a un formulario. Añadir los elementos de formulario y sus correspondientes etiquetas no es muy complicado, ¿pero qué elemento eliges, si quieres etiquetar todo el grupo de botones de radio o casillas de verificación?
<form>
Talla de camisa
<input type="radio" id="s" name="shirtsize" />
<label for="s">S</label>
<input type="radio" id="m" name="shirtsize" />
<label for="m">M</label>
<input type="radio" id="l" name="shirtsize" />
<label for="l">L</label>
</form>¿Cómo se etiqueta la talla de la camisa? Es probable que añadir una <p> funcione, pero no se asociará con el grupo de botones de radio. Es mucho mejor si lo incluimos todo en un elemento fieldset y añadimos la talla de la camisa a la etiqueta <legend>. Los lectores de pantalla sabrán que <legend> se asocia a los botones de radio y leerán su valor cuando se seleccione un botón de radio.
Al igual que con <section>, hay que tener cuidado cuando se incluyan elementos de forma en fieldsets. Como regla general, usa <fieldset> solo si tienes varios elementos de forma que conformen un grupo y una etiqueta correspondiente para ese grupo, es decir, que encaje en una <legend>.
Un paso más allá
Eso es todo por el momento. Espero que estos consejos te ayuden a hacer más accesible tu HTML. Gracias a Heydon Pickering, porque en su libro «Inclusive Front End Design Patterns» se establecen las bases de la mayoría de las cosas que acabas de leer. Te lo recomiendo muchísimo si quieres aprender más sobre accesibilidad y diseño inclusivo.
Más consejos sobre accesibilidad
Este es el primero de una serie de cuatro artículos. Todavía se están preparando los dos últimos dos artículos, pero se publicarán pronto.
- Cómo escribir HTML sin perder de vista la accesibilidad
- Cómo escribir JavaScript sin perder de vista la accesibilidad
- Cómo escribir CSS sin perder de vista la accesibilidad
- Próximamente: Cómo diseñar y desarrollar una web sin perder de vista la accesibilidad
¡Gracias por leer este artículo! Si te ha gustado, dale a like y compártelo.
* * *
Traducción web código html
Traducción de un excelente artículo sobre páginas web, código Html y usabilidad: consejos sobre cómo diseñar una web, cómo programar en Html sin perder de vista la usabilidad.
Esta traducción de Inglés a Español ha sido realizada mediante traducción automática (motor de traducción neuronal «Ibidem MT»), y después revisada por Leyre, traductora profesional con Español como idioma nativo. Este esquema de trabajo, denominado PEMT (Post Edited Machine Translation) es óptimo sobre todo para proyectos de traducción de páginas web, especialmente traducción web de tiendas online (Prestashop, Magento, Shopify…). El uso combinado de machine translation + traductores humanos permite reducir mucho los precios de traducción y adaptar los costes al presupuesto que tenga el cliente.
Articulos relacionados
Traducción al español sobre la traducción automática de textos del Finantial Times
Traducción al español del artículo «XML Schema 1.1 Tutorial» originalmente publicado en inglés