ข้อมูลอ้างอิงของฟีเจอร์การช่วยเหลือพิเศษ

Kayce Basques

Sofia Emelianova

หน้านี้เป็นข้อมูลอ้างอิงแบบครอบคลุมเกี่ยวกับฟีเจอร์การช่วยเหลือพิเศษใน Chrome DevTools เครื่องมือนี้มีไว้สำหรับนักพัฒนาเว็บที่มีลักษณะต่อไปนี้

• มีความเข้าใจพื้นฐานเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บ เช่น วิธีเปิด
• คุ้นเคยกับหลักการและแนวทางปฏิบัติแนะนำด้านการช่วยเหลือพิเศษ

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

ดูการไปยังส่วนต่างๆ ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วยเทคโนโลยีความช่วยเหลือพิเศษหากต้องการความช่วยเหลือเกี่ยวกับการไปยังส่วนต่างๆ ของเครื่องมือสำหรับนักพัฒนาเว็บด้วยเทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอ

ดูศึกษาการช่วยเหลือพิเศษหากต้องการดูวิธีพัฒนาเว็บไซต์ที่เข้าถึงได้

ภาพรวมฟีเจอร์การช่วยเหลือพิเศษในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ส่วนนี้จะอธิบายว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เหมาะกับชุดเครื่องมือการช่วยเหลือพิเศษโดยรวมอย่างไร

เมื่อพิจารณาว่าหน้าเว็บเข้าถึงได้หรือไม่ คุณต้องคำนึงถึงคำถามทั่วไป 2 ข้อต่อไปนี้

1. ฉันไปยังส่วนต่างๆ ของหน้าด้วยแป้นพิมพ์หรือโปรแกรมอ่านหน้าจอได้ไหม
2. องค์ประกอบของหน้าเว็บได้รับการมาร์กอัปอย่างถูกต้องสำหรับโปรแกรมอ่านหน้าจอหรือไม่

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

ตรวจสอบการช่วยเหลือพิเศษของหน้าเว็บ

โดยทั่วไป ให้ใช้การตรวจสอบการช่วยเหลือพิเศษในแผง Lighthouse เพื่อพิจารณาว่า

• หน้าเว็บได้รับการมาร์กอัปอย่างถูกต้องสำหรับโปรแกรมอ่านหน้าจอ
• องค์ประกอบข้อความในหน้าเว็บมีอัตราส่วนคอนทราสต์ที่เพียงพอ โปรดดูหัวข้อทําให้เว็บไซต์อ่านง่ายขึ้นด้วย

วิธีตรวจสอบหน้าเว็บ

1. ไปยัง URL ที่ต้องการตรวจสอบ

2. ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้คลิกแผง Lighthouse DevTools จะแสดงตัวเลือกการกําหนดค่าต่างๆ

   

   หมายเหตุ: ภาพหน้าจอในส่วนนี้ถ่ายจาก Chrome 69 ในภาพหน้าจอ แผงดังกล่าวยังคงมีชื่อว่าการตรวจสอบ แต่เปลี่ยนชื่อเป็น Lighthouse ใน Chrome 83แล้ว คุณสามารถตรวจสอบเวอร์ชันที่ใช้ได้ที่ chrome://version UI ของแผงการตรวจสอบจะแตกต่างกันใน Chrome บางเวอร์ชันเก่าหรือใหม่ แต่เวิร์กโฟลว์ทั่วไปจะเหมือนกัน

3. ในส่วนอุปกรณ์ ให้เลือกอุปกรณ์เคลื่อนที่หากต้องการจําลองอุปกรณ์เคลื่อนที่ ตัวเลือกนี้จะเปลี่ยนสตริง User Agent และปรับขนาดวิวพอร์ตในลักษณะที่ต่างออกไป หากหน้าเว็บเวอร์ชันอุปกรณ์เคลื่อนที่แสดงผลแตกต่างจากเวอร์ชันเดสก์ท็อป ตัวเลือกนี้อาจมีผลอย่างมากต่อผลการสํารวจ

4. ในส่วน Lighthouse ให้ตรวจสอบว่าได้เปิดใช้การช่วยเหลือพิเศษแล้ว ปิดใช้หมวดหมู่อื่นๆ หากต้องการยกเว้นหมวดหมู่เหล่านั้นจากรายงาน โปรดเปิดใช้ฟีเจอร์นี้หากต้องการดูวิธีอื่นๆ ในتحسينคุณภาพของหน้า

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

6. ช่องทําเครื่องหมายล้างพื้นที่เก็บข้อมูลช่วยให้คุณล้างพื้นที่เก็บข้อมูลทั้งหมดก่อนที่จะโหลดหน้าเว็บ หรือเก็บพื้นที่เก็บข้อมูลระหว่างการโหลดหน้าเว็บ นอกจากนี้ ตัวเลือกนี้อาจไม่เกี่ยวข้องกับคะแนนการช่วยเหลือพิเศษด้วย คุณจึงใช้ตัวเลือกใดก็ได้ที่ต้องการ

7. คลิกสร้างรายงาน หลังจากผ่านไป 10-30 วินาที เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงรายงาน รายงานจะแสดงเคล็ดลับต่างๆ เกี่ยวกับวิธีปรับปรุงการช่วยเหลือพิเศษของหน้า

   

8. คลิกการตรวจสอบเพื่อดูข้อมูลเพิ่มเติม

   

9. คลิกดูข้อมูลเพิ่มเติมเพื่อดูเอกสารประกอบของการตรวจสอบ

   

ดูส่วนขยาย aXe

คุณอาจต้องการใช้ส่วนขยาย aXe หรือส่วนขยาย Lighthouse แทนแผง Lighthouse ที่มีให้ใช้งานโดยค่าเริ่มต้นใน Chrome โดยปกติแล้ว ข้อมูลจะเหมือนกัน เนื่องจาก aXe เป็นเครื่องมือพื้นฐานที่ขับเคลื่อนแผง Lighthouse ส่วนขยาย aXe จะมี UI ที่แตกต่างออกไปและอธิบายการตรวจสอบในลักษณะที่ต่างออกไปเล็กน้อย

ข้อดีอย่างหนึ่งที่ส่วนขยาย aXe มีเหนือแผงการตรวจสอบคือช่วยให้คุณตรวจสอบและไฮไลต์โหนดที่ไม่ผ่าน

ทดสอบการจัดเรียงเนื้อหาใหม่ด้วยแถบเครื่องมืออุปกรณ์

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

หากต้องการปรับขนาดวิวพอร์ต ให้ลากแฮนเดิลไปยังมิติข้อมูลที่ต้องการ ดูเกณฑ์ความสําเร็จของการจัดเรียงใหม่ตาม WCAG เพื่อดูขนาดที่เฉพาะเจาะจงที่จะทดสอบ

แท็บการช่วยเหลือพิเศษ

แท็บการช่วยเหลือพิเศษคือที่ที่คุณดูต้นไม้การช่วยเหลือพิเศษ แอตทริบิวต์ ARIA และพร็อพเพอร์ตี้การช่วยเหลือพิเศษที่คำนวณแล้วของโหนด DOM ได้

วิธีเปิดแท็บการช่วยเหลือพิเศษ

1. คลิกแผงองค์ประกอบ
2. ในต้นไม้ DOM ให้เลือกองค์ประกอบที่ต้องการตรวจสอบ
3. คลิกแท็บการช่วยเหลือพิเศษ แท็บนี้อาจซ่อนอยู่หลังปุ่มแท็บเพิ่มเติม keyboard_double_arrow_right

คุณสามารถลากแท็บการช่วยเหลือพิเศษไปไว้ด้านหน้าเพื่อให้เข้าถึงได้เร็วขึ้นในอนาคต

ดูตําแหน่งขององค์ประกอบในลําดับชั้นการช่วยเหลือพิเศษ

แผนผังการช่วยเหลือพิเศษคือชุดย่อยของแผนผัง DOM โดยจะมีเฉพาะองค์ประกอบจาก DOM Tree ที่เกี่ยวข้องและมีประโยชน์ในการแสดงเนื้อหาของหน้าในโปรแกรมอ่านหน้าจอ

ตรวจสอบตําแหน่งขององค์ประกอบในลําดับชั้นการช่วยเหลือพิเศษจากแท็บการช่วยเหลือพิเศษ

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

(เวอร์ชันตัวอย่าง) สำรวจแผนผังการช่วยเหลือพิเศษแบบเต็มหน้า

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

วิธีสำรวจแผนผังการช่วยเหลือพิเศษ

1. เลือก science เปิดใช้แผนผังการช่วยเหลือพิเศษแบบเต็มหน้า

2. คลิกโหลด DevTools ซ้ำในแถบการดำเนินการที่ด้านบน

   

3. ที่มุมขวาบนของแผงองค์ประกอบ ให้สลับปุ่ม accessibility_new เปลี่ยนเป็นมุมมองต้นไม้การช่วยเหลือพิเศษ

   

4. เรียกดูแผนผังการช่วยเหลือพิเศษ คุณสามารถขยายโหนดหรือคลิกเพื่อดูรายละเอียดในส่วนพร็อพเพอร์ตี้ที่คำนวณแล้ว

5. เลือกโหนด แล้วคลิกปุ่ม accessibility_new เปลี่ยนเป็นมุมมองแผนผัง DOM เพื่อกลับไปที่แผนผัง DOM

   ระบบจะเลือกโหนด DOM ที่เกี่ยวข้องให้ วิธีนี้เป็นวิธีที่ยอดเยี่ยมในการทำความเข้าใจการแมประหว่างโหนด DOM กับโหนดต้นไม้การช่วยเหลือพิเศษ

หมายเหตุ: ทีมของเรายังคงทํางานอย่างหนักกับฟีเจอร์เวอร์ชันตัวอย่างนี้ เราต้องการความคิดเห็นจากคุณเพื่อปรับปรุงฟีเจอร์นี้ให้ดียิ่งขึ้น

ดูแอตทริบิวต์ ARIA ขององค์ประกอบ

แอตทริบิวต์ ARIA ช่วยให้มั่นใจว่าโปรแกรมอ่านหน้าจอมีข้อมูลทั้งหมดที่จำเป็นในการนำเสนอเนื้อหาของหน้าเว็บอย่างถูกต้อง

ดูแอตทริบิวต์ ARIA ขององค์ประกอบในแท็บการช่วยเหลือพิเศษ

ดูลําดับแหล่งที่มาขององค์ประกอบบนหน้าจอ

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

วิธีดูและแก้ไขข้อบกพร่องของลําดับแหล่งที่มาในเว็บไซต์

1. ตรวจสอบองค์ประกอบในหน้า
2. ในองค์ประกอบ > การช่วยเหลือพิเศษ > เครื่องมือดูลําดับแหล่งที่มา ให้เลือกcheck_box แสดงลําดับแหล่งที่มา

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

ดูพร็อพเพอร์ตี้การช่วยเหลือพิเศษที่คำนวณแล้วขององค์ประกอบ

หมายเหตุ: หากกำลังมองหาคุณสมบัติ CSS ที่คำนวณแล้ว ให้ดูแท็บที่คำนวณแล้ว

เบราว์เซอร์จะคำนวณพร็อพเพอร์ตี้การช่วยเหลือพิเศษบางรายการแบบไดนามิก คุณดูพร็อพเพอร์ตี้เหล่านี้ได้ในส่วนพร็อพเพอร์ตี้ที่คำนวณแล้วของแท็บการช่วยเหลือพิเศษ

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

ค้นหาและแก้ไขข้อความคอนทราสต์ต่ำ

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