Accessibility เว็บช็อป (EAA): ต้องแก้อะไร ทำไม Overlay ไม่ช่วย

ตั้งแต่ 28 มิถุนายน 2568 เว็บช็อปที่ขายให้ผู้บริโภคในสหภาพยุโรปต้องเข้าถึงได้ตามกฎหมายการเข้าถึงของยุโรป (European Accessibility Act) ยกเว้นธุรกิจขนาดจิ๋ว (พนักงานน้อยกว่า 10 คน และมียอดขายหรืองบดุลไม่เกิน €2 million) ในทางปฏิบัติหมายความว่าร้านของคุณควรผ่านเกณฑ์ WCAG 2.1 ระดับ AA คือ ตัวอักษรอ่านง่ายด้วยคอนทราสต์ที่พอเหมาะ ปุ่มและลิงก์มีชื่อ รูปภาพมี alt text ซูมได้จริง และชำระเงินได้ด้วยคีย์บอร์ดอย่างเดียว ร้านส่วนใหญ่พลาดในจุดเดิม ๆ ไม่กี่จุด และแก้ได้ที่โค้ดของธีม ไม่ใช่ด้วยวิดเจ็ต overlay เมื่อเราสแกนเว็บช็อป 1,482 แห่งในเดือนตุลาคม 2569 พบว่า 64% มีตัวอักษรที่คอนทราสต์ต่ำเกินไป และครึ่งหนึ่งมีลิงก์ที่ไม่มีชื่อให้อ่าน

บทความนี้พูดถึงด้านเทคนิค ไม่ใช่คำปรึกษาทางกฎหมาย แต่ละประเทศในสหภาพยุโรปนำกฎหมายนี้ไปบัญญัติเป็นกฎหมายของตนเอง (ในเยอรมนีคือ Barrierefreiheitsstärkungsgesetz (BFSG)) หน้าที่และการบังคับใช้ที่แน่ชัดจึงต่างกันไปในแต่ละประเทศ

กฎหมายกำหนดอะไรกับเว็บช็อป

• ใครต้องทำ: ธุรกิจที่ขายสินค้าหรือบริการให้ผู้บริโภคออนไลน์ในสหภาพยุโรป บริการอีคอมเมิร์ซถูกระบุไว้ในตัวบทโดยตรง (Directive (EU) 2019/882 มาตรา 2)
• ใครได้รับการยกเว้น: ธุรกิจขนาดจิ๋วที่ให้บริการ คือมีพนักงานน้อยกว่า 10 คน และมียอดขายหรืองบดุลต่อปีไม่เกิน €2 million โปรดตรวจสอบกับบริษัทของคุณเอง หากโตเกินเกณฑ์นี้ก็จะเข้าข่ายทันที
• เริ่มเมื่อไร: กฎเริ่มใช้ตั้งแต่ 28 มิถุนายน 2568 สัญญาบริการที่ตกลงกันก่อนวันดังกล่าวอาจดำเนินต่อไปโดยไม่เปลี่ยนแปลงได้อย่างช้าที่สุดถึง 28 มิถุนายน 2573 แต่เว็บช็อปที่เปิดอยู่ในวันนี้ถือเป็นบริการที่ให้อยู่ในปัจจุบัน
• ถึงระดับไหน: มาตรฐานที่ประสานกันในยุโรป EN 301 549 ซึ่งอ้างอิง WCAG 2.1 ระดับ AA สำหรับเนื้อหาเว็บ นี่คือเกณฑ์ที่ผู้ตรวจสอบหรือหน่วยงานกำกับดูแลใช้วัด

สิ่งที่เราพบจากร้านค้าจริง 1,482 แห่ง

ระหว่าง 20 ถึง 26 ตุลาคม 2569 เราสแกนหน้าแรกของร้าน Shopify และ WooCommerce จำนวน 1,482 แห่งในสหราชอาณาจักร เนเธอร์แลนด์ เบลเยียม และไทย ด้วย EngineeringScore เครื่องมือตรวจสอบที่เราพัฒนาเอง ผลทั้งหมดอยู่ในบทความ เราสแกนเว็บช็อป 1,482 แห่งก่อน Black Friday ส่วนที่เกี่ยวกับการเข้าถึง:

ปัญหาในหน้าแรก	จำนวนร้าน
ตัวอักษรคอนทราสต์ต่ำเกินไป	64%
ลิงก์ที่ไม่มีชื่อให้อ่าน (ไอคอนตะกร้า โซเชียล และเมนูที่เป็นไอคอนล้วน)	50%
รูปภาพที่ไม่มี alt text	21% (Shopify 24%, WooCommerce 17%)
ซูมบนมือถือไม่ได้	12%

นั่นคือเฉพาะหน้าแรกและตรวจแบบอัตโนมัติ การตรวจอัตโนมัติพบได้ประมาณเฉพาะปัญหาที่วัดได้จากโค้ด ส่วนการใช้คีย์บอร์ด ลำดับโฟกัส และหน้าชำระเงินต้องให้คนทดสอบ ดังนั้นให้มองตัวเลขเหล่านี้เป็นระดับต่ำสุด ไม่ใช่เพดาน

วิธีแก้ เรียงตามลำดับที่เราจะทำ

1. คอนทราสต์

WCAG กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (ประมาณ 24 px หรือ 19 px ตัวหนา) ตัวการที่พบบ่อยคือราคาและป้ายกำกับสีเทาอ่อน ตัวอักษรสีขาวบนรูปถ่าย และสีประจำแบรนด์ที่ซีดบนปุ่ม วิธีแก้อยู่ที่การตั้งค่าสีของธีมหรือ CSS: ทำสีเทาให้เข้มขึ้น วางข้อความบนพื้นทึบหรือพื้นที่ทำให้เข้มแทนการวางบนรูปตรง ๆ และตรวจทุกคู่สีด้วยเครื่องมือตรวจคอนทราสต์หนึ่งครั้ง ถ้าทำได้ให้ทำในการตั้งค่าของธีม เพื่อไม่ให้การอัปเดตมาลบสิ่งที่แก้ไว้

2. ตั้งชื่อให้ทุกลิงก์และทุกปุ่ม

ไอคอนตะกร้า แว่นขยายค้นหา เมนูแฮมเบอร์เกอร์ หรือโลโก้ Instagram ไม่มีความหมายสำหรับโปรแกรมอ่านหน้าจอ หากไม่มีชื่อที่เป็นข้อความ Google ก็อ่านชื่อเหล่านี้เช่นกัน ให้เพิ่มข้อความที่ซ่อนไว้ทางสายตา หรือใช้ aria-label:

<a href="/cart" aria-label="Cart, 2 items"><svg aria-hidden="true">…</svg></a>

ใน Shopify ส่วนใหญ่อยู่ในส่วน header และ footer ของธีม ใน WooCommerce อยู่ในเทมเพลต header ของธีมหรือวิดเจ็ตของ page builder ซึ่งมักมีช่องใส่ป้ายกำกับที่ไม่มีใครกรอก

3. Alt text ที่อธิบายสินค้า

รูปสินค้าต้องมี alt text ที่บอกว่าในภาพมีอะไร เช่น "รองเท้าบูทหนังสีดำ มองจากด้านข้าง" ไม่ใช่ "IMG_4021" หรือชื่อสินค้าซ้ำห้าครั้ง รูปที่เป็นเพียงการตกแต่งให้ใส่ alt="" ที่ว่างเปล่า เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป ทั้ง Shopify และ WooCommerce มีช่อง alt ต่อรูปในหลังบ้าน งานที่ต้องทำคือกรอกให้ครบ และตรวจว่าธีมแสดงค่านั้นออกมาจริง

4. ให้ผู้ใช้ซูมได้

ถ้าธีมของคุณมี maximum-scale=1 หรือ user-scalable=no ในแท็ก viewport ผู้เข้าชมจะซูมบนโทรศัพท์ไม่ได้ ให้ลบทั้งสองอย่างออก แท็กควรเป็น <meta name="viewport" content="width=device-width, initial-scale=1"> จากนั้นซูมเป็น 200% บนเบราว์เซอร์เดสก์ท็อปและตรวจว่าไม่มีอะไรซ้อนทับหรือหายไป

5. คีย์บอร์ดและโฟกัส

วางเมาส์ไว้ก่อนแล้วกด Tab ไล่ไปตามหน้าแรก หน้าสินค้า และขั้นตอนชำระเงินทั้งหมด คุณควรเห็นเสมอว่าตอนนี้อยู่ตรงไหน (มีเส้นขอบโฟกัสที่มองเห็นได้) เข้าถึงทุกปุ่มได้ เปิดและปิดเมนูกับป๊อปอัปได้ และเลือกไซซ์หรือตัวเลือกสินค้าได้ ธีมมักลบเส้นขอบโฟกัสออกเพราะดีไซเนอร์เห็นว่าไม่สวย ให้ใส่กลับด้วยสไตล์ :focus-visible ที่ชัดเจน ป๊อปอัปสมัครรับจดหมายข่าวและคุกกี้เป็นกับดักที่พบบ่อยที่สุด คือปิดด้วยคีย์บอร์ดไม่ได้

6. ฟอร์มและหน้าชำระเงิน

ทุกช่องต้องมีป้ายกำกับจริง (ไม่ใช่แค่ placeholder ที่หายไปเมื่อพิมพ์) ข้อความแจ้งข้อผิดพลาดต้องบอกว่าผิดตรงไหนเป็นตัวอักษร ไม่ใช่แค่สีแดง และต้องระบุช่องที่จำเป็นต้องกรอก ขั้นตอนชำระเงินมักทำงานในเฟรมของผู้ให้บริการชำระเงินเอง ส่วนนั้นเป็นหน้าที่ของผู้ให้บริการ แต่ขั้นตอนรอบ ๆ เป็นของคุณ ให้ทดสอบเส้นทางทั้งหมดกับทุกวิธีชำระเงินที่คุณรับ

7. ภาษาและโครงสร้าง

กำหนดภาษาของหน้า (<html lang="nl"> สำหรับร้านภาษาดัตช์ และเป็นเช่นนี้กับภาษาอื่น) เพื่อให้โปรแกรมอ่านหน้าจออ่านออกเสียงได้ถูกต้อง ใส่หัวข้อหลักหนึ่งหัวข้อต่อหน้า และเรียงหัวข้อให้เป็นลำดับ เป็นการแก้เล็ก ๆ ในธีมที่ช่วยเสิร์ชเอนจินด้วย

ทำไมวิดเจ็ต overlay แก้ไม่ได้

Accessibility overlay คือสคริปต์ที่เพิ่มแถบเครื่องมือหรือชั้น "AI" ทับบนร้านของคุณ และสัญญาว่าจะทำให้ผ่านกฎหมายด้วยโค้ดบรรทัดเดียว ปัญหาข้างต้นอยู่ใน HTML และ CSS ของธีม สคริปต์ที่ทำงานทีหลังซ่อมสิ่งเหล่านี้ได้ไม่น่าเชื่อถือ และอาจรบกวนโปรแกรมอ่านหน้าจอกับการตั้งค่าที่ผู้ใช้ใช้อยู่แล้ว ในเดือนเมษายน 2568 คณะกรรมาธิการการค้าของรัฐบาลกลางสหรัฐฯ (FTC) สั่งให้ accessiBe ผู้ให้บริการ overlay จ่าย $1 million และห้ามอ้างโดยไม่มีหลักฐานว่าผลิตภัณฑ์ของตนทำให้เว็บไซต์ใดก็ตามผ่าน WCAG ได้ นอกจากนี้ overlay ยังเป็นสคริปต์ของบุคคลที่สามเพิ่มอีกตัวในหน้าที่จากการสแกนของเรา โหลดโค้ดจากบริษัทต่าง ๆ มัธยฐาน 15 แห่งอยู่แล้ว

เอางบที่จะจ่ายให้ overlay ไปใช้แก้ธีมจะดีกว่า โดยมากเป็นงานครั้งเดียว และจะยังคงถูกแก้อยู่จนกว่าจะมีคนเปลี่ยนธีม

Shopify หรือ WooCommerce: งานอยู่ตรงไหน

• Shopify: หน้าชำระเงินของแพลตฟอร์ม Shopify ดูแลเอง ส่วนหน้าร้านคือธีมของคุณ เริ่มจากการตั้งค่าสีและตัวอักษรของธีม แล้วแก้ header, footer และเทมเพลตสินค้าเรื่องป้ายกำกับ การแสดง alt text และสไตล์โฟกัส แอปที่แทรกป๊อปอัปและวิดเจ็ตมักเป็นตัวการหลัก ให้ทดสอบโดยเปิดแอปเหล่านั้นไว้
• WooCommerce: คุณเป็นเจ้าของทุกอย่าง ทั้งธีม page builder และปลั๊กอินหน้าชำระเงิน ให้ใส่การแก้ไขใน child theme เพื่อไม่ให้การอัปเดตเขียนทับ ตรวจทุกปลั๊กอินที่สร้าง HTML ฝั่งหน้าร้าน โดยเฉพาะสไลเดอร์ เมกะเมนู และตัวกรองสินค้า

ไม่ว่าแบบไหน ให้เขียนการแก้ไขลงในธีมหรือ child theme และทดสอบซ้ำหลังอัปเดตธีมหรือแอปทุกครั้ง กำลังเลือกแพลตฟอร์มอยู่ใช่ไหม การเปรียบเทียบแพลตฟอร์มอีคอมเมิร์ซ ของเราสรุปข้อดีข้อเสียไว้แล้ว

ตรวจร้านของคุณเองใน 30 นาที

1. ตรวจหน้าแรก หน้าสินค้าหนึ่งหน้า และตะกร้า ด้วย EngineeringScore หรือการตรวจ accessibility ของ Lighthouse ใน Chrome (F12, Lighthouse)
2. กด Tab ไล่ไปจนสั่งซื้อทดสอบสำเร็จโดยไม่ใช้เมาส์
3. ซูมเป็น 200% บนแล็ปท็อป และใช้สองนิ้วซูมบนโทรศัพท์
4. เปิด VoiceOver (iPhone, Mac) หรือ TalkBack (Android) แล้วฟัง header กับสินค้าหนึ่งชิ้น
5. จดสิ่งที่ไม่ผ่าน เรียงตามจุดที่ลูกค้าเสียยอดขาย: หน้าชำระเงินก่อน แล้วหน้าสินค้า แล้วส่วนที่เหลือ

ถ้าปัญหาอยู่ที่หน้าชำระเงิน คู่มือเรื่อง เว็บช็อปที่หน้าชำระเงินใช้งานไม่ได้ ช่วยให้คุณทดสอบเส้นทางทั้งหมดได้ และถ้ากำลังเตรียมตัวสำหรับช่วงที่ยุ่งที่สุดของปี ให้ใช้ร่วมกับ เช็กลิสต์ Black Friday

อยากให้แก้ให้ ไม่ใช่แค่ได้รายการ

เริ่มจาก ตรวจเว็บไซต์ ของเรา หรือส่งที่อยู่เว็บช็อปของคุณมาทาง ติดต่อเรา เวลาที่ใช้แก้ขึ้นอยู่กับธีมและแอป เราจึงประเมินให้หลังดูเบื้องต้น คุณจ่ายเป็นรายชั่วโมงได้ หรือซื้อบัตรชั่วโมง 14 ชั่วโมงในราคา ฿25,900