Accessibility
Semantic HTML
ARIA (Accessible Rich Internet Applications)
Alt Image
Form
Keyboard
Media
Color
Headings Structure
Table
Language
Focusable
Error Identification and Suggestions
Live Regions
| องค์ประกอบ | รายละเอียด |
|---|---|
| Semantic HTML | ใช้แท็ก HTML ที่เหมาะสมสำหรับเนื้อหา เช่น <header>, <nav>, <main>, <article>, <section>, <footer> เพื่อให้เครื่องมือช่วยเหลือเข้าใจโครงสร้างของหน้าเว็บ |
| ARIA (Accessible Rich Internet Applications) | ใช้ ARIA attributes เช่น role, aria-label, aria-labelledby, aria-hidden, aria-live เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับการทำงานของส่วนต่าง ๆ ของเว็บ |
| Alternative Text for Images | ใช้ alt attribute ในแท็ก <img> เพื่ออธิบายภาพสำหรับผู้ใช้ที่ไม่สามารถมองเห็นภาพได้ |
| Form Accessibility | ใช้ <label> เพื่อเชื่อมต่อกับ <input> อย่างถูกต้องโดยใช้ for attribute และใช้ aria-describedby เพื่อให้คำอธิบายเพิ่มเติมสำหรับฟอร์ม |
| Keyboard Accessibility | ให้แน่ใจว่าผู้ใช้สามารถเข้าถึงและใช้งานเว็บไซต์ได้ผ่านการใช้แป้นพิมพ์ทั้งหมด โดยใช้ tabindex เพื่อกำหนดลำดับของการนำทางผ่านแป้นพิมพ์ |
| Accessible Links | ใช้คำอธิบายลิงก์ที่ชัดเจนและเป็นประโยชน์ ไม่ใช้เพียง "คลิกที่นี่" หรือ "อ่านเพิ่มเติม" |
| Media Accessibility | ใช้คำบรรยาย (captions) สำหรับวิดีโอ และใช้คำบรรยายเสียง (audio descriptions) สำหรับเนื้อหาที่เป็นภาพเคลื่อนไหว |
| Color Contrast | ให้แน่ใจว่ามีความแตกต่างที่เพียงพอระหว่างสีของข้อความและพื้นหลัง เพื่อให้สามารถอ่านได้ง่าย |
| Headings Structure | ใช้หัวข้อ (<h1>, <h2>, <h3>, ฯลฯ) ตามลำดับที่ถูกต้องเพื่อให้ผู้ใช้ที่ใช้ screen reader เข้าใจโครงสร้างเนื้อหาได้ดีขึ้น |
| Table Accessibility | ใช้ <caption> เพื่ออธิบายตาราง และใช้ <th> กับ scope attribute เพื่อระบุหัวข้อของตาราง |
| Landmark Roles | ใช้ ARIA roles เช่น role="banner", role="navigation", role="main", role="contentinfo" เพื่อกำหนดบทบาทของส่วนต่าง ๆ ในหน้าเว็บ |
| Language Attributes | ใช้ lang attribute เพื่อกำหนดภาษาของเนื้อหาในเอกสาร HTML เพื่อให้เครื่องมือช่วยเหลือรู้ว่าต้องใช้อ่านอย่างไร |
| Focusable Elements | ใช้ tabindex และ focus เพื่อกำหนดองค์ประกอบที่สามารถรับโฟกัสได้และลำดับการนำทาง |
| Responsive Design | ทำให้เว็บไซต์สามารถปรับเปลี่ยนการแสดงผลตามอุปกรณ์และขนาดหน้าจอต่าง ๆ เพื่อให้ผู้ใช้ทุกคนสามารถเข้าถึงได้ง่าย |
| Error Identification and Suggestions | แสดงข้อผิดพลาดในฟอร์มและให้คำแนะนำที่ชัดเจนในการแก้ไข เช่น ใช้ aria-invalid และ aria-describedby เพื่อบอกว่ามีข้อผิดพลาดและอธิบายเพิ่มเติม |
| Live Regions | ใช้ aria-live เพื่อบอกให้ screen reader อ่านออกเสียงการเปลี่ยนแปลงเนื้อหาแบบไดนามิก |