Saltar al contenido
Mera News

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, aside y footer tal como fueron pensados. Cuando una página tenga más de un nav, 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 h1 para el titular y mantén los niveles en orden. Un h4 justo después de un h2 es 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, ol y table reales, 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 alt que 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 figure y figcaption para 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:

RequisitoObjetivoCriterio
Contraste del texto4,5:1, o 3:1 para texto grande1.4.3
Cambio de tamaño del textoHasta el 200% sin perder nada1.4.4
Reorganización320 píxeles CSS de ancho sin desplazamiento lateral1.4.10
Foco visibleUn indicador de foco de teclado visible2.4.7
Foco no ocultoEl foco nunca queda oculto del todo2.4.11
Tamaño del área táctilAl menos 24 por 24 píxeles CSS2.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, link y description.
  • Da a cada elemento un guid estable y usa el enlace permanente siempre que puedas.
  • Escribe pubDate en el formato RFC 822 que se muestra aquí.
  • Usa URL canónicas de los artículos.
  • Mantén description breve y deja fuera el texto de pago.
  • Añade un enlace de descubrimiento en el head de 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 lang al elemento html en cada idioma.
  • Añade un enlace de salto y un único punto de referencia main a cada plantilla.
  • Etiqueta cada nav y cada aside.
  • Ejecuta una comprobación del esquema de encabezados en tu plantilla de artículo.
  • Revisa los textos alt en 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 NewsArticle con fechas que coincidan con la página.
  • Valida tu feed y confirma que envía ETag o Last-Modified.

Fuentes