Cẩm nang nhà xuất bản, chương 6

Dữ liệu cho trình đọc màn hình và máy móc

Xem lại lần cuối vào tháng 11 năm 2026

Trình đọc màn hình, công cụ tìm kiếm và trình đọc nguồn cấp đều phụ thuộc vào cách trang của bạn được cấu trúc. HTML rõ ràng, dữ liệu có cấu trúc và một nguồn cấp sạch sẽ cho mỗi bên thứ họ cần.

Bắt đầu từ HTML

Những phần tử này tạo cho trang các mốc điều hướng, để người dùng trình đọc màn hình có thể nhảy thẳng đến bài viết.

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

Mốc điều hướng (landmark): Dùng header, nav, main, aside và footer đúng như mục đích của chúng. Khi một trang có nhiều hơn một nav, hãy gắn nhãn cho từng cái.
Liên kết bỏ qua (skip link): Nó cho người dùng bàn phím bỏ qua phần điều hướng lặp lại, giúp đáp ứng tiêu chí thành công 2.4.1 của WCAG. Hãy làm cho nó hiện ra khi được focus.
Đề mục: Dùng một h1 cho tiêu đề, và giữ các cấp theo đúng thứ tự. Một h4 ngay sau h2 là kiểu nhảy cấp cần tránh. Hãy chọn đề mục theo vị trí trong dàn ý, không bao giờ theo kích thước.
Danh sách và bảng: Dùng đúng các phần tử ul, ol và table, để phần mềm có thể đọc được cấu trúc của chúng (tiêu chí thành công 1.3.1).

Ngôn ngữ

Đặt lang trên phần tử html ở mọi ngôn ngữ (tiêu chí thành công 3.1.1). Nếu thiếu, trình đọc màn hình có thể đọc bài viết của bạn bằng sai giọng. Hãy đánh dấu cả các đoạn bằng ngôn ngữ khác (tiêu chí thành công 3.1.2).

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

Hình ảnh

Viết văn bản alt cho độc giả biết bức ảnh bổ sung điều gì cho câu chuyện.
Dùng alt="" cho hình ảnh thuần túy trang trí. Đừng bỏ trống thuộc tính này, vì một số trình đọc màn hình sẽ đọc to tên tệp.
Dùng nền CSS cho phần trang trí thuần túy khi có thể.
Dùng figure và figcaption cho chú thích và ghi công ảnh.

Trên từng màn hình

Các yêu cầu WCAG 2.2 AA quan trọng nhất đối với một mẫu trang tin:

Yêu cầu	Mục tiêu	Tiêu chí
Độ tương phản của văn bản	4.5:1, hoặc 3:1 với chữ lớn	1.4.3
Thay đổi cỡ chữ	Lên đến 200% mà không mất gì	1.4.4
Tái bố trí	Rộng 320 pixel CSS mà không cuộn ngang	1.4.10
Thấy được focus	Có dấu hiệu focus bàn phím nhìn thấy được	2.4.7
Focus không bị che	Focus không bao giờ bị ẩn hoàn toàn	2.4.11
Kích thước vùng chạm	Ít nhất 24 x 24 pixel CSS	2.5.8

Trên di động, hãy kiểm thử bằng VoiceOver hoặc TalkBack, và với cỡ chữ lớn nhất. Trên máy tính, hãy duyệt qua trang chỉ bằng các phím Tab, Enter và Escape.

Hãy công bố một tuyên bố về khả năng tiếp cận, nêu rõ những gì bạn đã đáp ứng, những gì chưa, và cách báo cáo sự cố.

Đạo luật Tiếp cận châu Âu

Chỉ thị (EU) 2019/882 áp dụng cho các dịch vụ được liệt kê cung cấp cho người tiêu dùng sau ngày 28 tháng 6 năm 2025. Danh sách này gồm các dịch vụ thương mại điện tử, sách điện tử và các dịch vụ cung cấp quyền truy cập vào phương tiện nghe nhìn. Dịch vụ thương mại điện tử được định nghĩa là các dịch vụ cung cấp từ xa, qua trang web và các dịch vụ trên thiết bị di động, theo yêu cầu của người tiêu dùng để giao kết hợp đồng. Các doanh nghiệp siêu nhỏ cung cấp dịch vụ được miễn trừ.

Đạo luật không liệt kê riêng các trang tin. Một trang bán gói đăng ký trực tuyến, hoặc bán sách điện tử hay quyền xem video, vẫn có thể thuộc phạm vi áp dụng, và luật quốc gia bổ sung thêm chi tiết. Hãy nhờ luật sư xác định tình huống của chính bạn.

Dữ liệu có cấu trúc cho bài viết

Đánh dấu NewsArticle giúp Google hiểu trang. Hướng dẫn của Google cho biết không có thuộc tính bắt buộc nào, nên hãy thêm những thuộc tính phù hợp.

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

Dùng ngày theo ISO 8601 kèm múi giờ.
Giữ ngày trong phần đánh dấu giống với ngày hiển thị trên trang, và hiển thị chúng cùng một nhãn như "Published" hoặc "Last updated".
Cung cấp hình ảnh ở các tỷ lệ 16x9, 4x3 và 1x1, mỗi hình có chiều rộng nhân chiều cao ít nhất 50,000 pixel.
Dùng hình ảnh biên tập, không bao giờ dùng logo của bạn.
Giữ phần đánh dấu giống nhau trên di động và máy tính.

Một nguồn cấp RSS sạch

Nguồn cấp của bạn là phiên bản máy đọc được đơn giản nhất của trang, và bạn quyết định chính xác nó chứa những gì.

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

Mỗi kênh cần có title, link và description.
Cho mỗi mục một guid ổn định, và dùng liên kết cố định khi có thể.
Viết pubDate theo định dạng RFC 822 như trên.
Dùng URL chuẩn của bài viết.
Giữ description ngắn, và không đưa văn bản trả phí vào.
Thêm một liên kết khám phá vào head của mọi trang.

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

Hãy gửi tiêu đề ETag hoặc Last-Modified, và trả lời 304 Not Modified khi If-None-Match hoặc If-Modified-Since của trình đọc nguồn cấp cho thấy không có gì thay đổi. Cách này giữ cho các lần tải thường xuyên không tốn nhiều tài nguyên của máy chủ.

Danh sách kiểm tra

Thêm lang vào phần tử html ở mọi ngôn ngữ.
Thêm một liên kết bỏ qua và một mốc main vào mỗi mẫu trang.
Gắn nhãn cho từng nav và aside.
Kiểm tra dàn ý đề mục trên mẫu bài viết của bạn.
Rà soát văn bản alt trong CMS, và biến nó thành trường bắt buộc với hình ảnh biên tập.
Kiểm tra độ tương phản của liên kết, chú thích và dòng tên tác giả.
Kiểm thử bằng bàn phím, và bằng VoiceOver hoặc TalkBack.
Công bố một tuyên bố về khả năng tiếp cận kèm địa chỉ liên hệ.
Hỏi luật sư xem Đạo luật Tiếp cận châu Âu có áp dụng cho các dịch vụ của bạn không.
Thêm JSON-LD NewsArticle với ngày khớp với trang.
Xác thực nguồn cấp của bạn, và xác nhận nó gửi ETag hoặc Last-Modified.

Nguồn

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