Estándares y Buenas Prácticas para el Desarrollo Web Semántico y Accesible

Enviado por Programa Chuletas y clasificado en Informática y Telecomunicaciones

Escrito el 9 de Noviembre de 2025 en español con un tamaño de 4,84 KB

Principios Fundamentales de Accesibilidad y Diseño Visual

Estas directrices se centran en la presentación del contenido y la claridad del lenguaje, asegurando que la información sea perceptible para todos los usuarios.

Utilice alto contraste de colores entre el texto y el fondo, especialmente para usuarios con dificultades visuales.
Evite el uso de códigos para cualquier carácter no alfanumérico o vocales acentuadas.
Utilice siempre etiquetas HTML que no estén en desuso (etiquetas semánticas).
Use un lenguaje apropiado para su sitio web, que sea claro y simple.
No utilice tablas para maquetar el diseño.
Evite la aparición de ventanas emergentes repentinas.
Añada un título significativo a cada una de las páginas que cree.

Semántica y Alternativas para Elementos No Textuales

La correcta implementación de la semántica HTML es crucial para la interpretación del contenido por parte de tecnologías de asistencia.

Utilice hojas de estilo (CSS) para indicar el estilo; nunca incluya estilos directamente en el HTML.
Proporcione textos equivalentes para todo elemento no textual, mediante el atributo alt (para imágenes) o title (para información suplementaria).
Si su página va a contener tablas de datos, identifique claramente los encabezados de fila y columna con la etiqueta <th>.
Si va a utilizar mapas de imagen, procure que sean del lado del cliente. En caso de que deban ser del lado del servidor, proporcione enlaces redundantes en formato texto para cada área activa de dicho mapa.
Identifique claramente los cambios en el lenguaje natural del texto de un documento y de cualquier texto equivalente (por ejemplo, en leyendas y subtítulos). Para indicar un cambio de idioma, añada el atributo lang.
Si crea la página con marcos (frames), titule cada uno de ellos para facilitar la navegación.
Toda información comunicada a través del color debe estar también disponible sin color (ej. mediante texto o patrones).
Si, a pesar de haberse esforzado, no consigue crear una página accesible, proporcione un enlace a una página alternativa que use las tecnologías de accesibilidad del W3C.

Estructura, Marcado y Estándares Formales

El cumplimiento de los estándares asegura la correcta interpretación y validación del documento en diferentes navegadores y dispositivos.

Utilice unidades relativas (ej. em, %, rem) en vez de absolutas (ej. px) en los valores de los atributos del lenguaje de marcado y en las propiedades de las hojas de estilo.
Cree documentos que se ciñan a las gramáticas formales publicadas. Añada la declaración DOCTYPE a la primera línea de la página web, antes de la etiqueta <html>.
Proporcione una breve explicación de todos los enlaces que cree para indicar a dónde llevan; realice esta acción añadiendo el atributo title a todos los enlaces.
Use elementos de encabezado (<h1>, <h2>, etc.) para sugerir la estructura del documento y úselos siguiendo la especificación (Ejemplo: <h1>).
Marque correctamente las listas y los ítems de las listas. Nunca utilice listas para maquetar la información.
Cuando quiera añadir una cita a su página web, señálela con la etiqueta <blockquote>. No utilice esta etiqueta para maquetar la información para lograr, por ejemplo, efectos de sangría o de letra un poco más pequeña. La etiqueta <blockquote> solo debe usarse cuando se quiera indicar una cita; para cambiar la apariencia de un texto que no sea una cita, utilice hojas de estilo.
Si va a crear algún formulario en su página web, asocie explícitamente las etiquetas (<label>) con su nombre. Si es posible, conviene hacer también una asociación implícita.

Interacción y Navegación

Optimización de la experiencia del usuario a través de la consistencia y la facilidad de navegación mediante teclado.

Cree un estilo de presentación que sea consistente en todas las páginas (utilizando un CSS común).
Cree un orden lógico de tabulación a través de los enlaces, controles de formulario y objetos. Si es posible, proporcione también atajos de teclado para los enlaces importantes mediante el atributo accesskey. Ejemplo de enlace:
Enlace
Identifique el lenguaje natural principal de un documento. Esto se hace añadiendo el atributo lang a la etiqueta <html>.

Entradas relacionadas:

Etiquetas: