ข้ามไปยังเนื้อหา
Mera News

คู่มือสำหรับสำนักพิมพ์ บทที่ 6

ข้อมูลสำหรับโปรแกรมอ่านหน้าจอและเครื่อง

ตรวจทานล่าสุด พฤศจิกายน 2026

โปรแกรมอ่านหน้าจอ เสิร์ชเอนจิน และโปรแกรมอ่านฟีด ล้วนขึ้นอยู่กับโครงสร้างของเว็บไซต์ของคุณ 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>
  • Landmark: ใช้ header, nav, main, aside และ footer ตามที่ออกแบบมา เมื่อหน้ามี nav มากกว่าหนึ่งอัน ให้ใส่ป้ายกำกับทุกอัน
  • ลิงก์ข้าม: ช่วยให้ผู้ใช้คีย์บอร์ดข้ามการนำทางที่ซ้ำกัน ซึ่งช่วยให้ผ่าน WCAG เกณฑ์ความสำเร็จ 2.4.1 ทำให้มองเห็นได้เมื่อโฟกัส
  • หัวข้อ: ใช้ h1 หนึ่งอันสำหรับพาดหัว และเรียงลำดับให้ถูกต้อง h4 ที่ตามหลัง h2 ทันทีคือตัวอย่างของการข้ามที่ควรหลีกเลี่ยง เลือกหัวข้อตามตำแหน่งในโครงร่าง ไม่ใช่ตามขนาด
  • รายการและตาราง: ใช้องค์ประกอบ ul, ol และ table จริง เพื่อให้ซอฟต์แวร์อ่านโครงสร้างได้ (เกณฑ์ความสำเร็จ 1.3.1)

ภาษา

ตั้ง lang บนองค์ประกอบ html ในทุกภาษา (เกณฑ์ความสำเร็จ 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
Reflowความกว้าง 320 CSS พิกเซลโดยไม่ต้องเลื่อนไปด้านข้าง1.4.10
โฟกัสที่มองเห็นได้ตัวบ่งชี้โฟกัสคีย์บอร์ดที่มองเห็นได้2.4.7
โฟกัสไม่ถูกบังโฟกัสไม่เคยถูกซ่อนทั้งหมด2.4.11
ขนาดเป้าอย่างน้อย 24 คูณ 24 CSS พิกเซล2.5.8

บนมือถือ ให้ทดสอบด้วย VoiceOver หรือ TalkBack และด้วยการตั้งค่าข้อความขนาดใหญ่ที่สุด บนเดสก์ท็อป ให้เดินผ่านหน้าโดยใช้เฉพาะปุ่ม Tab, Enter และ Escape

เผยแพร่คำชี้แจงด้านการเข้าถึงที่บอกว่าคุณทำได้ตามข้อใด ยังไม่ได้ตามข้อใด และแจ้งปัญหาได้อย่างไร

European Accessibility Act

Directive (EU) 2019/882 ใช้กับบริการที่ระบุไว้ซึ่งให้แก่ผู้บริโภคหลังวันที่ 28 มิถุนายน 2025 รายการนี้รวมบริการอีคอมเมิร์ซ หนังสืออิเล็กทรอนิกส์ และบริการที่ให้เข้าถึงสื่อโสตทัศน์ บริการอีคอมเมิร์ซถูกกำหนดว่าเป็นบริการที่ให้จากระยะไกลผ่านเว็บไซต์และบริการบนอุปกรณ์พกพา ตามคำขอของผู้บริโภคเพื่อทำสัญญา วิสาหกิจรายย่อยที่ให้บริการได้รับการยกเว้น

กฎหมายฉบับนี้ไม่ได้ระบุเว็บไซต์ข่าวโดยตรง เว็บไซต์ที่ขายการสมัครสมาชิกออนไลน์ หรือขายหนังสืออิเล็กทรอนิกส์หรือการเข้าถึงวิดีโอ ก็อาจอยู่ในขอบเขตได้ และกฎหมายของแต่ละประเทศเพิ่มรายละเอียดไว้ ควรตรวจสอบสถานะของคุณกับที่ปรึกษากฎหมาย

ข้อมูลแบบมีโครงสร้างสำหรับบทความ

มาร์กอัป 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>
  • ทุก channel ต้องมี title, link และ description
  • ให้แต่ละรายการมี guid ที่คงที่ และใช้ลิงก์ถาวรเมื่อทำได้
  • เขียน pubDate ในรูปแบบ RFC 822 ตามที่แสดงไว้
  • ใช้ URL บทความแบบ canonical
  • ทำ description ให้สั้น และไม่ใส่ข้อความที่ต้องจ่าย
  • เพิ่มลิงก์สำหรับค้นพบฟีดใน head ของทุกหน้า
<link rel="alternate" type="application/rss+xml" title="Latest news" href="https://example.com/feed.xml">

ส่งเฮดเดอร์ ETag หรือ Last-Modified และตอบ 304 Not Modified เมื่อ If-None-Match หรือ If-Modified-Since จากโปรแกรมอ่านฟีดบ่งชี้ว่าไม่มีอะไรเปลี่ยน วิธีนี้ทำให้การดึงข้อมูลถี่ ๆ ไม่เป็นภาระต่อเซิร์ฟเวอร์ของคุณ

รายการตรวจสอบ

  • เพิ่ม lang บนองค์ประกอบ html ในทุกภาษา
  • เพิ่มลิงก์ข้ามและ landmark main หนึ่งอันในแต่ละเทมเพลต
  • ใส่ป้ายกำกับให้ทุก nav และ aside
  • ตรวจโครงร่างหัวข้อของเทมเพลตบทความ
  • ตรวจข้อความ alt ใน CMS และทำให้เป็นช่องที่จำเป็นสำหรับภาพประกอบเนื้อหาข่าว
  • ตรวจคอนทราสต์ของลิงก์ คำบรรยายภาพ และชื่อผู้เขียน
  • ทดสอบด้วยคีย์บอร์ด และด้วย VoiceOver หรือ TalkBack
  • เผยแพร่คำชี้แจงด้านการเข้าถึงพร้อมที่อยู่ติดต่อ
  • ถามที่ปรึกษากฎหมายว่า European Accessibility Act ใช้กับบริการของคุณหรือไม่
  • เพิ่ม JSON-LD ของ NewsArticle โดยให้วันที่ตรงกับหน้า
  • ตรวจสอบฟีดของคุณ และยืนยันว่าส่ง ETag หรือ Last-Modified

แหล่งอ้างอิง