การเข้าถึงเว็บไซต์หมายถึงการสร้างเว็บไซต์ที่ผู้ที่มีความพิการสามารถใช้งานได้อย่างมีประสิทธิภาพ ซึ่งรวมถึงผู้ที่ใช้โปรแกรมอ่านหน้าจอ การนำทางด้วยแป้นพิมพ์เท่านั้น การควบคุมด้วยเสียง การขยายหน้าจอ หรือผู้ที่มีข้อจำกัดด้านการมองเห็นสี ในระบบนิเวศของ WordPress การเข้าถึงเป็นทั้งข้อกำหนดทางกฎหมายในหลายเขตอำนาจศาลและเป็นวิธีปฏิบัติที่ดีในการเข้าถึงผู้ชมที่กว้างขึ้น—มีผู้คนมากกว่า 1 พันล้านคนทั่วโลกที่มีความพิการในรูปแบบใดรูปแบบหนึ่ง
ในคู่มือนี้ เราจะพูดถึงขั้นตอนที่เป็นประโยชน์ในการทำให้เว็บไซต์ WordPress ของคุณเข้าถึงได้ โดยปฏิบัติตามแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) 2.2 ที่ระดับ AA—มาตรฐานที่มักจะถูกกำหนดโดยกฎหมายการเข้าถึงรวมถึง ADA (สหรัฐอเมริกา), EAA (สหภาพยุโรป) และ AODA (แคนาดา)
การทำความเข้าใจหลักการของ WCAG 2.2
WCAG ถูกจัดระเบียบตามหลักการสี่ประการที่เรียกว่า POUR:
| หลักการ | ความหมาย | ตัวอย่าง WordPress |
|---|---|---|
| สามารถรับรู้ได้ | ผู้ใช้สามารถรับรู้เนื้อหาผ่านการมองเห็น การได้ยิน หรือการสัมผัส | ข้อความ alt สำหรับภาพ คำบรรยายสำหรับวิดีโอ ความแตกต่างของสีที่เพียงพอ |
| สามารถใช้งานได้ | ผู้ใช้สามารถนำทางและโต้ตอบกับอินเทอร์เฟซได้ | การนำทางด้วยแป้นพิมพ์ ลิงก์ข้าม ไม่มีการดักจับแป้นพิมพ์ |
| สามารถเข้าใจได้ | ผู้ใช้สามารถเข้าใจเนื้อหาและวิธีการใช้อินเทอร์เฟซได้ | ภาษาที่ชัดเจน การนำทางที่สอดคล้องกัน ข้อความแสดงข้อผิดพลาด |
| แข็งแกร่ง | เนื้อหาทำงานได้ในทุกเบราว์เซอร์ อุปกรณ์ และเทคโนโลยีช่วยเหลือ | HTML ที่ถูกต้อง บทบาท ARIA ที่เหมาะสม การทำเครื่องหมายเชิงความหมาย |
การเลือกธีมที่เข้าถึงได้
โครงสร้าง HTML และ CSS ของธีม WordPress ของคุณเป็นพื้นฐานของการเข้าถึงเว็บไซต์ของคุณ เมื่อ เลือกธีม WordPress ให้ประเมินปัจจัยการเข้าถึงเหล่านี้:
- HTML เชิงความหมาย: ธีมใช้ส่วนประกอบ HTML5 ที่เหมาะสม (header, nav, main, article, aside, footer) แทนที่จะใช้ div ทั่วไปสำหรับทุกอย่าง
- ลำดับหัวข้อ: H1 → H2 → H3 ตามลำดับที่มีเหตุผลโดยไม่ข้ามระดับ
- ลิงก์ข้าม: มีลิงก์ "ข้ามไปยังเนื้อหา" เป็นองค์ประกอบที่สามารถโฟกัสได้เป็นอันดับแรก ช่วยให้ผู้ใช้แป้นพิมพ์สามารถข้ามการนำทางได้
- การนำทางด้วยแป้นพิมพ์: องค์ประกอบที่โต้ตอบได้ทั้งหมด (ลิงก์ ปุ่ม ฟอร์ม) สามารถเข้าถึงและใช้งานได้ด้วยปุ่ม Tab
- ตัวบ่งชี้โฟกัส: องค์ประกอบที่โฟกัสมีขอบเขตหรือไฮไลต์ที่มองเห็นได้ (ไม่ถูกลบออกด้วย outline: none)
- ความแตกต่างของสี: ข้อความตรงตามอัตราส่วนความแตกต่างของ WCAG AA (4.5:1 สำหรับข้อความปกติ, 3:1 สำหรับข้อความขนาดใหญ่)
ธีมที่ถูกแท็กว่า "พร้อมสำหรับการเข้าถึง" บน WordPress.org ได้ผ่านการตรวจสอบการเข้าถึงพื้นฐานแล้ว อย่างไรก็ตาม แท็กนี้บ่งบอกถึงจุดเริ่มต้น ไม่ใช่การปฏิบัติตาม WCAG อย่างเต็มที่ ในหมู่ธีมที่เป็นที่นิยม GeneratePress มีการเขียนโค้ดที่ดีโดยมี HTML เชิงความหมายที่สะอาดและจุดหมาย ARIA ที่เหมาะสม
การเข้าถึงภาพ
ข้อความ Alt
ทุกภาพที่มีความหมายต้องมีข้อความ alt ที่อธิบาย WordPress ทำให้สิ่งนี้ง่าย—ฟิลด์ข้อความ alt มีอยู่ในห้องสมุดสื่อและเมื่อแทรกภาพลงในเนื้อหา
| ประเภทภาพ | แนวทางข้อความ Alt | ตัวอย่าง |
|---|---|---|
| ภาพผลิตภัณฑ์ | อธิบายผลิตภัณฑ์ | "กระเป๋าสะพายข้างหนังสีแดงพร้อมหัวเข็มขัดทอง มุมมองด้านหน้า" |
| ภาพหน้าจอ | อธิบายสิ่งที่ภาพหน้าจอแสดง | "แดชบอร์ด WordPress แสดงหน้า Plugins ที่มีปลั๊กอินที่ใช้งานอยู่ 12 ตัว" |
| อินโฟกราฟิก | สรุปข้อมูลสำคัญ | "แผนภูมิเปรียบเทียบ: คุณสมบัติของ Elementor กับ Gutenberg Elementor มีวิดเจ็ตมากกว่า 100 ตัว Gutenberg มีบล็อกมากกว่า 90 ตัว" |
| ภาพตกแต่ง | ข้อความ alt ว่าง (alt="") | ลวดลายพื้นหลัง ตัวแบ่ง ไอคอนตกแต่งที่ไม่มีเนื้อหา |
| กราฟ/แผนภูมิ | อธิบายแนวโน้มหรือข้อมูลสำคัญ | "แผนภูมิเส้นแสดงการเพิ่มขึ้นของการเข้าชมเว็บไซต์ 45% ตั้งแต่เดือนมกราคมถึงเดือนธันวาคม 2025" |
การปรับแต่งภาพเพื่อการเข้าถึง
- ไม่ควรใช้ภาพของข้อความ—ใช้ข้อความจริงที่จัดรูปแบบด้วย CSS แทน
- ตรวจสอบให้แน่ใจว่าข้อความที่ฝังอยู่ในภาพตรงตามข้อกำหนดด้านความแตกต่าง
- ให้คำอธิบายยาวสำหรับภาพที่ซับซ้อน (กราฟ แผนภาพ) โดยใช้ย่อหน้าที่อยู่ติดกันหรือแอตทริบิวต์ longdesc
- ตรวจสอบให้แน่ใจว่าภาพมีขนาดที่เหมาะสมเพื่อไม่ให้เกิดการเปลี่ยนแปลงเลย์เอาต์ (CLS)
การนำทางด้วยแป้นพิมพ์
ผู้ใช้หลายคนนำทางเว็บไซต์ทั้งหมดด้วย
แป้นพิมพ์—Tab เพื่อเลื่อนไปข้างหน้า, Shift+Tab เพื่อเลื่อนไปข้างหลัง, Enter เพื่อเปิดใช้งานลิงก์/ปุ่ม, Space เพื่อสลับช่องทำเครื่องหมายและคลิกปุ่ม, และ Escape เพื่อปิดโมดัล
ปัญหาการเข้าถึงด้วยแป้นพิมพ์ทั่วไป
- การดักจับโฟกัส: กล่องโต้ตอบโมดัลที่ไม่อนุญาตให้กลับไปยังเนื้อหาหลัก (โมดัลควรดักจับโฟกัสภายในโมดัล และ Escape ควรปิดมัน)
- การขาดตัวบ่งชี้โฟกัส: CSS ที่ลบเส้นขอบเริ่มต้นบนองค์ประกอบที่มีโฟกัส (ไม่ควรใช้ *:focus { outline: none } ทั่วไป)
- องค์ประกอบที่ไม่สามารถโต้ตอบได้พร้อมตัวจัดการคลิก: Divs หรือ spans ที่มีเหตุการณ์ onClick ที่ไม่สามารถเข้าถึงด้วยแป้นพิมพ์ได้ (ใช้ปุ่มหรือลิงก์แทน)
- เมนูแบบเลื่อนที่เปิดเฉพาะเมื่อชี้เมาส์: ผู้ใช้แป้นพิมพ์ไม่สามารถกระตุ้นสถานะการชี้เมาส์ได้ เมนูควรเปิดเมื่อมีโฟกัส/Enter ด้วย
- ส่วนประกอบที่กำหนดเองโดยไม่มี ARIA: แท็บ, แอคคอร์เดียน, และคารูเซลที่สร้างขึ้นโดยไม่มีบทบาท ARIA และตัวจัดการแป้นพิมพ์ที่เหมาะสม
สีและความเปรียบต่าง
WCAG AA ต้องการอัตราส่วนความเปรียบต่างขั้นต่ำดังนี้:
| องค์ประกอบ | อัตราส่วนขั้นต่ำ | ตัวอย่าง (ผ่าน) | ตัวอย่าง (ไม่ผ่าน) |
|---|---|---|---|
| ข้อความปกติ (<18px) | 4.5:1 | #333 บน #fff (12.6:1) | #999 บน #fff (2.8:1) |
| ข้อความขนาดใหญ่ (≥18px หรือ ≥14px ตัวหนา) | 3:1 | #555 บน #fff (7.4:1) | #aaa บน #fff (2.3:1) |
| ส่วนประกอบ UI (ปุ่ม, ฟิลด์ข้อมูล) | 3:1 | ปุ่มสีน้ำเงิน #2563eb (4.6:1) | สีน้ำเงินอ่อน #93c5fd (1.8:1) |
| เนื้อหาที่ไม่ใช่ข้อความ (ไอคอน, ขอบ) | 3:1 | ไอคอนสีเข้มบนพื้นหลังสีอ่อน | ไอคอนสีเทาอ่อนบนพื้นขาว |
ใช้เครื่องมือเช่น WebAIM's Contrast Checker หรือส่วนขยายเบราว์เซอร์ axe เพื่อตรวจสอบอัตราส่วนความเปรียบต่าง อย่าอิงจากสีเพียงอย่างเดียวในการสื่อสารข้อมูล—ใช้ป้ายข้อความ, รูปแบบ, หรือไอคอนเพิ่มเติมจากการจัดสี
การเข้าถึงฟอร์ม
ฟอร์มเป็นหนึ่งในพื้นที่ที่สำคัญที่สุดสำหรับการเข้าถึง ไม่ว่าจะใช้ Gutenberg blocks, Gravity Forms, หรือ WPForms:
- ระบุป้ายชื่อทุกฟิลด์: ใช้ <label> ที่เชื่อมโยงกับแต่ละฟิลด์ผ่านแอตทริบิวต์ for/id ข้อความ placeholder ไม่สามารถแทนที่ป้ายชื่อได้
- จัดกลุ่มฟิลด์ที่เกี่ยวข้อง: ใช้ <fieldset> และ <legend> สำหรับกลุ่มของฟิลด์ที่เกี่ยวข้อง (เช่น ฟิลด์ที่อยู่จัดส่ง)
- ให้ข้อความแสดงข้อผิดพลาด: เมื่อการตรวจสอบล้มเหลว ให้ระบุว่าฟิลด์ใดมีข้อผิดพลาดและอธิบายวิธีการแก้ไข ใช้ aria-describedby เพื่อเชื่อมโยงข้อความแสดงข้อผิดพลาดกับฟิลด์ของพวกเขา
- ทำเครื่องหมายฟิลด์ที่จำเป็น: ใช้แอตทริบิวต์ required และแสดงให้เห็นว่าฟิลด์ใดจำเป็นด้วยข้อความ (ไม่ใช่แค่เครื่องหมายดอกจัน)
- สนับสนุนการเติมอัตโนมัติ: เพิ่มแอตทริบิวต์การเติมอัตโนมัติที่เหมาะสม (ชื่อ, อีเมล, โทรศัพท์, ที่อยู่-บรรทัด1) เพื่อให้เบราว์เซอร์สามารถกรอกข้อมูลฟอร์มโดยอัตโนมัติ
การเข้าถึงเนื้อหา
โครงสร้างหัวเรื่อง
ลำดับชั้นของหัวเรื่องที่เหมาะสมช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอเข้าใจโครงสร้างหน้าและนำทางระหว่างส่วนต่างๆ กฎ:
- หนึ่ง H1 ต่อหน้า (ชื่อหน้า/โพสต์)
- H2 สำหรับส่วนหลัก
- H3 สำหรับส่วนย่อยภายใน H2
- ไม่ข้ามระดับ (H2 → H4 โดยไม่มี H3 เป็นสิ่งที่ไม่ถูกต้อง)
- ไม่ใช้หัวเรื่องเพื่อการจัดรูปแบบภาพ—ใช้คลาส CSS แทน
ข้อความลิงก์
หลีกเลี่ยงข้อความลิงก์ทั่วไปที่ไม่มีความหมายในบริบท:
| ข้อความลิงก์ที่ไม่ดี | ข้อความลิงก์ที่เข้าถึงได้ |
|---|---|
| "คลิกที่นี่" | "อ่านคู่มือความปลอดภัยของ WordPress" |
| "อ่านเพิ่มเติม" | "อ่านรีวิว Elementor Pro ฉบับเต็ม" |
| "เรียนรู้เพิ่มเติม" | "เรียนรู้วิธีการเพิ่มประสิทธิภาพการชำระเงิน WooCommerce" |
| "ที่นี่" | "ดาวน์โหลดรายงานการทดสอบประสิทธิภาพ" |
ตาราง
ตารางข้อมูลควรรวมถึง:
- <thead> ที่มี <th> สำหรับหัวคอลัมน์ (พร้อม scope="col")
- <th scope="row"> สำหรับหัวแถว
- องค์ประกอบ <caption> ที่อธิบายวัตถุประสงค์ของตาราง
- โครงสร้างที่เรียบง่าย—หลีกเลี่ยงการรวมเซลล์เมื่อเป็นไปได้ เนื่องจากจะยากสำหรับโปรแกรมอ่านหน้าจอในการตีความ
การทดสอบการเข้าถึงของเว็บไซต์ของคุณ
| เครื่องมือ | ประเภท | สิ่งที่มันทดสอบ |
|---|---|---|
| axe DevTools | ส่วนขยายเบราว์เซอร์ | การตรวจสอบ WCA อัตโนมัติ |
| การตรวจจับการละเมิด G | ||
| WAVE | ส่วนขยายเบราว์เซอร์ / เว็บ | การประเมินการเข้าถึงด้วยการแสดงความคิดเห็นแบบอินไลน์ |
| Lighthouse | Chrome DevTools | การตรวจสอบการเข้าถึงพร้อมคะแนนและคำแนะนำ |
| การทดสอบด้วยแป้นพิมพ์ | แบบแมนนวล | นำทางทั้งไซต์โดยใช้เพียง Tab, Enter, และ Escape |
| โปรแกรมอ่านหน้าจอ | แบบแมนนวล | ทดสอบด้วย VoiceOver (Mac), NVDA (Windows), หรือ TalkBack (Android) |
เครื่องมืออัตโนมัติสามารถจับปัญหาการเข้าถึงได้ประมาณ 30-50% การทดสอบด้วยแป้นพิมพ์และโปรแกรมอ่านหน้าจอเป็นสิ่งจำเป็นเพื่อระบุปัญหาที่เกี่ยวกับการโต้ตอบที่เครื่องมืออัตโนมัติไม่สามารถตรวจจับได้
ปลั๊กอิน WordPress สำหรับการเข้าถึง
- WP Accessibility: เพิ่มลิงก์ข้าม แก้ไขปัญหาการเข้าถึงทั่วไป และเพิ่มแถบเครื่องมือสำหรับการตั้งค่าของผู้ใช้
- One Click Accessibility: เพิ่มแถบเครื่องมือการเข้าถึงที่ส่วนหน้า (ขนาดฟอนต์, ความตัดกัน, ไฮไลท์ลิงก์)
- แม่แบบเริ่มต้นที่มีการเข้าถึง: Astra และ GeneratePress มีพื้นฐานการเข้าถึงที่แข็งแกร่งในธีมพื้นฐานของพวกเขา
หมายเหตุ: ปลั๊กอินการซ้อนทับการเข้าถึง (ที่เพิ่มวิดเจ็ตลอยที่มีปุ่ม "แก้ไข") ถูกวิจารณ์อย่างกว้างขวางโดยชุมชนการเข้าถึง พวกเขาไม่ทำให้เว็บไซต์เข้าถึงได้—พวกเขาเพิ่มชั้นผิวเผินที่อาจรบกวนเทคโนโลยีช่วยเหลือ มุ่งเน้นไปที่การสร้างการเข้าถึงในธีมและเนื้อหาของคุณแทนที่จะพึ่งพาการซ้อนทับ
สำหรับรายละเอียดเพิ่มเติม โปรดดูเอกสารทางการ: แนวทาง WCAG, ทีมเข้าถึง WordPress.
คำถามที่พบบ่อย
WordPress สามารถเข้าถึงได้ทันทีหรือไม่?
WordPress core ได้ปรับปรุงอย่างมากในด้านการเข้าถึง แผงผู้ดูแลระบบสามารถนำทางด้วยแป้นพิมพ์ได้เป็นส่วนใหญ่ และบล็อกเอดิเตอร์รวมถึง ARIA labels อย่างไรก็ตาม การเข้าถึงของไซต์ของคุณขึ้นอยู่กับธีมและปลั๊กอินที่คุณใช้ ธีมที่มีโครงสร้าง HTML ที่ไม่ดีจะทำลายฟีเจอร์การเข้าถึงที่มีอยู่ใน WordPress
ฉันจำเป็นต้องมีเว็บไซต์ที่เข้าถึงได้ตามกฎหมายหรือไม่?
ในหลายเขตอำนาจศาล ใช่ กฎหมาย ADA (สหรัฐอเมริกา), European Accessibility Act (สหภาพยุโรป, มีผลตั้งแต่เดือนมิถุนายน 2025), AODA (แคนาดา) และกฎหมายที่คล้ายกันกำหนดให้เว็บไซต์ต้องเข้าถึงได้ ข้อกำหนดเฉพาะขึ้นอยู่กับสถานที่ ประเภทธุรกิจ และกลุ่มเป้าหมายของคุณ ปรึกษาผู้เชี่ยวชาญด้านกฎหมายสำหรับข้อกำหนดเฉพาะสำหรับสถานการณ์ของคุณ
การเข้าถึงมีผลต่อ SEO หรือไม่?
ใช่ มีความทับซ้อนกันอย่างมีนัยสำคัญ โครงสร้างหัวเรื่องที่เหมาะสม ข้อความ alt ที่มีคำอธิบาย HTML เชิงพาณิชย์ การโหลดหน้าอย่างรวดเร็ว และความเป็นมิตรกับมือถือเป็นประโยชน์ต่อทั้งการเข้าถึงและ SEO เว็บไซต์ที่ปฏิบัติตามแนวทาง WCAG มักจะมีอันดับที่ดีกว่าเพราะพวกเขามอบประสบการณ์ผู้ใช้ที่ดีกว่าอย่างพื้นฐาน สำหรับ แนวทางปฏิบัติที่ดีที่สุดด้าน SEO ดูรายการตรวจสอบของเรา
ผู้สร้างหน้าเว็บสามารถสร้างเว็บไซต์ที่เข้าถึงได้หรือไม่?
Elementor และผู้สร้างหน้าเว็บอื่น ๆ สามารถสร้างเนื้อหาที่เข้าถึงได้หากใช้อย่างถูกต้อง กุญแจสำคัญคือการรับประกันลำดับชั้นของหัวเรื่องที่เหมาะสม การเพิ่มข้อความ alt ให้กับภาพ การใช้วิดเจ็ตเชิงพาณิชย์ (ปุ่มแทนที่จะเป็น div ที่มีสไตล์) และการทดสอบการนำทางด้วยแป้นพิมพ์ ตัวผู้สร้างเองไม่ได้กำหนดการเข้าถึง—วิธีที่คุณใช้มันคือสิ่งที่กำหนด
ข้อผิดพลาดในการเข้าถึงที่พบบ่อยที่สุดบนเว็บไซต์ WordPress คืออะไร?
การขาดหรือข้อความ alt ที่ไม่เพียงพอบนภาพคือการละเมิด WCAG ที่มีการรายงานบ่อยที่สุด ข้อผิดพลาดที่พบบ่อยเป็นอันดับสองคือความตัดกันของสีที่ไม่เพียงพอ ทั้งสองอย่างนี้สามารถแก้ไขได้ง่าย—ต้องการความสนใจและการฝึกฝนอย่างสม่ำเสมอแทนที่จะต้องใช้ความเชี่ยวชาญทางเทคนิค
ฉันจะทำให้ WooCommerce เข้าถึงได้อย่างไร?
แม่แบบเริ่มต้นของ WooCommerce มีการเข้าถึงที่เหมาะสม พื้นที่สำคัญที่ต้องตรวจสอบ: ข้อความ alt ของภาพสินค้า ป้ายชื่อในฟิลด์การชำระเงิน ความสามารถในการนำทางด้วยแป้นพิมพ์ของรถเข็นและกระบวนการชำระเงิน และข้อความแสดงข้อผิดพลาดที่เข้าถึงได้สำหรับความล้มเหลวในการตรวจสอบฟอร์ม การใช้ธีมที่เข้าถึงได้เป็นพื้นฐานจะช่วยลดงานเฉพาะ WooCommerce ที่จำเป็นลงอย่างมาก
สร้างเว็บไซต์ WordPress ที่เข้าถึงได้
เริ่มต้นด้วยพื้นฐานธีมที่เข้าถึงได้ ค้นหาธีมที่มีน้ำหนักเบาและเขียนโค้ดได้ดีซึ่งให้ความสำคัญกับ HTML เชิงพาณิชย์และการปฏิบัติตาม WCAG
เรียกดูธีมที่เข้าถึงได้ →
