Pautas de accesibilidad para el diseño web

Apuntes de clase.

W3Schools es una plataforma de recursos, desarrollada por el World Wide Web Consortium (W3C), para mostrar las mejores prácticas y las últimas tendencias en diseño web o tecnologías de lenguaje de programación.

La herramienta agrupa información fundamental y prácticas sobre cómo usar y proporcionar los medios para que las personas prueben cualquier código, con el propósito de verificar que cumplan con los estándares del W3C.

Artículo relacionado: Desde la accesibilidad, ¿cuál es tu experiencia digital?

En esencia, y un elemento fundamental del diseño de interfaces de usuario y el desarrollo de sitios web accesibles, es comprender las Directrices de Accesibilidad al Contenido en la Web (WCAG) y la Iniciativa de Accesibilidad a la Web (WAI) del W3C.

WCAG son las pautas establecidas por el W3C. Estas son estándares globales que demuestran lo que se necesita para construir un sitio web accesible.

Artículos relacionados: La importancia de la accesibilidad en la experiencia de usuario

WAI proporciona una gran cantidad de información integral sobre protocolos para promover la evolución de la WWW, al tiempo que garantiza que las partes interesadas y los profesionales se mantengan dentro de las pautas de WCAG.

Como creativos digitales, es una buena práctica cumplir y aplicar estos estándares a su enfoque de diseño y desarrollo.

Los sitios web que cumplen totalmente con WCAG y WAI benefician a todos.

Todos deben cumplir con las pautas y practicar el uso del etiquetado para los elementos esenciales que son componentes de una página web.

Esto es importante porque garantiza que los navegadores y las ayudas de asistencia, como los lectores de pantalla, funcionen sin problemas.

W3Schools establece cómo puede hacer esto con una serie de guías simples, que incluye lo siguiente:

1. HTML semántico:

El HTML semántico simplemente permite a los codificadores o desarrolladores dar nombres a los componentes a medida que los identifica. Por ejemplo, un botón que proporciona funciones como “Agregar a la papelera” o “Acepto” debe etiquetarse simplemente como <button>, por ejemplo:

<button>Agregar a la papelera</button>

La aparición de HTML5, junto con otros desarrollos más recientes, significa que ya no es necesario para un programador usar códigos excesivamente largos e innecesariamente complejos para designar la operabilidad del botón diferente. Es más fácil para los navegadores modernos reconocer y comprender los nuevos términos de lenguaje más simples.

2. Las etiquetas de cabecera:

Se define con la etiqueta <h1> y hasta la <h6>, lo que permite el control de los elementos de una página web.

El uso de la etiqueta Encabezado le permite estructurar la navegación y muestra la estructura del documento y las relaciones entre las diferentes secciones.

<h1> Los encabezados deben usarse para los títulos principales, seguidos de los <h2>, luego los menos importantes <h3>, y así sucesivamente. La <h1> solo de utiliza una vez.

3. Texto alternativo o atributo ALT

El uso de texto alternativo proporciona información adicional o descripción de un objeto en la página web. Un ejemplo sería una fotografía.

Un lector de pantalla proporciona una descripción de la fotografía para aquellos que no puedan verla. Por ejemplo, una foto de un gol de Messi tendría el siguiente atributo descriptivo:

<img src=“messi-gol.jpg” alt=“El golazo de Messi”>

4. El atributo Idioma:

Permite que los sitios web con capacidades multilingües y alcance global atiendan adecuadamente para las audiencias que hablan diferentes idiomas. 

Sitios como Apple, Netflix y Amazon ofrecen esta función, por ejemplo:

<html lang=“es”>

5. Lenguaje claro:

Es esencial tomar las medidas necesarias para garantizar que la redacción utilizada sea entendida por las audiencias. Es evitar es escribir abreviaturas no universales.

Una buena práctica es usar siempre la palabra completa.

Al igual que los lectores de pantalla, la redacción puede dificultar su experiencia ya que los sistemas de información no podrán leerlos con claridad.

Andrés Esteban Marín
Andrés Esteban Marín
Periodista, especialista en Gerencia de la Comunicación con Sistemas de Información, magíster en Comunicación, maestrando en Ciencia, Tecnología y Sociedad, exárbitro de fútbol, Líder Catalizador de la Innovación y profe universitario.

DEJA UNA RESPUESTA

Por favor ingrese su comentario!
Por favor ingrese su nombre aquí

Mario Tierra, un genio de las letras y los versos costumbristas

#En200Palabras: Siempre quise una foto con él, como reconocimiento a su amplia trayectoria artística. Se trata de mi paisano Mario Mosquera Mejía, más conocido como...

En memoria del profe Luis Alfonso Marroquín

#En200Palabras: Recuerdo los entrenamientos con el profe Marroquín en 1996. Como era habitual, llegábamos a la cancha de arenilla de Belén muy temprano en las...

Enfoque 4D: comunicación, alfabetización y reapertura económica en tiempos del Covid-19

En Argentina, la Agencia Nacional de Promoción de la Investigación, el Desarrollo Tecnológico y la Innovación, Agencia I+D+i, propuso un sistema científico y tecnológico...

Alejandro Katz: Transmisión cultural de la ciencia

Alejandro Katz, profesor, pensador, editor y ensayista, en clase del curso de posgrado Democratización del Conocimiento de la Universidad Nacional de Mar del Plata.

Cuando Juan Fernando Quintero soñaba con ser futbolista profesional

Mientras desempolvaba algunas viejas cintas magnéticas, encontré unas en las cuales grabábamos Unideportes, programa que se emitía en los desaparecidos canales de cable EPM...

Criterios de selección de públicos para la divulgación y comunicación de la ciencia

En el marketing y en la comunicación las formas de consumo se reconfiguran constantemente, en su gran mayoría por tendencias en el uso y...