퍼블리셔 가이드, 6장

스크린 리더와 기계를 위한 데이터

마지막 검토: 2026년 11월

스크린 리더, 검색 엔진, 피드 리더는 모두 사이트의 구조에 의존합니다. 명확한 HTML, 구조화된 데이터, 깔끔한 피드가 각각에게 필요한 것을 제공합니다.

HTML부터 시작하기

다음 요소들이 페이지의 랜드마크를 만들어, 스크린 리더 사용자가 기사로 바로 이동할 수 있게 합니다.

<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>

랜드마크: header, nav, main, aside, footer를 의도된 용도대로 사용하세요. 페이지에 nav가 둘 이상이면 각각에 라벨을 붙이세요.
건너뛰기 링크: 키보드 사용자가 반복되는 탐색을 건너뛸 수 있게 해 주며, WCAG 성공 기준 2.4.1을 충족하는 데 도움이 됩니다. 포커스를 받으면 보이게 하세요.
제목: 헤드라인에는 h1 하나를 쓰고, 단계를 순서대로 유지하세요. h2 바로 뒤에 h4가 오는 것이 피해야 할 건너뛰기입니다. 제목은 크기가 아니라 개요에서의 위치로 고르세요.
목록과 표: 소프트웨어가 구조를 읽을 수 있도록 진짜 ul, ol, table 요소를 사용하세요(성공 기준 1.3.1).

언어

모든 로케일에서 html 요소에 lang을 설정하세요(성공 기준 3.1.1). 없으면 스크린 리더가 기사를 엉뚱한 음성으로 읽을 수 있습니다. 다른 언어로 된 구절도 표시하세요(성공 기준 3.1.2).

<p>The minister called it <span lang="fr">une erreur historique</span>.</p>

이미지

그림이 기사에 더해 주는 내용을 독자에게 전하는 alt 텍스트를 쓰세요.
순수하게 장식용인 이미지에는 alt=""를 사용하세요. 속성 자체를 생략하지 마세요. 일부 스크린 리더가 파일 이름을 소리 내어 읽습니다.
가능하면 순수한 장식은 CSS 배경으로 처리하세요.
사진 캡션과 출처 표기에는 figure와 figcaption을 사용하세요.

화면별로

뉴스 템플릿에서 가장 중요한 WCAG 2.2 AA 요구 사항입니다.

요구 사항	목표	기준
텍스트 대비	4.5:1, 큰 텍스트는 3:1	1.4.3
텍스트 크기 조절	200%까지 잃는 것 없이	1.4.4
리플로	320 CSS 픽셀 너비에서 가로 스크롤 없음	1.4.10
포커스 표시	눈에 보이는 키보드 포커스 표시	2.4.7
포커스 가려짐 방지	포커스가 완전히 가려지지 않음	2.4.11
대상 크기	최소 24 x 24 CSS 픽셀	2.5.8

모바일에서는 VoiceOver나 TalkBack과 가장 큰 글자 크기 설정으로 테스트하세요. 데스크톱에서는 Tab, Enter, Escape 키만으로 페이지를 끝까지 이동해 보세요.

충족하는 것, 아직 충족하지 못하는 것, 문제를 신고하는 방법을 담은 접근성 안내를 게시하세요.

유럽 접근성법

지침(EU) 2019/882는 2025년 6월 28일 이후 소비자에게 제공되는 목록상의 서비스에 적용됩니다. 목록에는 전자상거래 서비스, 전자책, 시청각 미디어에 접근하게 해 주는 서비스가 포함됩니다. 전자상거래 서비스는 소비자의 요청에 따라 계약을 체결하기 위해 웹사이트와 모바일 기기 기반 서비스를 통해 원격으로 제공되는 서비스로 정의됩니다. 서비스를 제공하는 초소규모 기업은 면제됩니다.

이 법은 뉴스 사이트를 그 자체로 목록에 올리지 않습니다. 온라인으로 구독을 판매하거나 전자책 또는 동영상 접근권을 판매하는 사이트는 여전히 적용 대상일 수 있으며, 각국 법률이 세부 사항을 더합니다. 자사의 해당 여부는 법률 전문가와 확인하세요.

기사를 위한 구조화된 데이터

NewsArticle 마크업은 Google이 페이지를 이해하는 데 도움이 됩니다. Google의 가이드는 필수 속성이 없다고 설명하므로, 해당하는 속성을 추가하세요.

<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>

시간대가 포함된 ISO 8601 날짜를 사용하세요.
마크업의 날짜를 페이지에 표시된 날짜와 같게 유지하고, “게시일”이나 “최종 업데이트” 같은 라벨과 함께 보여 주세요.
이미지는 16x9, 4x3, 1x1 비율로 제공하고, 각각 가로와 세로를 곱한 값이 50,000픽셀 이상이어야 합니다.
로고가 아니라 기사용 이미지를 사용하세요.
모바일과 데스크톱에서 마크업을 똑같이 유지하세요.

깔끔한 RSS 피드

피드는 사이트를 기계가 읽을 수 있게 만든 가장 단순한 버전이며, 무엇을 담을지는 퍼블리셔가 정확히 정합니다.

<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>

모든 채널에는 title, link, description이 필요합니다.
각 항목에 변하지 않는 guid를 지정하고, 가능하면 퍼머링크를 사용하세요.
pubDate는 여기에 보이는 RFC 822 형식으로 쓰세요.
정식(canonical) 기사 URL을 사용하세요.
description은 짧게 유지하고 유료 텍스트는 넣지 마세요.
모든 페이지의 head에 검색용 링크를 추가하세요.

<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

ETag 또는 Last-Modified 헤더를 보내고, 피드 리더의 If-None-Match나 If-Modified-Since로 보아 변경이 없다면 304 Not Modified로 응답하세요. 그러면 잦은 요청도 서버에 부담이 적습니다.

체크리스트

모든 로케일의 html 요소에 lang을 추가하세요.
각 템플릿에 건너뛰기 링크와 main 랜드마크 하나를 추가하세요.
각 nav와 aside에 라벨을 붙이세요.
기사 템플릿의 제목 개요를 점검하세요.
CMS에서 alt 텍스트를 점검하고, 기사용 이미지에는 필수 입력란으로 만드세요.
링크, 캡션, 바이라인의 대비를 확인하세요.
키보드와, VoiceOver 또는 TalkBack으로 테스트하세요.
연락처가 있는 접근성 안내를 게시하세요.
유럽 접근성법이 자사 서비스에 적용되는지 법률 전문가에게 문의하세요.
페이지와 날짜가 일치하는 NewsArticle JSON-LD를 추가하세요.
피드를 검증하고 ETag 또는 Last-Modified를 보내는지 확인하세요.

출처

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