เชี่ยวชาญข้อความทางเลือก ลำดับชั้นของหัวข้อที่โปรแกรมอ่านหน้าจอนำทางได้จริง และการใช้ ARIA เฉพาะกรณีที่ HTML แบบเนทีฟทำไม่ได้
เปิดบทเรียนนี้ใน Kodokonการเข้าถึงไม่ใช่ชั้นเสริมสวยงามที่แปะเข้ามาตอนท้ายโปรเจกต์ แต่เป็นคุณสมบัติเชิงโครงสร้างของ HTML ของคุณ อย่างแรกคือแอตทริบิวต์ alt ข้อความทางเลือกที่ดีจะอธิบายหน้าที่ของรูปภาพในบริบทของมัน ไม่ใช่ลักษณะของมันแบบพิกเซลต่อพิกเซล กราฟยอดขายไม่ได้อธิบายว่า "กราฟแท่งสีน้ำเงิน" แต่อธิบายด้วยข้อมูลที่มันสื่อ และรูปภาพที่ใช้เพื่อการตกแต่งล้วน ๆ ต้องได้รับ alt="" แบบว่างเปล่า นั่นคือสัญญาณชัดเจนที่บอกให้โปรแกรมอ่านหน้าจอข้ามมันไป การละเว้นแอตทริบิวต์เป็นทางเลือกที่แย่ที่สุด เพราะโปรแกรมอ่านหน้าจอจะประกาศชื่อไฟล์แทน
<img src="sales-chart.png"
alt="2025 sales: +18% in the last quarter">
<img src="divider-ornament.png" alt="">งานที่สอง: ลำดับชั้นของหัวข้อ ผู้ใช้โปรแกรมอ่านหน้าจอส่วนใหญ่จะกระโดดจากหัวข้อหนึ่งไปอีกหัวข้อหนึ่งเพื่อสร้างแผนที่ในใจของหน้าเว็บ ดังนั้นโครงร่าง h1 → h2 → h3 ของคุณต้องสะท้อนโครงสร้างเชิงตรรกะของเนื้อหา ไม่ใช่ขนาดที่มองเห็นได้ตามที่คุณอยากได้ กฎที่ต่อรองไม่ได้สองข้อ: มี h1 เพียงหนึ่งเดียวต่อหน้า และไม่ข้ามระดับ (ไม่มี h4 อยู่ใต้ h2 โดยตรง) ถ้าหัวข้อดู "ใหญ่เกินไป" ให้แก้ใน CSS ไม่ใช่ลดระดับความหมายของมัน
<h1>Dashboard</h1>
<section>
<h2>Statistics</h2>
<h3>Monthly visits</h3>
<h3>Conversion rate</h3>
</section>
<section>
<h2>Exportable reports</h2>
</section>ARIA จะสมเหตุสมผลเมื่อ HTML แบบเนทีฟไม่สามารถแสดงสถานะแบบไดนามิกได้ เช่น เมนูที่เปิดหรือปิด, พื้นที่ที่อัปเดตแบบสด, แท็บที่กำลังใช้งาน แอตทริบิวต์สำคัญคือ aria-expanded (สถานะเปิด/ปิด), aria-controls (ลิงก์ไปยังองค์ประกอบที่ถูกควบคุม) และ aria-live (การประกาศการอัปเดต) จำหลักการนี้ไว้: HTML แบบเนทีฟให้บทบาท ส่วน ARIA เติมเต็มสถานะและคุณสมบัติที่ JavaScript ของคุณเปลี่ยนแปลงไปตามเวลา
<button aria-expanded="false" aria-controls="menu">
Menu
</button>
<ul id="menu" hidden>
<li><a href="/profile">Profile</a></li>
<li><a href="/settings">Settings</a></li>
</ul>