Programación: Accesibilidad y HTML.

- Publicidad-

El código y la programación pueden ser herramientas muy útiles que nos permiten mejorar las diferentes facetas que conforman nuestras vidas cotidianas.

Desde las apps que usamos para configurar la alarma que nos despierta en la mañana, hasta la que usamos para trasladarnos de un sitio a otro o incluso pedir comida sin salir de casa; todo esto es gracias al código y a los programadores. 

El programador es uno de los profesionales más demandados de la actualidad dada nuestra creciente necesidad de crear y desarrollar herramientas digitales, aunque convertirse en uno no es tan complicado como lo fue décadas atrás.

HTML

Actualmente existen cursos como el Hackademy de aulab, curso de programación que te permite adquirir todo el conocimiento teórico y práctico en lenguajes de programación y frameworks para ayudarte a aprender a crear un sitio web atractivo y accesible para todos. 

Siendo una especie de conexión entre la máquina y el humano, el programador debe hacer de esta interacción algo posible y sencillo, cosa que suele complicarse para personas con impedimentos sensoriales. 

¿Cómo disfruta de una página web una persona con impedimentos sensoriales? A continuación te explicamos cómo hacer de la experiencia digital algo más accesible desde el código. 

Contenido accesible a todos.

Al diseñar y crear páginas web, es importante que estas sean accesibles para todos los públicos. En particular, debido a la naturaleza visual y dinámica de las páginas web que va a crear, es importante asegurarse de que su sitio web también tendrá sentido para los usuarios con discapacidades visuales parciales o totales.

Muchos usuarios con problemas de visión o ciegos acceden a las páginas web con la ayuda de lectores de pantalla. 

Los lectores de pantalla analizan el HTML de tu página web y leen el contenido en voz alta, respondiendo a las órdenes para navegar por la página y realizar acciones como hacer clic en un enlace, escribir en un campo de entrada o enviar un formulario. 

En este recurso, te van a dar una visión general de algunas formas en las que puedes mejorar la accesibilidad de tu página web y ayudar a los lectores de pantalla a interpretarla mejor.

Texto alternativo.

Una forma de hacer que los elementos de su página sean más comprensibles para los lectores de pantalla es proporcionar texto alternativo a las imágenes. El texto alternativo se proporciona como un atributo de la etiqueta <img> para describir la imagen al lector de pantalla. 

Etiquetas semánticas.

Al pensar en el estilo del texto en una página web, es posible que hayas notado cierta superposición entre los siguientes pares de etiquetas:

<b> vs. <strong> <i> vs. <em>

Si alguna vez intentas cambiar una de las etiquetas de un par por la otra, lo más probable es que veas que hay poco o ningún cambio en el aspecto de la página. Las etiquetas <b> y <strong> ponen el texto en negrita y las <i> y <em> en cursiva. Sin embargo, hay una diferencia fundamental entre cada una de las etiquetas de un par cuando se trata de la accesibilidad.

Los elementos <b> y <i> simplemente denotan cómo debe ser el texto: el texto dentro de estas etiquetas debe aparecer en negrita o en cursiva, respectivamente.

Los elementos <strong> y <em>, sin embargo, denotan cómo debe entenderse el texto y, aunque dan lugar a la misma apariencia visual, afectan a cómo los interpreta el lector de pantalla: el texto dentro de estas etiquetas se lee con una voz diferente para indicar el énfasis de cada una. Estas etiquetas se conocen como etiquetas semánticas.

Así, aunque <strong> y <em> dan lugar a un texto visualmente similar al de <b> y <i>, proporcionan una forma de que los lectores de pantalla comuniquen al usuario las partes del texto que ya están resaltadas visualmente.

ARIA.

ARIA, también conocida como WAI-ARIA, significa Accessible Rich Internet Applications. ARIA define una serie de extensiones de marcado, normalmente atributos de HTML5, que pueden añadirse a los elementos para dar a los lectores de pantalla más información sobre el elemento y ayudar a los usuarios con problemas de visión a comprender mejor lo que ocurre en la página web.

Por ejemplo, un atributo ARIA muy útil es el atributo role. Cuando se añade a un elemento, proporciona al lector de pantalla un contexto adicional sobre cuál es la función de ese elemento en el contexto de una página. 

Para un lector de pantalla, sin embargo, no es tan sencillo. Para remediarlo, podemos añadir el atributo role con valor de navegación.

Ahora, el lector de pantalla sabrá que se trata de un menú y presentará las opciones al usuario en consecuencia.

Hay muchas otras funciones para los atributos ARIA, como indicar al usuario el estado de los formularios y las casillas de verificación, e incluso llamar su atención sobre un elemento de la página que acaba de ser modificado por JavaScript. No cubriremos todo lo relacionado con ARIA en este artículo, pero no dudes en consultar la especificación aquí.

- Publicidad -
LuisGyG
LuisGyGhttps://www.luisgyg.com
Escribe y habla sobre tecnología de consumo desde 2003. Ahora planea, edita y escribe guías de ayuda sobre gadgets, teléfonos celulares y cultura Geek. Además de totoriales de marcas como Apple, Netflix, Samsung, LG, Sony, Huawei, entre otras.

Más en LuisGyG...

Suscríbete

Suscríbete a mi lista de mail y participa en promociones exclusivas.

Sígueme

Publicidad

Más de esto...

Últimos posts

Apenas se lanzó y el Apple Watch Series 8 ya detectó una afección cardiaca.

El nuevo Apple Watch Series 8 comenzó a llegar a los clientes apenas el viernes 16 de septiembre. Se trata de la nueva línea...

¿Qué es WiFi 7 y qué trae para nosotros?

Hace apenas dos años se dio a conocer la adopción de la última versión de la red WiFi 6E, que en su momento representó...

IFA 2022 y teléfonos mostrados en este evento

IFA 2022 terminó y muchos de los avances mostrados en ella han dado mucho de qué hablar, principalmente los próximos lanzamientos de dispositivos Smart...

Últimos videos

Publicidad

Lista de Mail

Suscríbete a mi lista de mail y participa en promociones exclusivas.