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

Kayce Basques

Sofia Emelianova

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

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

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

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

โปรดดูเรียนรู้เกี่ยวกับความสามารถเข้าถึงได้ง่าย หากต้องการเรียนรู้วิธีพัฒนาเว็บไซต์ที่สามารถเข้าถึงได้ง่าย

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

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

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

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

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

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

โดยทั่วไป ให้ใช้การตรวจสอบการเข้าถึงภายใต้แผง Lighthouse เพื่อตรวจสอบสิ่งต่อไปนี้

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

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

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

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

   

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

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

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

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

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

   

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

   

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

   

ดูเพิ่มเติม: ส่วนขยาย aXe

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

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

แผงการช่วยเหลือพิเศษ

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

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

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

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

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

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

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

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

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

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

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

2. ในแถบการทำงานด้านบน ให้คลิกโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำ

   

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

   

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

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

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

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

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

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

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

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

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

1. ตรวจสอบองค์ประกอบในหน้าเว็บ
2. ในองค์ประกอบ > การเข้าถึง > ผู้ดูลำดับแหล่งที่มา ให้เลือก แสดงลำดับแหล่งที่มา

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

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

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

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

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

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