รายงานแก้ไขการเข้าถึงฉบับตัวอย่าง Harbor & Pine เป็นร้านค้าสมมติที่เราสร้างขึ้นพร้อมข้อบกพร่องด้านการเข้าถึงที่พบบ่อย แล้วทดสอบด้วยเอนจินเดียวกับที่สแกนเว็บไซต์ของคุณ

รายงานแก้ไขการเข้าถึงฉบับตัวอย่าง

harborandpine.example

แพลตฟอร์ม:: Shopify
จัดทำเมื่อ:: 24 ก.ย. 2026
จำนวนหน้าที่ทดสอบ:: 9
เอนจิน:: axe-core 4.13.0

ไฟล์ PDF การเข้าถึง ไฟล์ PDF รายงานฉบับเต็มผลการสแกน ดูรายงานนี้เป็นภาษาอังกฤษ

สรุป

เราทดสอบ 9 หน้า ของ harborandpine.example (4 หน้ามาจาก sitemap ของคุณ) เมื่อ 24 ก.ย. 2026 ด้วย axe-core 4.13.0 ตาม WCAG 2.2 ระดับ A และ AA พร้อมการทดสอบการซื้อด้วยคีย์บอร์ดเพียงอย่างเดียว
พบปัญหา 8 ประเภทที่ไม่ผ่านการทดสอบ WCAG อัตโนมัติ (131 จุด) มี 8 ประเภทที่จัดอยู่ในกลุ่มแก้ก่อน
เส้นทางติดขัดผู้ซื้อที่ใช้คีย์บอร์ดเพียงอย่างเดียวไปต่อไม่ได้ที่: เลือกตัวเลือกและจำนวน
มี 4 รายการที่ต้องให้คนตรวจ: การทดสอบอัตโนมัติตั้งข้อสังเกตไว้แต่ตัดสินไม่ได้
เริ่มจาก: โฟกัสของคีย์บอร์ดติดอยู่ในแบนเนอร์คุกกี้; เลือกตัวเลือกสินค้าด้วยคีย์บอร์ดไม่ได้; ปุ่มต้องมีข้อความที่ระบุได้

การทดสอบอัตโนมัติพบปัญหาด้านการเข้าถึงของเว็บไซต์ได้เพียงบางส่วน ไม่ใช่ทั้งหมด รายงานนี้อธิบายสิ่งที่การทดสอบของเราพบและวิธีแก้ไข ไม่ใช่คำแนะนำทางกฎหมาย และไม่ได้รับรองการปฏิบัติตาม ADA, European Accessibility Act หรือกฎหมายใด ๆ

ภาพรวม

P1 · แก้ก่อนขัดขวางผู้เข้าชมในหน้าสำคัญ: 8
P2 · แก้ถัดไปอุปสรรคระดับร้ายแรงหรือปานกลาง: 0
P3 · ปรับปรุงปัญหาเล็กน้อยและแนวปฏิบัติที่ดี: 2

จำนวนครั้งที่พบตามระดับความรุนแรง

ร้ายแรงมาก: 73
ร้ายแรง: 58
ปานกลาง: 25
เล็กน้อย: 0

ข้อบกพร่องที่ยืนยันแล้วประเภทปัญหาที่ไม่ผ่านการทดสอบอัตโนมัติ: 10
ต้องตรวจสอบถูกตั้งข้อสังเกต แต่ต้องให้คนตัดสิน: 4
การตรวจที่ผ่านกฎอัตโนมัติที่ไม่พบข้อผิดพลาด: 32
ไม่ได้ทดสอบขั้นตอนในเส้นทางและการตรวจด้วยคน: 7

เราทดสอบ 9 หน้า โดย 4 หน้าสุ่มเลือกจาก sitemap ของคุณ วันที่เป้าหมายเป็นข้อเสนอแนะตามระดับความรุนแรง โปรดตกลงวันที่สุดท้ายกับนักพัฒนาของคุณ

ภาพรวมเว็บไซต์

ระบุจากหลักฐานสาธารณะในหน้าที่ทดสอบ ป้ายประเภทอาจผิดได้ และมีผลเพียงกำหนดว่าจะเรียกใช้การตรวจเพิ่มเติมใด

ประเภทเว็บไซต์

ร้านค้าออนไลน์ความมั่นใจสูง
- ทำงานบน Shopify ซึ่งเป็นแพลตฟอร์มร้านค้า
- ลิงก์ไปยังตะกร้า
- ลิงก์สินค้าหรือร้านค้า
แลนดิ้งเพจความมั่นใจปานกลาง
- มีลิงก์ไปยังหน้าภายในเพียง 6 หน้า

เทคโนโลยีที่ตรวจพบ

Shopifyความมั่นใจสูง
ไฟล์หรือสคริปต์ของ Shopify บนหน้าเว็บ

การตรวจสำหรับเว็บไซต์นี้

การตรวจทั่วไป: การเข้าถึง SEO ความเร็ว ความปลอดภัย และอีเมล
โมดูลอีคอมเมิร์ซ: หน้าคอลเลกชัน หน้าสินค้า และตะกร้า รวมถึงเส้นทางการซื้อด้วยคีย์บอร์ดไปจนถึงปุ่มชำระเงิน
หมายเหตุสำหรับ Shopify: ขั้นตอนการแก้ในธีมและหน้าผู้ดูแล ส่วนเฮดเดอร์และคุกกี้ที่แพลตฟอร์มจัดการจะแสดงไว้เพื่ออ้างอิง

เส้นทางการซื้อด้วยคีย์บอร์ด

เราลองซื้อสินค้าด้วยคีย์บอร์ดเพียงอย่างเดียว (Tab, Shift+Tab, Enter, Space, Escape) แบบเดียวกับผู้ที่ใช้เมาส์ไม่ได้ เราเพิ่มสินค้า 1 ชิ้นลงตะกร้าในเซสชันที่ใช้แล้วทิ้ง และหยุดที่ปุ่มชำระเงิน: เราไม่เข้าสู่ขั้นตอนชำระเงิน และไม่พิมพ์ข้อมูลส่วนตัวหรือข้อมูลการชำระเงินใด ๆ เป้าหมาย: ไปจากหน้าแรกถึงปุ่มชำระเงินโดยใช้คีย์บอร์ดเพียงอย่างเดียว

01ไปถึงเมนูหลัก
ผ่าน
โฟกัสไปถึง “Shop” ในเมนูนำทางหลังจากกด Tab 21 ครั้ง
สิ่งที่คาดหวัง: การกด Tab จากด้านบนสุดของหน้าแรกไปถึงลิงก์ในเมนูหลักได้
- หมายเหตุ: แบนเนอร์คุกกี้ยึดโฟกัสของคีย์บอร์ดไว้จนกระทั่งเรากด Enter ที่ “Accept all”
วิธีทำให้เกิดซ้ำ
https://harborandpine.example/
1. เปิดหน้าแรก
2. คลิกแถบที่อยู่ของเบราว์เซอร์ แล้วกด Tab ซ้ำ ๆ (Shift+Tab เพื่อย้อนกลับ)
ลำดับโฟกัสที่เราสังเกตได้
“Shop”
02เปิดสินค้าจากคอลเลกชัน
ผ่าน
โฟกัสไปถึง “Trail Daypack 22L” หลังจากกด Tab 9 ครั้ง และ Enter เปิด /products/trail-daypack
สิ่งที่คาดหวัง: Tab ไปถึงสินค้าในตารางสินค้าของคอลเลกชัน และ Enter เปิดหน้าสินค้านั้นได้
วิธีทำให้เกิดซ้ำ
https://harborandpine.example/collections/all
1. เปิด /collections/all
2. กด Tab จนสินค้าในตารางถูกไฮไลต์ แล้วกด Enter
ลำดับโฟกัสที่เราสังเกตได้
“Harbor & Pine” → “Shop” → “New arrivals” → “Our story” → body > header.site > div.icons > button → “Account” → body > header.site > div.icons > a → “FeaturedPrice, low to highPrice, high to low” → “Trail Daypack 22L”
03เลือกตัวเลือกและจำนวน
ไม่ผ่าน
ตัวเลือกสินค้า 3 รายการรับโฟกัสของคีย์บอร์ดไม่ได้: “S” “M” “L” ตัวเลือกเหล่านี้ตอบสนองต่อเมาส์ แต่ผู้ใช้คีย์บอร์ดเลือกไม่ได้
สิ่งที่คาดหวัง: ตัวเลือกสินค้าทุกรายการ (ขนาด สี รุ่นย่อย) และช่องจำนวนเข้าถึงได้ด้วย Tab
2.1.1 Keyboard · ความมั่นใจ: สูง
เลือกตัวเลือกและจำนวน: องค์ประกอบที่ไม่ผ่าน ซึ่งถูกวงไว้
วิธีทำให้เกิดซ้ำ
https://harborandpine.example/products/trail-daypack
1. เปิด /products/trail-daypack
2. กด Tab จากด้านบนสุดของหน้า และจดว่าตัวควบคุมใดได้รับโฟกัสก่อนถึงปุ่มเพิ่มลงตะกร้า
ลำดับโฟกัสที่เราสังเกตได้
“Harbor & Pine” → “Shop” → “New arrivals” → “Our story” → … อีก 5 รายการ … → body > header.site > div.icons > a → div.page.product > div.gallery > div.thumbs > button → div.page.product > div.gallery > div.thumbs > button → div.page.product > div.gallery > div.thumbs > button → div.page.product > div > div.swatches > button → div.page.product > div > div.swatches > button → div.page.product > div > div.swatches > button → “1” → “Add to cart”
องค์ประกอบ
```
<div class="size-option" data-fr="opt-1">S</div>
```
04เพิ่มลงตะกร้าด้วยคีย์บอร์ด
ต้องตรวจสอบ
การกด Enter ที่ปุ่มเพิ่มลงตะกร้าได้ผล (จำนวนสินค้าในตะกร้าที่ส่วนหัวเปลี่ยนไป ข้อความ “เพิ่มลงตะกร้าแล้ว” ปรากฏขึ้น) แต่เราไม่พบข้อความสถานะหรือกล่องโต้ตอบที่ได้รับโฟกัส ผู้ใช้โปรแกรมอ่านหน้าจอจึงอาจไม่ได้ยินว่าสินค้าถูกเพิ่มแล้ว
สิ่งที่คาดหวัง: การกด Enter ที่ปุ่มเพิ่มลงตะกร้าเพิ่มสินค้าได้ และมีการแจ้งยืนยันให้รับรู้: ข้อความสถานะ กล่องโต้ตอบที่รับโฟกัส หรือหน้าตะกร้า
4.1.3 Status Messages · ความมั่นใจ: ปานกลาง
เพิ่มลงตะกร้าด้วยคีย์บอร์ด: หน้าเว็บในขั้นตอนนี้
วิธีทำให้เกิดซ้ำ
https://harborandpine.example/products/trail-daypack
1. เปิด /products/trail-daypack
2. กด Tab จนปุ่มเพิ่มลงตะกร้าได้รับโฟกัส แล้วกด Enter
3. ฟังการยืนยันด้วยโปรแกรมอ่านหน้าจอ (VoiceOver: Cmd+F5)
05แก้ไขตะกร้าและไปถึงการชำระเงิน
ผ่าน
ไปถึงตัวควบคุมตะกร้าครบทั้ง 4 รายการและปุ่มชำระเงิน (“Check out”) โดยกด Tab 12 ครั้ง เราไม่ได้กดปุ่มนั้น
สิ่งที่คาดหวัง: ช่องจำนวน ปุ่มนำออก และปุ่มชำระเงินเข้าถึงได้ด้วย Tab ทั้งหมด
วิธีทำให้เกิดซ้ำ
https://harborandpine.example/cart
1. เพิ่มสินค้าใดก็ได้ลงตะกร้า แล้วเปิดหน้าตะกร้า
2. กด Tab แล้วตรวจว่าช่องจำนวน ปุ่มนำออก และปุ่มชำระเงินได้รับโฟกัสทั้งหมด
ลำดับโฟกัสที่เราสังเกตได้
“Harbor & Pine” → “Shop” → “New arrivals” → “Our story” → body > header.site > div.icons > button → “Account” → body > header.site > div.icons > a → “1” → tbody > tr > td > button.remove → “2” → tbody > tr > td > button.remove → “Check out”
06ชำระเงิน
ไม่ได้ทดสอบ
เราหยุดที่ปุ่มชำระเงิน: เราไม่เข้าสู่ขั้นตอนชำระเงิน ไม่สร้างคำสั่งซื้อ และไม่พิมพ์ข้อมูลการชำระเงิน บน Shopify หน้าชำระเงินดำเนินการโดย Shopify ไม่ใช่ธีมของคุณ โปรดตรวจขั้นตอนชำระเงินด้วยตนเอง (ดู “การตรวจด้วยคน”)

แผนผังข้อกล่าวหาในหนังสือ

ข้อกล่าวหาแต่ละข้อในหนังสือ เทียบกับหลักฐานจากการสแกน เป็นการเปรียบเทียบข้อเท็จจริง ไม่ใช่คำแนะนำทางกฎหมาย

“Images lack alternative text, so product photos are not described.”
รูปภาพที่ไม่มีข้อความทดแทน. พบ 10 จุด ใน 3 จาก 5 หน้าที่ทดสอบ
image-alt
พบซ้ำได้
“Text has insufficient color contrast against its background, including sale badges and prices.”
คอนทราสต์สีต่ำ. พบ 16 จุด ใน 5 จาก 5 หน้าที่ทดสอบ
color-contrast
พบซ้ำได้
“The website cannot be navigated using a keyboard alone.”
การเข้าถึงด้วยคีย์บอร์ดและโฟกัส. โฟกัสของคีย์บอร์ดติดค้างอยู่ในแบนเนอร์คุกกี้
พบซ้ำได้
“Form fields do not have labels, including the newsletter sign-up and the quantity fields in the cart.”
ช่องกรอกข้อมูลที่ไม่มีป้ายกำกับ. พบ 4 จุด ใน 3 จาก 5 หน้าที่ทดสอบ
select-name, label
พบซ้ำได้
“Product videos do not have captions.”
คำบรรยายวิดีโอและเสียง. การสแกนอัตโนมัติตัดสินคำบรรยายไม่ได้ ตรวจวิดีโอสินค้าหรือวิดีโอแบรนด์ทุกรายการว่ามีคำบรรยายที่ถูกต้องและมีบทถอดความ
ต้องตรวจด้วยคน
“Our client is legally blind and uses screen reader software.”
ปัญหาอื่น ๆ. นี่เป็นข้อกล่าวหาแบบทั่วไป ให้ทดสอบขั้นตอนสำคัญ (การค้นหา หน้าสินค้า การเพิ่มลงตะกร้า การชำระเงิน) ด้วยโปรแกรมอ่านหน้าจอ เช่น VoiceOver หรือ NVDA
ต้องตรวจด้วยคน

แผนการแก้ไข

ปัญหาเรียงตามลำดับความสำคัญ พร้อมผู้รับผิดชอบและวันที่เป้าหมาย
ลำดับความสำคัญ	ปัญหา	สถานะ	WCAG	จำนวนครั้งที่พบ	ผู้รับผิดชอบ	วันที่เป้าหมาย
P1	โฟกัสของคีย์บอร์ดติดอยู่ในแบนเนอร์คุกกี้	ยืนยันแล้ว	2.1.2	1	ผู้ให้บริการแอป	2026-10-08
P1	เลือกตัวเลือกสินค้าด้วยคีย์บอร์ดไม่ได้	ยืนยันแล้ว	2.1.1	1	นักพัฒนาธีม	2026-10-08
P1	ปุ่มต้องมีข้อความที่ระบุได้	ยืนยันแล้ว	4.1.2	41	นักพัฒนาธีม	2026-10-08
P1	รูปภาพต้องมีข้อความทดแทน	ยืนยันแล้ว	1.1.1	22	ผู้แก้ไขเนื้อหา	2026-10-08
P1	องค์ประกอบในฟอร์มต้องมีป้ายกำกับ	ยืนยันแล้ว	4.1.2	7	นักพัฒนาธีม	2026-10-08
P1	องค์ประกอบ select ต้องมีชื่อที่เข้าถึงได้	ยืนยันแล้ว	4.1.2	1	นักพัฒนาธีม	2026-10-08
P1	ลิงก์ต้องมีข้อความที่ระบุได้	ยืนยันแล้ว	2.4.4, 4.1.2	36	นักพัฒนาธีม	2026-10-08
P1	องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ	ยืนยันแล้ว	1.4.3	22	เจ้าของร้าน (การตั้งค่าในหน้าผู้ดูแล)	2026-10-08
P3	เนื้อหาทั้งหมดของหน้าควรอยู่ภายในแลนด์มาร์ก	ยืนยันแล้ว	แนวปฏิบัติที่ดี	18	นักพัฒนาธีม	2026-11-23
P3	ระดับหัวข้อควรเพิ่มขึ้นทีละ 1 ระดับเท่านั้น	ยืนยันแล้ว	แนวปฏิบัติที่ดี	7	นักพัฒนาธีม	2026-11-23

วิธีแก้แต่ละปัญหา

P1ร้ายแรงมากข้อบกพร่องที่ยืนยันแล้วWCAG 2.1.2

โฟกัสของคีย์บอร์ดติดอยู่ในแบนเนอร์คุกกี้

ปริมาณงาน: ปานกลาง · ผู้รับผิดชอบ: ผู้ให้บริการแอป · 2.1.2 No Keyboard Trap

เมื่อผู้ใช้คีย์บอร์ดกด Tab โฟกัสจะวนอยู่กับองค์ประกอบไม่กี่รายการ และไม่เคยไปถึงส่วนอื่นของหน้า

ผู้ใช้คีย์บอร์ดเพียงอย่างเดียวและผู้ใช้โปรแกรมอ่านหน้าจอจะซื้อสินค้าไม่ได้เลยหากโฟกัสติดค้าง (WCAG 2.1.2 No Keyboard Trap)

หลักฐาน

พบโดย: การทดสอบด้วยคีย์บอร์ด (กด Tab ไล่ไปทั่วหน้าแรก)
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 1 จุด ใน 1 หน้า

สิ่งที่คาดหวัง: การกด Tab เคลื่อนผ่านองค์ประกอบที่โต้ตอบได้ทุกรายการบนหน้า และต่อไปยังส่วนอื่นของหน้า

สิ่งที่พบ: หลังจากกด Tab 40 ครั้ง โฟกัสยังคงวนอยู่ที่: Settings Accept all

วิธีทำให้เกิดซ้ำ

เปิดหน้าแรก
คลิกแถบที่อยู่ แล้วกด Tab ซ้ำ ๆ
โฟกัสวนกลับมาที่องค์ประกอบเดิมไม่กี่รายการ

องค์ประกอบที่ไม่ผ่าน (แสดง 6 รายการ)

button#cc-settings

Settings

button#cc-accept.primary

Accept all

button#cc-settings

Settings

button#cc-accept.primary

Accept all

button#cc-settings

Settings

button#cc-accept.primary

Accept all

หน้าที่ได้รับผลกระทบ (1)

https://harborandpine.example/

วิธีแก้ไข

แนวทางทั่วไป

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

แก้ด้วย AIแสดงพรอมต์

วางพรอมต์นี้ลงใน ChatGPT, Claude, Cursor หรือ Copilot พร้อมไฟล์ธีมของคุณ และตรวจทานการเปลี่ยนแปลงก่อนเผยแพร่

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: โฟกัสของคีย์บอร์ดติดอยู่ในแบนเนอร์คุกกี้ (WCAG 2.1.2)
ตำแหน่ง: 1 จุด ใน 1 หน้า เช่น /

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
Settings
```

ทำไมจึงสำคัญ: ผู้ใช้คีย์บอร์ดเพียงอย่างเดียวและผู้ใช้โปรแกรมอ่านหน้าจอจะซื้อสินค้าไม่ได้เลยหากโฟกัสติดค้าง (WCAG 2.1.2 No Keyboard Trap)

สิ่งที่ต้องเปลี่ยน:
- ตรวจการตั้งค่าของแอปแบนเนอร์คุกกี้หรือแบนเนอร์ขอความยินยอมว่ามีตัวเลือกด้านการเข้าถึงหรือการกักโฟกัสหรือไม่ หรือขอให้ผู้ให้บริการแก้ไข
- หน้าต่างโมดัลกักโฟกัสไว้ภายในได้เฉพาะขณะที่เปิดอยู่ และต้องปิดได้ด้วยปุ่ม Escape และคืนโฟกัสไปยังจุดเดิม

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

ตรวจสอบการแก้ไขของคุณ

โหลดหน้าแรก กด Tab ซ้ำ ๆ และยืนยันว่าโฟกัสไปถึงเมนูหลักและเนื้อหา

ตรวจพบโดยการทดสอบคีย์บอร์ดอัตโนมัติ โปรดยืนยันด้วยตนเอง

P1ร้ายแรงมากข้อบกพร่องที่ยืนยันแล้วWCAG 2.1.1

เลือกตัวเลือกสินค้าด้วยคีย์บอร์ดไม่ได้

ปริมาณงาน: ปานกลาง · ผู้รับผิดชอบ: นักพัฒนาธีม · 2.1.1 Keyboard

ตัวเลือกขนาด สี หรือรุ่นของสินค้าตอบสนองต่อเมาส์ แต่รับโฟกัสจากคีย์บอร์ดไม่ได้ ผู้ใช้คีย์บอร์ดจึงเลือกตัวเลือกสินค้าไม่ได้

ผู้ซื้อที่ใช้คีย์บอร์ดเพียงอย่างเดียว รวมถึงผู้ใช้โปรแกรมอ่านหน้าจอจำนวนมาก ผ่านขั้นตอนนี้ไปไม่ได้ (WCAG 2.1.1)

หลักฐาน

พบโดย: เส้นทางคีย์บอร์ด
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 1 จุด ใน 1 หน้า

สิ่งที่คาดหวัง: ตัวเลือกสินค้าทุกรายการ (ขนาด สี รุ่นย่อย) และช่องจำนวนเข้าถึงได้ด้วย Tab

สิ่งที่พบ: ตัวเลือกสินค้า 3 รายการรับโฟกัสของคีย์บอร์ดไม่ได้: “S” “M” “L” ตัวเลือกเหล่านี้ตอบสนองต่อเมาส์ แต่ผู้ใช้คีย์บอร์ดเลือกไม่ได้

เลือกตัวเลือกสินค้าด้วยคีย์บอร์ดไม่ได้: องค์ประกอบที่ถูกวงไว้

วิธีทำให้เกิดซ้ำ

เปิด /products/trail-daypack
กด Tab จากด้านบนสุดของหน้า และจดว่าตัวควบคุมใดได้รับโฟกัสก่อนถึงปุ่มเพิ่มลงตะกร้า

องค์ประกอบที่ไม่ผ่าน (แสดง 1 รายการ)

(ดูภาพหน้าจอ)

<div class="size-option" data-fr="opt-1">S</div>

หน้าที่ได้รับผลกระทบ (1)

https://harborandpine.example/products/trail-daypack

วิธีแก้ไข

แนวทางทั่วไป

สร้างตัวเลือกจากปุ่มตัวเลือก (radio button) แบบเนทีฟ (หรือ <select>) พร้อมป้ายกำกับที่มองเห็นได้ และจัดสไตล์ป้ายกำกับให้เป็นช่องสี
หากยังใช้องค์ประกอบแบบกำหนดเอง ตัวเลือกแต่ละรายการต้องมี tabindex="0", role="radio" พร้อม aria-checked ภายใน role="radiogroup" และรองรับปุ่มลูกศรกับ Space ซึ่งปุ่มตัวเลือกแบบเนทีฟมีให้ทั้งหมดโดยไม่ต้องทำเพิ่ม

โค้ด

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

ก่อนแก้ · สิ่งที่เราพบ · ฟอร์มสินค้าของธีมคุณ (ตัวเลือกสินค้า)

<div class="size-option" data-fr="opt-1">S</div>

หลังแก้ · ตัวอย่างที่ต้องปรับใช้

<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>

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

แก้ด้วย AIแสดงพรอมต์

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: เลือกตัวเลือกสินค้าด้วยคีย์บอร์ดไม่ได้ (WCAG 2.1.1)
ตำแหน่ง: 1 จุด ใน 1 หน้า เช่น /products/trail-daypack

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

ทำไมจึงสำคัญ: ผู้ซื้อที่ใช้คีย์บอร์ดเพียงอย่างเดียว รวมถึงผู้ใช้โปรแกรมอ่านหน้าจอจำนวนมาก ผ่านขั้นตอนนี้ไปไม่ได้ (WCAG 2.1.1)

สิ่งที่ต้องเปลี่ยน:
- สร้างตัวเลือกจากปุ่มตัวเลือก (radio button) แบบเนทีฟ (หรือ <select>) พร้อมป้ายกำกับที่มองเห็นได้ และจัดสไตล์ป้ายกำกับให้เป็นช่องสี
- หากยังใช้องค์ประกอบแบบกำหนดเอง ตัวเลือกแต่ละรายการต้องมี tabindex="0", role="radio" พร้อม aria-checked ภายใน role="radiogroup" และรองรับปุ่มลูกศรกับ Space ซึ่งปุ่มตัวเลือกแบบเนทีฟมีให้ทั้งหมดโดยไม่ต้องทำเพิ่ม

การเปลี่ยนแปลงที่แนะนำ (ฟอร์มสินค้าของธีมคุณ (ตัวเลือกสินค้า)):
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

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

ตรวจสอบการแก้ไขของคุณ

ทำตามขั้นตอนการทำให้เกิดซ้ำอีกครั้งด้วยคีย์บอร์ดเพียงอย่างเดียว
ขอทดสอบซ้ำจากรายงานนี้ แล้วเส้นทางจะถูกทดสอบอีกครั้ง

P1ร้ายแรงมากข้อบกพร่องที่ยืนยันแล้วWCAG 4.1.2

ปุ่มต้องมีข้อความที่ระบุได้

ปริมาณงาน: น้อย · ผู้รับผิดชอบ: นักพัฒนาธีม · 4.1.2 Name, Role, Value

ปุ่มบางปุ่มไม่มีชื่อที่เข้าถึงได้ ผู้ใช้โปรแกรมอ่านหน้าจอจึงได้ยินเพียงคำว่า 'ปุ่ม'

WCAG 4.1.2 กำหนดให้ตัวควบคุมทุกตัวต้องมีชื่อ ปุ่มที่ไม่มีชื่อมักเป็นปุ่มเพิ่มลดจำนวน ปุ่มปิด และลูกศรของสไลเดอร์

หลักฐาน

พบโดย: กฎอัตโนมัติของ axe-core
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 41 จุด ใน 9 หน้า

สิ่งที่คาดหวัง: ปุ่มต้องมีข้อความที่ระบุได้

สิ่งที่พบ: องค์ประกอบไม่มีข้อความภายในที่โปรแกรมอ่านหน้าจอรับรู้ได้ แอตทริบิวต์ aria-label ไม่มีอยู่หรือว่างเปล่า แอตทริบิวต์ aria-labelledby ไม่มีอยู่ อ้างอิงถึงองค์ประกอบที่ไม่มีอยู่ หรืออ้างอิงถึงองค์ประกอบที่ว่างเปล่า องค์ประกอบไม่มีแอตทริบิวต์ title องค์ประกอบไม่มี <label> โดยนัย (ที่ครอบองค์ประกอบไว้) องค์ประกอบไม่มี <label> ที่ระบุไว้ชัดเจน ความหมายเริ่มต้นขององค์ประกอบไม่ได้ถูกแทนที่ด้วย role="none" หรือ role="presentation"

ปุ่มต้องมีข้อความที่ระบุได้: องค์ประกอบที่ถูกวงไว้บน /

ปุ่มต้องมีข้อความที่ระบุได้: องค์ประกอบที่ถูกวงไว้บน /collections/all

วิธีทำให้เกิดซ้ำ

เปิด https://harborandpine.example/ ใน Chrome หรือ Edge
เปิด DevTools (F12) › Elements กด Ctrl+F (Cmd+F บน Mac) แล้วค้นหา: .icons > button[type="button"]
ในแผง Accessibility ของ DevTools ค่า Name ที่คำนวณได้ขององค์ประกอบว่างเปล่า
หรือเรียกใช้ส่วนขยายเบราว์เซอร์ axe DevTools ซึ่งใช้ได้ฟรีบนหน้านั้น ส่วนขยายจะรายงานปัญหานี้เป็น "button-name"

องค์ประกอบที่ไม่ผ่าน (แสดง 4 รายการ)

.icons > button[type="button"]

<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>

.thumbs > button:nth-child(1)

<button type="button"><img src="/img/daypack.svg"></button>

.thumbs > button:nth-child(2)

<button type="button"><img src="/img/jacket.svg"></button>

.thumbs > button:nth-child(3)

<button type="button"><img src="/img/bottle.svg"></button>

หน้าที่ได้รับผลกระทบ (9)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

วิธีแก้ไข

โค้ดที่สร้างจาก markup ของหน้าคุณ

ค้นหาปุ่มในตัวอย่างด้านล่าง
เพิ่มข้อความที่มองเห็นได้ ข้อความที่ซ่อนจากการมองเห็น หรือ aria-label ที่บอกว่าปุ่มทำอะไร (เช่น aria-label="Close" หรือ aria-label="Increase quantity")

โค้ด

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<button type="button">…</button>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<button type="button" aria-label="[What this button does]">…</button>

แทนที่ข้อความในวงเล็บด้วยสิ่งที่ปุ่มทำ ข้อความที่มองเห็นได้หรือข้อความที่ซ่อนจากการมองเห็นภายในปุ่มก็ใช้ได้เช่นกัน

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<button type="button"><img src="/img/daypack.svg"></button>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<button type="button" aria-label="[Describe the image, e.g. Back view]"><img src="/img/daypack.svg"></button>

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<button type="button"><img src="/img/jacket.svg"></button>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<button type="button" aria-label="[Describe the image, e.g. Back view]"><img src="/img/jacket.svg"></button>

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<button type="button"><img src="/img/bottle.svg"></button>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<button type="button" aria-label="[Describe the image, e.g. Back view]"><img src="/img/bottle.svg"></button>

แก้ด้วย AIแสดงพรอมต์

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: ปุ่มต้องมีข้อความที่ระบุได้ (WCAG 4.1.2)
ตำแหน่ง: 41 จุด ใน 9 หน้า เช่น / /collections/all /products/trail-daypack /cart

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

ทำไมจึงสำคัญ: WCAG 4.1.2 กำหนดให้ตัวควบคุมทุกตัวต้องมีชื่อ ปุ่มที่ไม่มีชื่อมักเป็นปุ่มเพิ่มลดจำนวน ปุ่มปิด และลูกศรของสไลเดอร์

สิ่งที่ต้องเปลี่ยน:
- ค้นหาปุ่มในตัวอย่างด้านล่าง
- เพิ่มข้อความที่มองเห็นได้ ข้อความที่ซ่อนจากการมองเห็น หรือ aria-label ที่บอกว่าปุ่มทำอะไร (เช่น aria-label="Close" หรือ aria-label="Increase quantity")

การเปลี่ยนแปลงที่แนะนำ (โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

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

ตรวจสอบการแก้ไขของคุณ

สแกนหน้าที่ได้รับผลกระทบอีกครั้ง
ตรวจปุ่มด้วยโปรแกรมอ่านหน้าจอ

คำแนะนำโดยละเอียด: https://dequeuniversity.com/rules/axe/4.13/button-name?application=playwright

P1ร้ายแรงมากข้อบกพร่องที่ยืนยันแล้วWCAG 1.1.1

รูปภาพต้องมีข้อความทดแทน

ปริมาณงาน: ปานกลาง · ผู้รับผิดชอบ: ผู้แก้ไขเนื้อหา · 1.1.1 Non-text Content

รูปภาพไม่มีข้อความทดแทน ผู้ใช้โปรแกรมอ่านหน้าจอจึงไม่รู้ว่ารูปแสดงอะไร

WCAG 1.1.1 กำหนดให้รูปภาพที่มีความหมายต้องมีข้อความทดแทน หากไม่มี ผู้ใช้โปรแกรมอ่านหน้าจอจะไม่รู้ว่ารูปนั้นเป็นสินค้าใด

หลักฐาน

พบโดย: กฎอัตโนมัติของ axe-core
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 22 จุด ใน 7 หน้า

สิ่งที่คาดหวัง: รูปภาพต้องมีข้อความทดแทน

สิ่งที่พบ: องค์ประกอบไม่มีแอตทริบิวต์ alt แอตทริบิวต์ aria-label ไม่มีอยู่หรือว่างเปล่า แอตทริบิวต์ aria-labelledby ไม่มีอยู่ อ้างอิงถึงองค์ประกอบที่ไม่มีอยู่ หรืออ้างอิงถึงองค์ประกอบที่ว่างเปล่า องค์ประกอบไม่มีแอตทริบิวต์ title ความหมายเริ่มต้นขององค์ประกอบไม่ได้ถูกแทนที่ด้วย role="none" หรือ role="presentation"

รูปภาพต้องมีข้อความทดแทน: องค์ประกอบที่ถูกวงไว้บน /

รูปภาพต้องมีข้อความทดแทน: องค์ประกอบที่ถูกวงไว้บน /collections/all

วิธีทำให้เกิดซ้ำ

เปิด https://harborandpine.example/ ใน Chrome หรือ Edge
เปิด DevTools (F12) › Elements กด Ctrl+F (Cmd+F บน Mac) แล้วค้นหา: img[src$="hero-photo.jpg"]
ในแผง Accessibility ของ DevTools ค่า Name ที่คำนวณได้ขององค์ประกอบว่างเปล่า
หรือเรียกใช้ส่วนขยายเบราว์เซอร์ axe DevTools ซึ่งใช้ได้ฟรีบนหน้านั้น ส่วนขยายจะรายงานปัญหานี้เป็น "image-alt"

องค์ประกอบที่ไม่ผ่าน (แสดง 4 รายการ)

img[src$="hero-photo.jpg"]

<img src="/img/hero-photo.jpg" loading="lazy">

img[src$="mug.svg"]

<img src="/img/mug.svg">

img[src$="beanie.svg"]

<img src="/img/beanie.svg">

img[src$="jacket.svg"]

<img src="/img/jacket.svg">

หน้าที่ได้รับผลกระทบ (7)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

วิธีแก้ไข

โค้ดที่สร้างจาก markup ของหน้าคุณ

ในหน้าผู้ดูแล Shopify ให้เปิด Products > [สินค้า] > Media คลิกแต่ละรูปแล้วกรอก 'Alt text' สำหรับรูปภาพในเซกชัน ให้เปิด Online Store > Themes > Customize แล้วตั้งค่าข้อความ alt ของรูปภาพในการตั้งค่าของเซกชัน
อธิบายสิ่งที่ผู้ซื้อสนใจ: ชื่อสินค้า สี และมุมที่แสดง (เช่น 'กระเป๋าผ้าแคนวาสสีเขียวมะกอก ด้านหน้า')
รูปภาพตกแต่งควรมีแอตทริบิวต์ alt ว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป

โค้ด

ก่อนแก้ · สิ่งที่เราพบ · รูปสินค้า: Shopify admin › Products › Media › Alt text รูปภาพอื่น: โค้ดธีมของคุณ

<img src="/img/hero-photo.jpg" loading="lazy">

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">

อธิบายสิ่งที่รูปภาพแสดง (สำหรับรูปสินค้า: สินค้า สี และมุมภาพ) หากรูปภาพใช้ตกแต่งเท่านั้น ให้ใช้ alt="" แทน เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป

<img src="/img/mug.svg">

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<img src="/img/mug.svg" alt="[Describe the image for a shopper]">

<img src="/img/beanie.svg">

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<img src="/img/beanie.svg" alt="[Describe the image for a shopper]">

<img src="/img/jacket.svg">

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<img src="/img/jacket.svg" alt="[Describe the image for a shopper]">

แก้ด้วย AIแสดงพรอมต์

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: รูปภาพต้องมีข้อความทดแทน (WCAG 1.1.1)
ตำแหน่ง: 22 จุด ใน 7 หน้า เช่น / /collections/all /products/trail-daypack /products/pine-wool-beanie

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

ทำไมจึงสำคัญ: WCAG 1.1.1 กำหนดให้รูปภาพที่มีความหมายต้องมีข้อความทดแทน หากไม่มี ผู้ใช้โปรแกรมอ่านหน้าจอจะไม่รู้ว่ารูปนั้นเป็นสินค้าใด

สิ่งที่ต้องเปลี่ยน:
- ในหน้าผู้ดูแล Shopify ให้เปิด Products > [สินค้า] > Media คลิกแต่ละรูปแล้วกรอก 'Alt text' สำหรับรูปภาพในเซกชัน ให้เปิด Online Store > Themes > Customize แล้วตั้งค่าข้อความ alt ของรูปภาพในการตั้งค่าของเซกชัน
- อธิบายสิ่งที่ผู้ซื้อสนใจ: ชื่อสินค้า สี และมุมที่แสดง (เช่น 'กระเป๋าผ้าแคนวาสสีเขียวมะกอก ด้านหน้า')
- รูปภาพตกแต่งควรมีแอตทริบิวต์ alt ว่าง (alt="") เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป

การเปลี่ยนแปลงที่แนะนำ (รูปสินค้า: Shopify admin › Products › Media › Alt text รูปภาพอื่น: โค้ดธีมของคุณ):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

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

ตรวจสอบการแก้ไขของคุณ

สแกนหน้าที่ได้รับผลกระทบอีกครั้ง
ใช้โปรแกรมอ่านหน้าจอ (VoiceOver: Cmd+F5 บน Mac) เพื่อฟังว่ารูปสินค้าถูกอ่านออกเสียงอย่างไร

คำแนะนำโดยละเอียด: https://dequeuniversity.com/rules/axe/4.13/image-alt?application=playwright

P1ร้ายแรงมากข้อบกพร่องที่ยืนยันแล้วWCAG 4.1.2

องค์ประกอบในฟอร์มต้องมีป้ายกำกับ

ปริมาณงาน: น้อย · ผู้รับผิดชอบ: นักพัฒนาธีม · 4.1.2 Name, Role, Value

ช่องกรอกข้อมูลบางช่องไม่มีป้ายกำกับ ผู้ใช้โปรแกรมอ่านหน้าจอจึงไม่รู้ว่าต้องกรอกอะไร

WCAG 1.3.1, 3.3.2 และ 4.1.2 กำหนดให้ช่องกรอกข้อมูลต้องมีป้ายกำกับ ช่องสมัครรับจดหมายข่าวและช่องค้นหามักเป็นต้นเหตุ

หลักฐาน

พบโดย: กฎอัตโนมัติของ axe-core
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 7 จุด ใน 6 หน้า

สิ่งที่คาดหวัง: องค์ประกอบในฟอร์มต้องมีป้ายกำกับ

สิ่งที่พบ: องค์ประกอบไม่มี <label> โดยนัย (ที่ครอบองค์ประกอบไว้) องค์ประกอบไม่มี <label> ที่ระบุไว้ชัดเจน แอตทริบิวต์ aria-label ไม่มีอยู่หรือว่างเปล่า แอตทริบิวต์ aria-labelledby ไม่มีอยู่ อ้างอิงถึงองค์ประกอบที่ไม่มีอยู่ หรืออ้างอิงถึงองค์ประกอบที่ว่างเปล่า องค์ประกอบไม่มีแอตทริบิวต์ title องค์ประกอบไม่มีแอตทริบิวต์ placeholder ความหมายเริ่มต้นขององค์ประกอบไม่ได้ถูกแทนที่ด้วย role="none" หรือ role="presentation"

องค์ประกอบในฟอร์มต้องมีป้ายกำกับ: องค์ประกอบที่ถูกวงไว้บน /products/trail-daypack

องค์ประกอบในฟอร์มต้องมีป้ายกำกับ: องค์ประกอบที่ถูกวงไว้บน /cart

วิธีทำให้เกิดซ้ำ

เปิด https://harborandpine.example/products/trail-daypack ใน Chrome หรือ Edge
เปิด DevTools (F12) › Elements กด Ctrl+F (Cmd+F บน Mac) แล้วค้นหา: input
ในแผง Accessibility ของ DevTools ค่า Name ที่คำนวณได้ขององค์ประกอบว่างเปล่า
หรือเรียกใช้ส่วนขยายเบราว์เซอร์ axe DevTools ซึ่งใช้ได้ฟรีบนหน้านั้น ส่วนขยายจะรายงานปัญหานี้เป็น "label"

องค์ประกอบที่ไม่ผ่าน (แสดง 2 รายการ)

input

<input type="number" value="1" min="1">

input[value="2"]

<input type="number" value="2" min="1">

หน้าที่ได้รับผลกระทบ (6)

https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

วิธีแก้ไข

โค้ดที่สร้างจาก markup ของหน้าคุณ

ใส่องค์ประกอบ <label for="field-id"> ให้ทุกช่อง หรืออย่างน้อยต้องมี aria-label
ข้อความ placeholder เพียงอย่างเดียวไม่นับเป็นป้ายกำกับ

โค้ด

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<input type="number" value="1" min="1">

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<input type="number" value="1" min="1" aria-label="Quantity">

ช่องนี้ไม่มี id วิธีแก้ที่เร็วที่สุดจึงเป็น aria-label <label> ที่มองเห็นได้ดีกว่าสำหรับทุกคน ข้อความป้ายกำกับ "Quantity" คาดเดาจากช่องกรอก ปรับได้ตามต้องการ

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<input type="number" value="2" min="1">

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<input type="number" value="2" min="1" aria-label="Quantity">

แก้ด้วย AIแสดงพรอมต์

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: องค์ประกอบในฟอร์มต้องมีป้ายกำกับ (WCAG 4.1.2)
ตำแหน่ง: 7 จุด ใน 6 หน้า เช่น /products/trail-daypack /cart /products/pine-wool-beanie /products/enamel-camp-mug

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
<input type="number" value="1" min="1">
```

ทำไมจึงสำคัญ: WCAG 1.3.1, 3.3.2 และ 4.1.2 กำหนดให้ช่องกรอกข้อมูลต้องมีป้ายกำกับ ช่องสมัครรับจดหมายข่าวและช่องค้นหามักเป็นต้นเหตุ

สิ่งที่ต้องเปลี่ยน:
- ใส่องค์ประกอบ <label for="field-id"> ให้ทุกช่อง หรืออย่างน้อยต้องมี aria-label
- ข้อความ placeholder เพียงอย่างเดียวไม่นับเป็นป้ายกำกับ

การเปลี่ยนแปลงที่แนะนำ (โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

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

ตรวจสอบการแก้ไขของคุณ

สแกนอีกครั้งและยืนยันว่ากฎ label ไม่พบข้อผิดพลาดอีก
คลิกป้ายกำกับแต่ละรายการ และตรวจว่าโฟกัสย้ายไปที่ช่องของป้ายนั้น

คำแนะนำโดยละเอียด: https://dequeuniversity.com/rules/axe/4.13/label?application=playwright

P1ร้ายแรงมากข้อบกพร่องที่ยืนยันแล้วWCAG 4.1.2

องค์ประกอบ select ต้องมีชื่อที่เข้าถึงได้

ปริมาณงาน: น้อย · ผู้รับผิดชอบ: นักพัฒนาธีม · 4.1.2 Name, Role, Value

เมนูดรอปดาวน์ (มักเป็นตัวเลือกการเรียงลำดับหรือตัวเลือกสินค้า) ไม่มีป้ายกำกับ

WCAG 4.1.2 กำหนดให้เมนู select ต้องมีชื่อที่เข้าถึงได้

หลักฐาน

พบโดย: กฎอัตโนมัติของ axe-core
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 1 จุด ใน 1 หน้า

สิ่งที่คาดหวัง: องค์ประกอบ select ต้องมีชื่อที่เข้าถึงได้

สิ่งที่พบ: องค์ประกอบไม่มี <label> โดยนัย (ที่ครอบองค์ประกอบไว้) องค์ประกอบไม่มี <label> ที่ระบุไว้ชัดเจน แอตทริบิวต์ aria-label ไม่มีอยู่หรือว่างเปล่า แอตทริบิวต์ aria-labelledby ไม่มีอยู่ อ้างอิงถึงองค์ประกอบที่ไม่มีอยู่ หรืออ้างอิงถึงองค์ประกอบที่ว่างเปล่า องค์ประกอบไม่มีแอตทริบิวต์ title ความหมายเริ่มต้นขององค์ประกอบไม่ได้ถูกแทนที่ด้วย role="none" หรือ role="presentation"

องค์ประกอบ select ต้องมีชื่อที่เข้าถึงได้: องค์ประกอบที่ถูกวงไว้บน /collections/all

วิธีทำให้เกิดซ้ำ

เปิด https://harborandpine.example/collections/all ใน Chrome หรือ Edge
เปิด DevTools (F12) › Elements กด Ctrl+F (Cmd+F บน Mac) แล้วค้นหา: select
ในแผง Accessibility ของ DevTools ค่า Name ที่คำนวณได้ขององค์ประกอบว่างเปล่า
หรือเรียกใช้ส่วนขยายเบราว์เซอร์ axe DevTools ซึ่งใช้ได้ฟรีบนหน้านั้น ส่วนขยายจะรายงานปัญหานี้เป็น "select-name"

องค์ประกอบที่ไม่ผ่าน (แสดง 1 รายการ)

select

<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>

หน้าที่ได้รับผลกระทบ (1)

https://harborandpine.example/collections/all

วิธีแก้ไข

โค้ดที่สร้างจาก markup ของหน้าคุณ

เพิ่ม <label> ที่เชื่อมกับ select หรือ aria-label เช่น aria-label="Sort by"

โค้ด

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>

ช่องนี้ไม่มี id วิธีแก้ที่เร็วที่สุดจึงเป็น aria-label <label> ที่มองเห็นได้ดีกว่าสำหรับทุกคน แทนที่ข้อความในวงเล็บด้วยป้ายกำกับของช่อง

แก้ด้วย AIแสดงพรอมต์

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: องค์ประกอบ select ต้องมีชื่อที่เข้าถึงได้ (WCAG 4.1.2)
ตำแหน่ง: 1 จุด ใน 1 หน้า เช่น /collections/all

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

ทำไมจึงสำคัญ: WCAG 4.1.2 กำหนดให้เมนู select ต้องมีชื่อที่เข้าถึงได้

สิ่งที่ต้องเปลี่ยน:
- เพิ่ม <label> ที่เชื่อมกับ select หรือ aria-label เช่น aria-label="Sort by"

การเปลี่ยนแปลงที่แนะนำ (โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

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

ตรวจสอบการแก้ไขของคุณ

สแกนหน้าคอลเลกชันและหน้าสินค้าอีกครั้ง

คำแนะนำโดยละเอียด: https://dequeuniversity.com/rules/axe/4.13/select-name?application=playwright

P1ร้ายแรงข้อบกพร่องที่ยืนยันแล้วWCAG 2.4.4WCAG 4.1.2

ลิงก์ต้องมีข้อความที่ระบุได้

ปริมาณงาน: น้อย · ผู้รับผิดชอบ: นักพัฒนาธีม · 2.4.4 Link Purpose (In Context), 4.1.2 Name, Role, Value

ลิงก์บางรายการไม่มีข้อความที่โปรแกรมอ่านหน้าจออ่านออกเสียงได้ ซึ่งมักเป็นลิงก์ที่มีแต่ไอคอน เช่น ไอคอนโซเชียลหรือไอคอนตะกร้า

WCAG 2.4.4 และ 4.1.2 กำหนดให้ลิงก์ต้องมีชื่อที่เข้าถึงได้ (accessible name) ซึ่งอธิบายจุดประสงค์ของลิงก์

หลักฐาน

พบโดย: กฎอัตโนมัติของ axe-core
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 36 จุด ใน 9 หน้า

สิ่งที่คาดหวัง: ลิงก์ต้องมีข้อความที่ระบุได้

สิ่งที่พบ: องค์ประกอบอยู่ในลำดับการกด Tab และไม่มีข้อความที่เข้าถึงได้ นอกจากนี้: องค์ประกอบไม่มีข้อความที่โปรแกรมอ่านหน้าจอรับรู้ได้ แอตทริบิวต์ aria-label ไม่มีอยู่หรือว่างเปล่า แอตทริบิวต์ aria-labelledby ไม่มีอยู่ อ้างอิงถึงองค์ประกอบที่ไม่มีอยู่ หรืออ้างอิงถึงองค์ประกอบที่ว่างเปล่า องค์ประกอบไม่มีแอตทริบิวต์ title

ลิงก์ต้องมีข้อความที่ระบุได้: องค์ประกอบที่ถูกวงไว้บน /

ลิงก์ต้องมีข้อความที่ระบุได้: องค์ประกอบที่ถูกวงไว้บน /collections/all

วิธีทำให้เกิดซ้ำ

เปิด https://harborandpine.example/ ใน Chrome หรือ Edge
เปิด DevTools (F12) › Elements กด Ctrl+F (Cmd+F บน Mac) แล้วค้นหา: a[href$="cart"]
ในแผง Accessibility ของ DevTools ค่า Name ที่คำนวณได้ขององค์ประกอบว่างเปล่า
หรือเรียกใช้ส่วนขยายเบราว์เซอร์ axe DevTools ซึ่งใช้ได้ฟรีบนหน้านั้น ส่วนขยายจะรายงานปัญหานี้เป็น "link-name"

องค์ประกอบที่ไม่ผ่าน (แสดง 4 รายการ)

a[href$="cart"]

<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>

.social > a:nth-child(1)

<a href="https://instagram.example/harborandpine"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle></svg></a>

.social > a:nth-child(2)

<a href="https://facebook.example/harborandpine"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 8h3V4h-3c-2.8 0-4 1.8-4 4v2H7v4h3v8h4v-8h3l1-4h-4V8.5c0-.3.2-.5.5-.5z"></path></svg></a>

.social > a:nth-child(3)

<a href="https://x.example/harborandpine"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4l16 16M20 4L4 20"></path></svg></a>

หน้าที่ได้รับผลกระทบ (9)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

วิธีแก้ไข

โค้ดที่สร้างจาก markup ของหน้าคุณ

ค้นหาลิงก์ในตัวอย่างด้านล่าง ส่วนใหญ่เป็นไอคอนหรือรูปภาพภายในแท็ก <a>
เพิ่มข้อความที่ซ่อนจากการมองเห็น (visually hidden) ภายในลิงก์ หรือเพิ่ม aria-label เช่น aria-label="Instagram" หรือ aria-label="Cart"
หากลิงก์ครอบรูปภาพไว้ ให้ใส่ข้อความ alt ที่มีความหมายให้รูปภาพแทน

โค้ด

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<a href="/cart">…</a>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<a href="/cart" aria-label="Cart">…</a>

ตั้งชื่อลิงก์เป็น "Cart" ซึ่งคาดเดาจากปลายทางของลิงก์หรือคลาส ตรวจว่าชื่อนี้บอกได้ว่าลิงก์ทำอะไร

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<a href="https://instagram.example/harborandpine">…</a>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<a href="https://instagram.example/harborandpine" aria-label="Instagram">…</a>

ตั้งชื่อลิงก์เป็น "Instagram" ซึ่งคาดเดาจากปลายทางของลิงก์หรือคลาส ตรวจว่าชื่อนี้บอกได้ว่าลิงก์ทำอะไร

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<a href="https://facebook.example/harborandpine">…</a>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<a href="https://facebook.example/harborandpine" aria-label="Facebook">…</a>

ตั้งชื่อลิงก์เป็น "Facebook" ซึ่งคาดเดาจากปลายทางของลิงก์หรือคลาส ตรวจว่าชื่อนี้บอกได้ว่าลิงก์ทำอะไร

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<a href="https://x.example/harborandpine">…</a>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

<a href="https://x.example/harborandpine" aria-label="X (Twitter)">…</a>

ตั้งชื่อลิงก์เป็น "X (Twitter)" ซึ่งคาดเดาจากปลายทางของลิงก์หรือคลาส ตรวจว่าชื่อนี้บอกได้ว่าลิงก์ทำอะไร

แก้ด้วย AIแสดงพรอมต์

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: ลิงก์ต้องมีข้อความที่ระบุได้ (WCAG 2.4.4 4.1.2)
ตำแหน่ง: 36 จุด ใน 9 หน้า เช่น / /collections/all /products/trail-daypack /cart

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

ทำไมจึงสำคัญ: WCAG 2.4.4 และ 4.1.2 กำหนดให้ลิงก์ต้องมีชื่อที่เข้าถึงได้ (accessible name) ซึ่งอธิบายจุดประสงค์ของลิงก์

สิ่งที่ต้องเปลี่ยน:
- ค้นหาลิงก์ในตัวอย่างด้านล่าง ส่วนใหญ่เป็นไอคอนหรือรูปภาพภายในแท็ก <a>
- เพิ่มข้อความที่ซ่อนจากการมองเห็น (visually hidden) ภายในลิงก์ หรือเพิ่ม aria-label เช่น aria-label="Instagram" หรือ aria-label="Cart"
- หากลิงก์ครอบรูปภาพไว้ ให้ใส่ข้อความ alt ที่มีความหมายให้รูปภาพแทน

การเปลี่ยนแปลงที่แนะนำ (โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

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

ตรวจสอบการแก้ไขของคุณ

สแกนอีกครั้งและยืนยันว่า link-name หายไปแล้ว
เปิดโปรแกรมอ่านหน้าจอ แล้วกด Tab ไปยังแต่ละลิงก์เพื่อฟังชื่อ

คำแนะนำโดยละเอียด: https://dequeuniversity.com/rules/axe/4.13/link-name?application=playwright

P1ร้ายแรงข้อบกพร่องที่ยืนยันแล้วWCAG 1.4.3

องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ

ปริมาณงาน: น้อย · ผู้รับผิดชอบ: เจ้าของร้าน (การตั้งค่าในหน้าผู้ดูแล) · 1.4.3 Contrast (Minimum)

ข้อความบางส่วนตัดกับพื้นหลังไม่มากพอที่ผู้มีสายตาเลือนรางจะอ่านได้

WCAG 1.4.3 กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ราคา ป้าย และแบนเนอร์ที่สีจางอ่านยากสำหรับผู้มีสายตาเลือนราง และสำหรับทุกคนเมื่ออยู่ในที่แสงจ้า

หลักฐาน

พบโดย: กฎอัตโนมัติของ axe-core
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 22 จุด ใน 9 หน้า

สิ่งที่คาดหวัง: องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ

สิ่งที่พบ: องค์ประกอบมีคอนทราสต์สี 3.09 ซึ่งไม่เพียงพอ (สีตัวอักษร: #ffffff, สีพื้นหลัง: #e76f51, ขนาดตัวอักษร: 9.8pt (13px), น้ำหนักตัวอักษร: normal) อัตราส่วนคอนทราสต์ที่ต้องการคือ 4.5:1

องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ: องค์ประกอบที่ถูกวงไว้บน /

องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ: องค์ประกอบที่ถูกวงไว้บน /collections/all

วิธีทำให้เกิดซ้ำ

เปิด https://harborandpine.example/ ใน Chrome หรือ Edge
เปิด DevTools (F12) › Elements กด Ctrl+F (Cmd+F บน Mac) แล้วค้นหา: .announce
คลิกช่องสีข้างค่าสีขององค์ประกอบในแผง Styles เพื่อดูอัตราส่วนคอนทราสต์ที่วัดได้
หรือเรียกใช้ส่วนขยายเบราว์เซอร์ axe DevTools ซึ่งใช้ได้ฟรีบนหน้านั้น ส่วนขยายจะรายงานปัญหานี้เป็น "color-contrast"

องค์ประกอบที่ไม่ผ่าน (แสดง 4 รายการ)

.announce

<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>

article:nth-child(3) > .badge

<span class="badge">Sale</span>

article:nth-child(3) > .price > .compare

<span class="compare">$72</span>

article:nth-child(4) > .price > .compare

<span class="compare">$40</span>

หน้าที่ได้รับผลกระทบ (9)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

วิธีแก้ไข

โค้ดที่สร้างจาก markup ของหน้าคุณ

เปิดดูองค์ประกอบที่ไม่ผ่านตามรายการด้านล่าง และจดสีตัวอักษรกับสีพื้นหลังจากสรุปข้อผิดพลาด
ใน Online Store > Themes > Customize > Theme settings > Colors ให้ปรับสีข้อความให้เข้มขึ้น หรือปรับพื้นหลังให้อ่อนลงสำหรับชุดสี (color scheme) ที่ได้รับผลกระทบ จนอัตราส่วนเป็นอย่างน้อย 4.5:1
ให้ความสำคัญเป็นพิเศษกับป้ายลดราคา ข้อความ placeholder ลิงก์ในส่วนท้าย และปุ่มที่วางบนรูปภาพ

โค้ด

ก่อนแก้ · สิ่งที่เราพบ · Theme settings › Colors หรือไฟล์ CSS ของธีมคุณ

<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}

วัดได้ 3.09:1 สำหรับข้อความขนาด 13px แต่ WCAG 1.4.3 กำหนด 4.5:1 #b95941 คงโทนสีเดิมและผ่านเกณฑ์ selector นี้เป็นตัวที่การทดสอบของเราใช้ ธีมของคุณอาจใช้คลาสที่กว้างกว่าสำหรับสไตล์เดียวกัน

ก่อนแก้ · สิ่งที่เราพบ · Theme settings › Colors หรือไฟล์ CSS ของธีมคุณ

<span class="badge">Sale</span>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

.badge {
  background-color: #9f693f; /* was #f4a261: 2.06:1, now 4.59:1 */
}

วัดได้ 2.06:1 สำหรับข้อความตัวหนาขนาด 12px แต่ WCAG 1.4.3 กำหนด 4.5:1 #9f693f คงโทนสีเดิมและผ่านเกณฑ์ selector นี้เป็นตัวที่การทดสอบของเราใช้ ธีมของคุณอาจใช้คลาสที่กว้างกว่าสำหรับสไตล์เดียวกัน

ก่อนแก้ · สิ่งที่เราพบ · Theme settings › Colors หรือไฟล์ CSS ของธีมคุณ

<span class="compare">$72</span>

หลังแก้ · สร้างจากองค์ประกอบที่ไม่ผ่าน

.compare {
  color: #78736c; /* was #b0a99f: 2.29:1, now 4.62:1 */
}

วัดได้ 2.29:1 สำหรับข้อความขนาด 14px แต่ WCAG 1.4.3 กำหนด 4.5:1 #78736c คงโทนสีเดิมและผ่านเกณฑ์ selector นี้เป็นตัวที่การทดสอบของเราใช้ ธีมของคุณอาจใช้คลาสที่กว้างกว่าสำหรับสไตล์เดียวกัน

แก้ด้วย AIแสดงพรอมต์

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ (WCAG 1.4.3)
ตำแหน่ง: 22 จุด ใน 9 หน้า เช่น / /collections/all /products/trail-daypack /cart

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

ทำไมจึงสำคัญ: WCAG 1.4.3 กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ราคา ป้าย และแบนเนอร์ที่สีจางอ่านยากสำหรับผู้มีสายตาเลือนราง และสำหรับทุกคนเมื่ออยู่ในที่แสงจ้า

สิ่งที่ต้องเปลี่ยน:
- เปิดดูองค์ประกอบที่ไม่ผ่านตามรายการด้านล่าง และจดสีตัวอักษรกับสีพื้นหลังจากสรุปข้อผิดพลาด
- ใน Online Store > Themes > Customize > Theme settings > Colors ให้ปรับสีข้อความให้เข้มขึ้น หรือปรับพื้นหลังให้อ่อนลงสำหรับชุดสี (color scheme) ที่ได้รับผลกระทบ จนอัตราส่วนเป็นอย่างน้อย 4.5:1
- ให้ความสำคัญเป็นพิเศษกับป้ายลดราคา ข้อความ placeholder ลิงก์ในส่วนท้าย และปุ่มที่วางบนรูปภาพ

การเปลี่ยนแปลงที่แนะนำ (Theme settings › Colors หรือไฟล์ CSS ของธีมคุณ):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

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

ตรวจสอบการแก้ไขของคุณ

สแกนอีกครั้งและยืนยันว่า color-contrast ไม่ปรากฏอีก
สุ่มตรวจด้วยเครื่องมือตรวจคอนทราสต์โดยใช้ค่าสีที่ตรงกัน

คำแนะนำโดยละเอียด: https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright

P3ปานกลางข้อบกพร่องที่ยืนยันแล้ว

เนื้อหาทั้งหมดของหน้าควรอยู่ภายในแลนด์มาร์ก

ปริมาณงาน: ปานกลาง · ผู้รับผิดชอบ: นักพัฒนาธีม

เนื้อหาบางส่วนไม่ได้อยู่ภายในแลนด์มาร์กของหน้า (header, nav, main หรือ footer)

แลนด์มาร์กช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอข้ามไปยังส่วนต่าง ๆ ของหน้าได้ นี่เป็นแนวปฏิบัติที่ดีที่สนับสนุน WCAG 1.3.1 และ 2.4.1

หลักฐาน

พบโดย: กฎอัตโนมัติของ axe-core
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 18 จุด ใน 9 หน้า

สิ่งที่คาดหวัง: เนื้อหาทั้งหมดของหน้าควรอยู่ภายในแลนด์มาร์ก

สิ่งที่พบ: เนื้อหาบางส่วนของหน้าไม่ได้อยู่ภายในแลนด์มาร์ก

เนื้อหาทั้งหมดของหน้าควรอยู่ภายในแลนด์มาร์ก: องค์ประกอบที่ถูกวงไว้บน /

เนื้อหาทั้งหมดของหน้าควรอยู่ภายในแลนด์มาร์ก: องค์ประกอบที่ถูกวงไว้บน /cart

วิธีทำให้เกิดซ้ำ

เปิด https://harborandpine.example/ ใน Chrome หรือ Edge
เปิด DevTools (F12) › Elements กด Ctrl+F (Cmd+F บน Mac) แล้วค้นหา: .announce
หรือเรียกใช้ส่วนขยายเบราว์เซอร์ axe DevTools ซึ่งใช้ได้ฟรีบนหน้านั้น ส่วนขยายจะรายงานปัญหานี้เป็น "region"

องค์ประกอบที่ไม่ผ่าน (แสดง 2 รายการ)

.announce

<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>

#cookie-banner > p

<p>We use cookies to improve your experience and measure traffic.</p>

หน้าที่ได้รับผลกระทบ (9)

https://harborandpine.example/
https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/cart
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

วิธีแก้ไข

แนวทางทั่วไป

ครอบเนื้อหาที่อยู่นอกแลนด์มาร์ก (แถบประกาศ ป๊อปอัป วิดเจ็ตแชต) ด้วยแลนด์มาร์กที่เหมาะสม หรือย้ายไปไว้ใน <main>

แก้ด้วย AIแสดงพรอมต์

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: เนื้อหาทั้งหมดของหน้าควรอยู่ภายในแลนด์มาร์ก
ตำแหน่ง: 18 จุด ใน 9 หน้า เช่น / /collections/all /products/trail-daypack /cart

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

ทำไมจึงสำคัญ: แลนด์มาร์กช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอข้ามไปยังส่วนต่าง ๆ ของหน้าได้ นี่เป็นแนวปฏิบัติที่ดีที่สนับสนุน WCAG 1.3.1 และ 2.4.1

สิ่งที่ต้องเปลี่ยน:
- ครอบเนื้อหาที่อยู่นอกแลนด์มาร์ก (แถบประกาศ ป๊อปอัป วิดเจ็ตแชต) ด้วยแลนด์มาร์กที่เหมาะสม หรือย้ายไปไว้ใน <main>

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

ตรวจสอบการแก้ไขของคุณ

สแกนหน้าที่ได้รับผลกระทบอีกครั้ง

คำแนะนำโดยละเอียด: https://dequeuniversity.com/rules/axe/4.13/region?application=playwright

P3ปานกลางข้อบกพร่องที่ยืนยันแล้ว

ระดับหัวข้อควรเพิ่มขึ้นทีละ 1 ระดับเท่านั้น

ปริมาณงาน: ปานกลาง · ผู้รับผิดชอบ: นักพัฒนาธีม

ระดับหัวข้อข้ามขั้น (เช่น จาก H2 ไป H4) ทำให้ผู้ใช้โปรแกรมอ่านหน้าจอสับสนกับโครงสร้างหน้า

ผู้ใช้โปรแกรมอ่านหน้าจอใช้หัวข้อในการไปยังส่วนต่าง ๆ ของหน้า นี่เป็นแนวปฏิบัติที่ดีที่สนับสนุน WCAG 1.3.1

หลักฐาน

พบโดย: กฎอัตโนมัติของ axe-core
สถานะ · ความมั่นใจ: ข้อบกพร่องที่ยืนยันแล้ว · สูง
ตรวจพบเมื่อ: 24 ก.ย. 2026 (UTC)
ตำแหน่ง: 7 จุด ใน 7 หน้า

สิ่งที่คาดหวัง: ระดับหัวข้อควรเพิ่มขึ้นทีละ 1 ระดับเท่านั้น

สิ่งที่พบ: ลำดับหัวข้อไม่ถูกต้อง

ระดับหัวข้อควรเพิ่มขึ้นทีละ 1 ระดับเท่านั้น: องค์ประกอบที่ถูกวงไว้บน /collections/all

ระดับหัวข้อควรเพิ่มขึ้นทีละ 1 ระดับเท่านั้น: องค์ประกอบที่ถูกวงไว้บน /products/trail-daypack

วิธีทำให้เกิดซ้ำ

เปิด https://harborandpine.example/collections/all ใน Chrome หรือ Edge
เปิด DevTools (F12) › Elements กด Ctrl+F (Cmd+F บน Mac) แล้วค้นหา: article:nth-child(1) > a[href$="trail-daypack"] > h3
หรือเรียกใช้ส่วนขยายเบราว์เซอร์ axe DevTools ซึ่งใช้ได้ฟรีบนหน้านั้น ส่วนขยายจะรายงานปัญหานี้เป็น "heading-order"

องค์ประกอบที่ไม่ผ่าน (แสดง 3 รายการ)

article:nth-child(1) > a[href$="trail-daypack"] > h3

<h3>Trail Daypack 22L</h3>

<h3>Reviews</h3>

h3:nth-child(3)

<h3>Started on the trail</h3>

หน้าที่ได้รับผลกระทบ (7)

https://harborandpine.example/collections/all
https://harborandpine.example/products/trail-daypack
https://harborandpine.example/pages/about
https://harborandpine.example/products/pine-wool-beanie
https://harborandpine.example/products/enamel-camp-mug
https://harborandpine.example/products/harbor-lantern
https://harborandpine.example/products/insulated-bottle

วิธีแก้ไข

แนวทางทั่วไป

ปรับระดับหัวข้อในส่วนที่ได้รับผลกระทบให้เรียงตามลำดับโดยไม่ข้ามขั้น
เปลี่ยนเฉพาะแท็ก ไม่ต้องเปลี่ยนรูปลักษณ์ (ใช้คลาส CSS กำหนดขนาด)

โค้ด

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<h3>Trail Daypack 22L</h3>

หลังแก้ · ตัวอย่างที่ต้องปรับใช้

<h2 class="h3">Trail Daypack 22L</h2>

ใช้ระดับที่ต่อจากหัวข้อก่อนหน้าในหน้า (มักสูงขึ้น 1 ระดับ) และคงรูปลักษณ์ด้วยคลาส ตรวจโครงร่างของหน้าก่อนเปลี่ยน

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<h3>Reviews</h3>

หลังแก้ · ตัวอย่างที่ต้องปรับใช้

<h2 class="h3">Reviews</h2>

ก่อนแก้ · สิ่งที่เราพบ · โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)

<h3>Started on the trail</h3>

หลังแก้ · ตัวอย่างที่ต้องปรับใช้

<h2 class="h3">Started on the trail</h2>

แก้ด้วย AIแสดงพรอมต์

ฉันดูแลร้านค้า Shopify (ธีม Online Store 2.0 และเทมเพลต Liquid) ที่ harborandpine.example การทดสอบการเข้าถึงพบปัญหานี้ และฉันต้องการแก้ไขในธีมของฉัน

ปัญหา: ระดับหัวข้อควรเพิ่มขึ้นทีละ 1 ระดับเท่านั้น
ตำแหน่ง: 7 จุด ใน 7 หน้า เช่น /collections/all /products/trail-daypack /pages/about /products/pine-wool-beanie

ตัวอย่างองค์ประกอบที่ไม่ผ่าน 1 รายการ ตามที่เบราว์เซอร์แสดงผล:
```html
<h3>Trail Daypack 22L</h3>
```

ทำไมจึงสำคัญ: ผู้ใช้โปรแกรมอ่านหน้าจอใช้หัวข้อในการไปยังส่วนต่าง ๆ ของหน้า นี่เป็นแนวปฏิบัติที่ดีที่สนับสนุน WCAG 1.3.1

สิ่งที่ต้องเปลี่ยน:
- ปรับระดับหัวข้อในส่วนที่ได้รับผลกระทบให้เรียงตามลำดับโดยไม่ข้ามขั้น
- เปลี่ยนเฉพาะแท็ก ไม่ต้องเปลี่ยนรูปลักษณ์ (ใช้คลาส CSS กำหนดขนาด)

การเปลี่ยนแปลงที่แนะนำ (โค้ดธีมของคุณ (ค้นหา markup ที่แสดงไว้)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

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

ตรวจสอบการแก้ไขของคุณ

สแกนอีกครั้ง และตรวจโครงร่างหัวข้อด้วยส่วนขยายเบราว์เซอร์ เช่น HeadingsMap

คำแนะนำโดยละเอียด: https://dequeuniversity.com/rules/axe/4.13/heading-order?application=playwright

ต้องตรวจสอบด้วยคน

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

ต้องตรวจสอบWCAG 4.1.3
เส้นทางคีย์บอร์ด: เพิ่มลงตะกร้าด้วยคีย์บอร์ด
การกด Enter ที่ปุ่มเพิ่มลงตะกร้าได้ผล (จำนวนสินค้าในตะกร้าที่ส่วนหัวเปลี่ยนไป ข้อความ “เพิ่มลงตะกร้าแล้ว” ปรากฏขึ้น) แต่เราไม่พบข้อความสถานะหรือกล่องโต้ตอบที่ได้รับโฟกัส ผู้ใช้โปรแกรมอ่านหน้าจอจึงอาจไม่ได้ยินว่าสินค้าถูกเพิ่มแล้ว
1 จุด ใน 1 หน้า · วิธีตรวจรายการนี้
ต้องตรวจสอบWCAG 1.4.10
หน้าสินค้าอาจแสดงบนหน้าจอแคบไม่พอดีหากไม่เลื่อนด้านข้าง
ที่ความกว้าง 320 CSS pixel (เท่ากับการซูม 400%) หน้านี้กว้างกว่าหน้าจอ 200px ตารางข้อมูลและแผนที่เลื่อนได้ แต่ข้อความและตัวควบคุมไม่ควรต้องเลื่อน
2 จุด ใน 1 หน้า · วิธีตรวจรายการนี้
องค์ประกอบที่ต้องตรวจ (แสดง 2 รายการ)
div.icons
```
<div class="icons"> <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></bu
```
div
```
<div> <p style="color:#6a6a60;font-size:14px">Harbor &amp; Pine</p> <h1>Trail Daypack 22L</h1> <p class="price" style="font-size:22px">$128<span class="compare">$150</span></p> <p class="opt-label">Si
```
ต้องตรวจสอบWCAG 1.4.10
หน้าแรกอาจแสดงบนหน้าจอแคบไม่พอดีหากไม่เลื่อนด้านข้าง
ที่ความกว้าง 320 CSS pixel (เท่ากับการซูม 400%) หน้านี้กว้างกว่าหน้าจอ 55px ตารางข้อมูลและแผนที่เลื่อนได้ แต่ข้อความและตัวควบคุมไม่ควรต้องเลื่อน
3 จุด ใน 1 หน้า · วิธีตรวจรายการนี้
องค์ประกอบที่ต้องตรวจ (แสดง 3 รายการ)
div.icons
```
<div class="icons"> <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></bu
```
article.card
```
<article class="card"><span class="badge">Sale</span><a href="/products/trail-daypack"><img src="/img/beanie.svg"><h3>Pine Wool Beanie</h3></a><p class="price">$32<span class="compare">$40</span></p><
```
button.btn.light
```
<button class="btn light" type="submit">Subscribe</button>
```
ต้องตรวจสอบWCAG 1.4.3
องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ
ระบุสีพื้นหลังขององค์ประกอบไม่ได้เนื่องจากองค์ประกอบมีโหนดรูปภาพอยู่ภายใน
1 จุด ใน 1 หน้า · วิธีตรวจรายการนี้
องค์ประกอบที่ต้องตรวจ (แสดง 1 รายการ)
h1
```
<h1>Gear for the long way home</h1>
```

ทดสอบซ้ำเพื่อยืนยันการแก้ไข

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

การทดสอบซ้ำใช้ได้กับรายงานแบบชำระเงิน

การตรวจด้วยคน

เครื่องมืออัตโนมัติตัดสินรายการเหล่านี้ไม่ได้ โปรดตรวจให้ครบก่อนถือว่างานเสร็จ

ชำระเงินให้เสร็จด้วยคีย์บอร์ดเพียงอย่างเดียว เพราะเส้นทางอัตโนมัติของเราหยุดที่ปุ่มชำระเงินและไม่เคยเข้าสู่ขั้นตอนชำระเงิน
ทำซ้ำด้วยโปรแกรมอ่านหน้าจอ (VoiceOver บน Mac: Cmd+F5 และ NVDA บน Windows) และยืนยันว่าราคา ตัวเลือกสินค้า และข้อผิดพลาดถูกอ่านออกเสียง
ซูมเบราว์เซอร์เป็น 200% และยืนยันว่าไม่มีสิ่งใดซ้อนทับกันหรือหายไป
ตรวจว่าวิดีโอสินค้าและวิดีโอแบรนด์มีคำบรรยายที่ถูกต้อง
ส่งฟอร์มโดยกรอกข้อมูลผิด (จดหมายข่าว ติดต่อ ชำระเงิน) และยืนยันว่าข้อผิดพลาดถูกอธิบายเป็นข้อความ
ตรวจว่าภาพสไลด์ (carousel) และป๊อปอัปหยุดชั่วคราวหรือปิดได้ รวมถึงด้วยปุ่ม Escape

ร่างแถลงการณ์การเข้าถึง

แก้ไขส่วนที่อยู่ในวงเล็บ แล้วเผยแพร่บนหน้าที่มีลิงก์จากส่วนท้ายของเว็บไซต์

แถลงการณ์การเข้าถึงของ harborandpine.example

เราต้องการให้ทุกคนซื้อสินค้าบน harborandpine.example ได้ รวมถึงผู้ที่ใช้โปรแกรมอ่านหน้าจอ การนำทางด้วยคีย์บอร์ด การขยายหน้าจอ หรือเทคโนโลยีสิ่งอำนวยความสะดวกอื่น ๆ เรามุ่งให้เป็นไปตาม Web Content Accessibility Guidelines (WCAG) 2.2 ระดับ AA

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

ข้อจำกัดที่ทราบ (ณ วันที่ 24 กันยายน 2026)
- การเข้าถึงด้วยคีย์บอร์ดและโฟกัส (WCAG 2.1.1) เราวางแผนจะแก้ไขภายใน 2026-10-08
- ลิงก์และปุ่มที่ไม่มีชื่อ (WCAG 2.4.4 4.1.2) เราวางแผนจะแก้ไขภายใน 2026-10-08
- รูปภาพที่ไม่มีข้อความทดแทน (WCAG 1.1.1) เราวางแผนจะแก้ไขภายใน 2026-10-08
- ช่องกรอกข้อมูลที่ไม่มีป้ายกำกับ (WCAG 4.1.2) เราวางแผนจะแก้ไขภายใน 2026-10-08
- คอนทราสต์สีต่ำ (WCAG 1.4.3) เราวางแผนจะแก้ไขภายใน 2026-10-08

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

แถลงการณ์นี้จัดทำเมื่อ 24 กันยายน 2026 และจะได้รับการทบทวนอย่างน้อยปีละครั้ง

บันทึกหลักฐาน

แต่ละหน้าถูกโหลดใน Chromium และทดสอบด้วย axe-core 4.13.0 ค่าแฮช SHA-256 ใช้ระบุผลลัพธ์ดิบของแต่ละหน้า

หน้าที่ทดสอบ พร้อมเวลาที่ทดสอบและค่าแฮชของผลลัพธ์
หน้า	เวลาที่ทดสอบ (UTC)	HTTP	ปัญหา	SHA-256
หน้าแรกhttps://harborandpine.example/	2026-09-24 14:05:00	200	15	da1e5470a57859a864332912dd1e4f62b4c4f64487ba144865b74879519599a3
หน้าคอลเลกชันhttps://harborandpine.example/collections/all	2026-09-24 14:05:09	200	20	28d8dfcf5ca953af353264a930a351bea3cf23f98a303874b32e5da355a4c8b0
หน้าสินค้าhttps://harborandpine.example/products/trail-daypack	2026-09-24 14:05:18	200	20	68a173ddfd16eeeef5e36d6c0fa9d426769f0d96e358c5e35b67608dd84139b4
ตะกร้าhttps://harborandpine.example/cart	2026-09-24 14:05:27	200	12	5b7945c2cdf779dcef2bd8975d96eb8f42d8dedbf10e767ec80199dd22ce257c
หน้าเนื้อหาhttps://harborandpine.example/pages/about	2026-09-24 14:05:36	200	9	daf61ae856358a574e63f9357db0bfd9ae6079065acf3aebd5b3c5a7f460e53f
หน้าเพิ่มเติมhttps://harborandpine.example/products/pine-wool-beanie	2026-09-24 14:08:00	200	20	f708ccd7de34dfb65d59d3716580b6ec15a6420020c8387fa4da4e2ff5bd52d3
หน้าเพิ่มเติมhttps://harborandpine.example/products/enamel-camp-mug	2026-09-24 14:08:07	200	19	c619bcd29e89d06099d174b9fc19305a42f2fa9bdddb600a750c867fc7477022
หน้าเพิ่มเติมhttps://harborandpine.example/products/harbor-lantern	2026-09-24 14:08:14	200	20	5720b7433b75050ba413ac74c2bd726b0620aaa68f7918083052383257d5c418
หน้าเพิ่มเติมhttps://harborandpine.example/products/insulated-bottle	2026-09-24 14:08:21	200	19	6f1972c22e477c9a63e2dfde1123ed759718f6a75e1606b23f208848691510fd

ขอบเขตและวิธีการ

สิ่งที่เราทดสอบ

9 หน้า (หน้าแรก หน้าคอลเลกชัน หน้าสินค้า ตะกร้า หน้าเนื้อหา หน้าเพิ่มเติม) โหลดใน Chromium ที่ขนาด 1366×900
กฎของ axe-core 4.13.0 สำหรับ WCAG 2.0, 2.1 และ 2.2 ระดับ A และ AA รวมถึงกฎแนวปฏิบัติที่ดี (แสดงเป็น P3)
การทดสอบด้วยคีย์บอร์ด: กด Tab 40 ครั้งบนหน้าแรก เพื่อหากับดักโฟกัสและตัวบ่งชี้โฟกัสที่ไม่มี
เส้นทางการซื้อด้วยคีย์บอร์ดเพียงอย่างเดียวจากหน้าแรกไปจนถึงปุ่มชำระเงิน (ดูด้านบน)
การตรวจ reflow ที่ความกว้าง 320 CSS pixel บนหน้าแรกและหน้าสินค้า (WCAG 1.4.10)

สิ่งที่เราไม่ได้ทดสอบ

หน้าชำระเงินและหน้าจ่ายเงิน การส่งฟอร์ม หน้าบัญชี และหน้าที่ต้องเข้าสู่ระบบ
สิ่งที่โปรแกรมอ่านหน้าจออ่านออกเสียงจริง นอกเหนือจากกฎอัตโนมัติ
คำบรรยายวิดีโอและเสียงบรรยายภาพ เอกสาร PDF และเนื้อหาภายในเฟรมของบุคคลที่สาม
ภาษาที่เข้าใจง่าย การเข้าถึงด้านการรับรู้และความเข้าใจ (cognitive accessibility) และสิ่งอื่นที่ต้องใช้วิจารณญาณของคน (ดูการตรวจด้วยคน)

วิธีอ่านผลลัพธ์

ข้อบกพร่องที่ยืนยันแล้ว: การทดสอบอัตโนมัติหรือเส้นทางคีย์บอร์ดไม่ผ่าน พร้อมแสดงหลักฐาน
ต้องตรวจสอบ: การทดสอบตั้งข้อสังเกตสิ่งที่ตัดสินไม่ได้ ควรให้คนตรวจ
ผ่าน: กฎอัตโนมัติไม่พบข้อผิดพลาดในหน้าที่ทดสอบ
ไม่ได้ทดสอบ: อยู่นอกขอบเขตที่การทดสอบอัตโนมัติครอบคลุมได้ในที่นี้ ดูการตรวจด้วยคน

รับรายงานนี้สำหรับเว็บไซต์ของคุณ

เริ่มด้วยการสแกนฟรีเพื่อดูปัญหาของคุณ และดูว่าปัญหาเหล่านั้นตรงกับหนังสือของคุณอย่างไร รายงานแก้ไขการเข้าถึงราคา $249 ชำระครั้งเดียว และพร้อมภายในประมาณ 10 นาที

สแกนเว็บไซต์ของคุณฟรี

รายงานนี้อธิบายผลการทดสอบอัตโนมัติและให้แนวทางการแก้ไข ไม่ใช่คำแนะนำทางกฎหมาย และไม่ได้รับรองการปฏิบัติตาม ADA, European Accessibility Act หรือกฎหมายอื่นใด

harborandpine.example

สรุป

ภาพรวม

ภาพรวมเว็บไซต์

เส้นทางการซื้อด้วยคีย์บอร์ด

01ไปถึงเมนูหลัก

02เปิดสินค้าจากคอลเลกชัน

03เลือกตัวเลือกและจำนวน

04เพิ่มลงตะกร้าด้วยคีย์บอร์ด

05แก้ไขตะกร้าและไปถึงการชำระเงิน

06ชำระเงิน

แผนผังข้อกล่าวหาในหนังสือ

แผนการแก้ไข

วิธีแก้แต่ละปัญหา

โฟกัสของคีย์บอร์ดติดอยู่ในแบนเนอร์คุกกี้

หลักฐาน

วิธีแก้ไข

ตรวจสอบการแก้ไขของคุณ

เลือกตัวเลือกสินค้าด้วยคีย์บอร์ดไม่ได้

หลักฐาน

วิธีแก้ไข

โค้ด

ตรวจสอบการแก้ไขของคุณ

ปุ่มต้องมีข้อความที่ระบุได้

หลักฐาน

วิธีแก้ไข

โค้ด

ตรวจสอบการแก้ไขของคุณ

รูปภาพต้องมีข้อความทดแทน

หลักฐาน

วิธีแก้ไข

โค้ด

ตรวจสอบการแก้ไขของคุณ

องค์ประกอบในฟอร์มต้องมีป้ายกำกับ

หลักฐาน

วิธีแก้ไข

โค้ด

ตรวจสอบการแก้ไขของคุณ

องค์ประกอบ select ต้องมีชื่อที่เข้าถึงได้

หลักฐาน

วิธีแก้ไข

โค้ด

ตรวจสอบการแก้ไขของคุณ

ลิงก์ต้องมีข้อความที่ระบุได้

หลักฐาน

วิธีแก้ไข

โค้ด

ตรวจสอบการแก้ไขของคุณ

องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ

หลักฐาน

วิธีแก้ไข

โค้ด

ตรวจสอบการแก้ไขของคุณ

เนื้อหาทั้งหมดของหน้าควรอยู่ภายในแลนด์มาร์ก

หลักฐาน

วิธีแก้ไข

ตรวจสอบการแก้ไขของคุณ

ระดับหัวข้อควรเพิ่มขึ้นทีละ 1 ระดับเท่านั้น

หลักฐาน

วิธีแก้ไข

โค้ด

ตรวจสอบการแก้ไขของคุณ

ต้องตรวจสอบด้วยคน

เส้นทางคีย์บอร์ด: เพิ่มลงตะกร้าด้วยคีย์บอร์ด

หน้าสินค้าอาจแสดงบนหน้าจอแคบไม่พอดีหากไม่เลื่อนด้านข้าง

หน้าแรกอาจแสดงบนหน้าจอแคบไม่พอดีหากไม่เลื่อนด้านข้าง

องค์ประกอบต้องผ่านเกณฑ์อัตราส่วนคอนทราสต์สีขั้นต่ำ

ทดสอบซ้ำเพื่อยืนยันการแก้ไข

การตรวจด้วยคน

ร่างแถลงการณ์การเข้าถึง

บันทึกหลักฐาน

ขอบเขตและวิธีการ

สิ่งที่เราทดสอบ

สิ่งที่เราไม่ได้ทดสอบ

วิธีอ่านผลลัพธ์

รับรายงานนี้สำหรับเว็บไซต์ของคุณ