Guía para editores, capítulo 6
Datos para lectores de pantalla y máquinas
Última revisión: noviembre de 2026
Un lector de pantalla, un buscador y un lector de feeds dependen de cómo está estructurado tu sitio. Un HTML claro, datos estructurados y un feed limpio dan a cada uno lo que necesita.
Empieza por el HTML
Estos elementos dan a una página sus puntos de referencia, para que un usuario de lector de pantalla pueda saltar directamente al artículo.
<html lang="en">
<body>
<a href="#main">Skip to the article</a>
<header>
<nav aria-label="Main">...</nav>
</header>
<main id="main">
<article>
<h1>Article headline</h1>
<p>By <a href="/authors/jane-doe">Jane Doe</a></p>
<p><time datetime="2026-11-05T08:00:00+01:00">Published 5 November 2026</time></p>
<h2>First section</h2>
<p>Article text.</p>
</article>
<aside aria-label="Related articles">...</aside>
</main>
<footer>...</footer>
</body>
</html>
- Puntos de referencia: Usa
header,nav,main,asideyfootertal como fueron pensados. Cuando una página tenga más de unnav, etiqueta cada uno. - Enlace de salto: Permite a los usuarios de teclado pasar por encima de la navegación repetida, lo que ayuda a cumplir el criterio de éxito 2.4.1 de las WCAG. Hazlo visible al recibir el foco.
- Encabezados: Usa un solo
h1para el titular y mantén los niveles en orden. Unh4justo después de unh2es el tipo de salto que hay que evitar. Elige un encabezado por su lugar en el esquema, nunca por su tamaño. - Listas y tablas: Usa elementos
ul,olytablereales, para que el software pueda leer su estructura (criterio de éxito 1.3.1).
Idioma
Define lang en el elemento html de cada idioma (criterio de éxito 3.1.1). Sin él, un lector de pantalla puede leer tu artículo con la voz equivocada. Marca también los pasajes en otro idioma (criterio de éxito 3.1.2).
<p>The minister called it <span lang="fr">une erreur historique</span>.</p>
Imágenes
- Escribe un texto
altque dé al lector lo que la imagen aporta a la historia. - Usa
alt=""para las imágenes puramente decorativas. No omitas el atributo, porque algunos lectores de pantalla leerán en voz alta el nombre del archivo. - Usa fondos CSS para la decoración pura siempre que puedas.
- Usa
figureyfigcaptionpara los pies de foto y los créditos.
En cada pantalla
Los requisitos de las WCAG 2.2 AA que más importan para una plantilla de noticias:
| Requisito | Objetivo | Criterio |
|---|---|---|
| Contraste del texto | 4,5:1, o 3:1 para texto grande | 1.4.3 |
| Cambio de tamaño del texto | Hasta el 200% sin perder nada | 1.4.4 |
| Reorganización | 320 píxeles CSS de ancho sin desplazamiento lateral | 1.4.10 |
| Foco visible | Un indicador de foco de teclado visible | 2.4.7 |
| Foco no oculto | El foco nunca queda oculto del todo | 2.4.11 |
| Tamaño del área táctil | Al menos 24 por 24 píxeles CSS | 2.5.8 |
En móvil, prueba con VoiceOver o TalkBack y con el ajuste de texto más grande. En escritorio, recorre la página usando solo las teclas Tab, Intro y Escape.
Publica una declaración de accesibilidad que diga qué cumples, qué todavía no y cómo informar de un problema.
La Ley Europea de Accesibilidad
La Directiva (UE) 2019/882 se aplica a los servicios enumerados que se presten a consumidores a partir del 28 de junio de 2025. La lista incluye los servicios de comercio electrónico, los libros electrónicos y los servicios que dan acceso a medios audiovisuales. Los servicios de comercio electrónico se definen como servicios prestados a distancia, mediante sitios web y servicios basados en dispositivos móviles, a petición de un consumidor para celebrar un contrato. Las microempresas que prestan servicios están exentas.
La Ley no enumera los sitios de noticias como tales. Un sitio que vende suscripciones en línea, o que vende libros electrónicos o acceso a vídeo, aún puede entrar en su ámbito, y las leyes nacionales añaden detalles. Consulta tu situación con un asesor.
Datos estructurados para artículos
El marcado NewsArticle ayuda a Google a entender la página. La guía de Google dice que no hay propiedades obligatorias, así que añade las que correspondan.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"datePublished": "2026-11-05T08:00:00+01:00",
"dateModified": "2026-11-05T09:20:00+01:00",
"author": [{
"@type": "Person",
"name": "Jane Doe",
"url": "https://example.com/authors/jane-doe"
}]
}
</script>
- Usa fechas ISO 8601 con zona horaria.
- Mantén las fechas del marcado iguales a las de la página y muéstralas con una etiqueta como «Publicado» o «Última actualización».
- Proporciona imágenes en 16x9, 4x3 y 1x1, cada una de al menos 50.000 píxeles al multiplicar el ancho por el alto.
- Usa imágenes editoriales, nunca tu logotipo.
- Mantén el marcado igual en móvil y en escritorio.
Un feed RSS limpio
Tu feed es la versión legible por máquinas más sencilla de tu sitio, y tú decides exactamente qué contiene.
<item>
<title>Article headline</title>
<link>https://example.com/news/article-headline</link>
<guid isPermaLink="true">https://example.com/news/article-headline</guid>
<pubDate>Thu, 05 Nov 2026 07:00:00 GMT</pubDate>
<description>One or two sentences that describe the article.</description>
<category>Politics</category>
</item>
- Cada canal necesita
title,linkydescription. - Da a cada elemento un
guidestable y usa el enlace permanente siempre que puedas. - Escribe
pubDateen el formato RFC 822 que se muestra aquí. - Usa URL canónicas de los artículos.
- Mantén
descriptionbreve y deja fuera el texto de pago. - Añade un enlace de descubrimiento en el
headde cada página.
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">
Envía las cabeceras ETag o Last-Modified y responde 304 Not Modified cuando el If-None-Match o el If-Modified-Since de un lector de feeds indique que nada ha cambiado. Así las consultas frecuentes resultan baratas para tu servidor.
Lista de comprobación
- Añade
langal elementohtmlen cada idioma. - Añade un enlace de salto y un único punto de referencia
maina cada plantilla. - Etiqueta cada
navy cadaaside. - Ejecuta una comprobación del esquema de encabezados en tu plantilla de artículo.
- Revisa los textos
alten tu CMS y hazlos un campo obligatorio para las imágenes editoriales. - Comprueba el contraste en enlaces, pies de foto y firmas.
- Prueba con un teclado y con VoiceOver o TalkBack.
- Publica una declaración de accesibilidad con una dirección de contacto.
- Pregunta a un asesor si la Ley Europea de Accesibilidad se aplica a tus servicios.
- Añade JSON-LD de
NewsArticlecon fechas que coincidan con la página. - Valida tu feed y confirma que envía
ETagoLast-Modified.
Fuentes
- Page Regions, W3C WAI
- Headings, W3C WAI
- Decorative Images, W3C WAI
- F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute, W3C WAI
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C
- Directive (EU) 2019/882 on the accessibility requirements for products and services, Official Journal of the EU, Publications Office
- Learn About Article Schema Markup, Google Search Central
- Add a Byline Date to Google Search Results, Google Search Central
- RSS 2.0 specification, RSS Advisory Board
- RSS autodiscovery, RSS Advisory Board
- RFC 9110: HTTP Semantics, IETF