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.

accesibilidadtraduccion inglestraduccion web html
2 diciembre, 2020 Traducción sobre html accesible para páginas web
2 diciembre, 2020 Traducción sobre html accesible para páginas web

Un texto original de Manuel Matuzovic
Traducción de ingles sobre web y html realizada por Ibidem Group
Artículo original publicado el 13/12/2016 en Medium by Manuel Matuzovic

* * *

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.

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).

Demostración: navegar saltando de un encabezado a otro

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.

Dise√Īo del post Tota11y ofrece una forma buena y f√°cil de ver el esquema de las p√°ginas

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.

¡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.

Valora este artículo

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

Traducci√≥n de ingl√©s a espa√Īol sobre el lenguaje LOGO y su aplicaci√≥n pedag√≥gica basada en el constructivismo piagetiano