หน้านี้เป็นข้อมูลอ้างอิงที่ครอบคลุมเกี่ยวกับฟีเจอร์การช่วยเหลือพิเศษใน Chrome DevTools โดยมีไว้สำหรับนักพัฒนาเว็บที่มีคุณสมบัติดังต่อไปนี้
- มีความเข้าใจพื้นฐานเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บ เช่น วิธีเปิดเครื่องมือ
- คุ้นเคยกับหลักการการช่วยเหลือพิเศษและแนวทางปฏิบัติแนะนำ
วัตถุประสงค์ของข้อมูลอ้างอิงนี้คือเพื่อช่วยให้คุณค้นพบเครื่องมือทั้งหมดที่มีในเครื่องมือสำหรับนักพัฒนาเว็บที่จะช่วยให้คุณตรวจสอบความสามารถเข้าถึงได้ง่ายของหน้าเว็บได้
ดูการไปยังส่วนต่างๆ ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วยเทคโนโลยีความช่วยเหลือพิเศษหากคุณกำลังมองหาความช่วยเหลือในการใช้งานเครื่องมือสำหรับนักพัฒนาเว็บด้วยเทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอ
โปรดดูเรียนรู้เกี่ยวกับการช่วยเหลือพิเศษ หากต้องการเรียนรู้วิธีพัฒนาเว็บไซต์ที่เข้าถึงได้
ภาพรวมของฟีเจอร์การช่วยเหลือพิเศษในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ส่วนนี้อธิบายว่าเครื่องมือสำหรับนักพัฒนาเว็บจะทำงานร่วมกับชุดเครื่องมือช่วยเหลือพิเศษโดยรวมได้อย่างไร
ในการพิจารณาว่าหน้าเว็บเข้าถึงได้หรือไม่ คุณจะต้องคำนึงถึงคำถามทั่วไป 2 ข้อดังนี้
- ฉันไปยังส่วนต่างๆ ของหน้าด้วยแป้นพิมพ์หรือโปรแกรมอ่านหน้าจอได้ไหม
- องค์ประกอบของหน้ามีการมาร์กอัปอย่างเหมาะสมสำหรับโปรแกรมอ่านหน้าจอหรือไม่
โดยทั่วไป เครื่องมือสำหรับนักพัฒนาเว็บสามารถช่วยคุณแก้ไขข้อผิดพลาดที่เกี่ยวข้องกับคำถามที่ 2 ได้เนื่องจากข้อผิดพลาดเหล่านี้ตรวจพบได้ง่ายโดยอัตโนมัติ คำถามที่ 1 ก็สำคัญพอๆ กัน แต่เครื่องมือสำหรับนักพัฒนาเว็บ ไม่สามารถช่วยคุณได้ วิธีเดียวที่จะหาข้อผิดพลาดที่เกี่ยวข้องกับคำถามที่ 1 คือลองใช้หน้าเว็บที่มีแป้นพิมพ์หรือโปรแกรมอ่านหน้าจอเอง ดูวิธีตรวจสอบการช่วยเหลือพิเศษเพื่อดูข้อมูลเพิ่มเติม
ตรวจสอบการช่วยเหลือพิเศษของหน้าเว็บ
โดยทั่วไปแล้ว ให้ใช้การตรวจสอบการช่วยเหลือพิเศษในแผง Lighthouse เพื่อดูว่า
- มีการมาร์กอัปหน้าเว็บอย่างถูกต้องสำหรับโปรแกรมอ่านหน้าจอ
- องค์ประกอบของข้อความในหน้าเว็บมีอัตราส่วนคอนทราสต์ที่เพียงพอ โปรดดูหัวข้อทำให้เว็บไซต์อ่านง่ายขึ้น
วิธีตรวจสอบหน้าเว็บ
- ไปที่ URL ที่ต้องการตรวจสอบ
คลิกแท็บ Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงตัวเลือกการกำหนดค่าต่างๆ
สำหรับอุปกรณ์ ให้เลือกอุปกรณ์เคลื่อนที่หากคุณต้องการจำลองอุปกรณ์เคลื่อนที่ ตัวเลือกนี้จะเปลี่ยนสตริง User Agent ที่ต่างออกไปและปรับขนาดวิวพอร์ต หากหน้าเว็บของรุ่นอุปกรณ์เคลื่อนที่แสดงต่างจากเวอร์ชันเดสก์ท็อป ตัวเลือกนี้อาจส่งผลอย่างมากต่อผลการตรวจสอบ
ในส่วน Lighthouse ให้ตรวจสอบว่าเปิดใช้การช่วยเหลือพิเศษอยู่ ปิดใช้หมวดหมู่อื่นๆ หากคุณต้องการยกเว้นหมวดหมู่เหล่านี้ในรายงาน โดยให้เปิดใช้งานไว้หากต้องการทราบวิธีอื่นๆ ในการปรับปรุงคุณภาพของหน้าเว็บ
ส่วนการควบคุมช่วยให้คุณควบคุมเครือข่ายและ CPU ได้ ซึ่งมีประโยชน์ในการวิเคราะห์ประสิทธิภาพการโหลด ตัวเลือกนี้ไม่ควรไม่เกี่ยวข้องกับคะแนนการช่วยเหลือพิเศษของคุณ คุณจึงใช้ตัวเลือกใดก็ได้ที่ต้องการ
ช่องทำเครื่องหมายล้างพื้นที่เก็บข้อมูลช่วยให้คุณล้างพื้นที่เก็บข้อมูลทั้งหมดก่อนที่จะโหลดหน้าเว็บ หรือเก็บพื้นที่เก็บข้อมูลไว้ระหว่างการโหลดหน้าเว็บ นอกจากนี้ ตัวเลือกนี้อาจไม่เกี่ยวข้องกับคะแนนการเข้าถึง ดังนั้นคุณจะใช้อะไรก็ได้ที่ต้องการ
คลิกสร้างรายงาน เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงรายงานหลังจากผ่านไป 10 ถึง 30 วินาที รายงานจะแสดงเคล็ดลับต่างๆ เกี่ยวกับวิธีปรับปรุงการเข้าถึงหน้าเว็บ
คลิกการตรวจสอบเพื่อดูข้อมูลเพิ่มเติม
คลิกดูข้อมูลเพิ่มเติมเพื่อดูเอกสารประกอบของการตรวจสอบนั้น
ดูเพิ่มเติมที่: ส่วนขยาย aXe
คุณอาจต้องการใช้ส่วนขยาย aXe หรือส่วนขยาย Lighthouse แทนที่จะใช้แผง Lighthouse ที่มีโดยค่าเริ่มต้นใน Chrome ซึ่งโดยทั่วไปจะให้ข้อมูลเดียวกัน เนื่องจาก aXe เป็นเครื่องมือพื้นฐานที่ขับเคลื่อนแผง Lighthouse ส่วนขยาย aXe มี UI ต่างออกไปและอธิบายการตรวจสอบต่างกันเล็กน้อย
ข้อดีอย่างหนึ่งที่ส่วนขยาย aXe มีเหนือแผงการตรวจสอบคือช่วยให้คุณตรวจสอบและไฮไลต์โหนดที่ล้มเหลวได้
แผงการช่วยเหลือพิเศษ
แผงการช่วยเหลือพิเศษคือที่ที่คุณจะดูแผนผังการช่วยเหลือพิเศษ, แอตทริบิวต์ ARIA และพร็อพเพอร์ตี้การช่วยเหลือพิเศษที่คำนวณของโหนด DOM ได้
วิธีเปิดแผงการช่วยเหลือพิเศษ
- คลิกแท็บองค์ประกอบ
- ในแผนผัง DOM ให้เลือกองค์ประกอบที่คุณต้องการตรวจสอบ
- คลิกแท็บการช่วยเหลือพิเศษ แท็บนี้อาจซ่อนอยู่หลังปุ่มแท็บเพิ่มเติม
ดูตำแหน่งองค์ประกอบในแผนผังการช่วยเหลือพิเศษ
แผนผังการช่วยเหลือพิเศษเป็นชุดย่อยของแผนผัง DOM จะมีเพียงองค์ประกอบจากแผนผัง DOM ที่เกี่ยวข้องและมีประโยชน์สำหรับการแสดงเนื้อหาของหน้าเว็บในโปรแกรมอ่านหน้าจอ
ตรวจสอบตำแหน่งองค์ประกอบในแผนผังการช่วยเหลือพิเศษจากแผงการช่วยเหลือพิเศษ
มุมมองนี้ช่วยให้คุณสำรวจโหนดเดียวและโหนดระดับบนเท่านั้น หากต้องการสำรวจโครงสร้างการช่วยเหลือพิเศษทั้งหมด ให้ทำตามขั้นตอนด้านล่าง
(ตัวอย่าง) สำรวจแผนผังการช่วยเหลือพิเศษแบบเต็มหน้า
มุมมองแบบเต็มหน้าของแผนผังการช่วยเหลือพิเศษจะช่วยให้คุณสำรวจโครงสร้างทั้งหน้าและช่วยให้คุณเข้าใจมากขึ้นว่าเนื้อหาเว็บของคุณเปิดเผยต่อเทคโนโลยีความช่วยเหลือพิเศษอย่างไร
วิธีสำรวจแผนผังการช่วยเหลือพิเศษ
- เลือก
เปิดใช้แผนผังการช่วยเหลือพิเศษแบบเต็มหน้า คลิกโหลดเครื่องมือสำหรับนักพัฒนาเว็บซ้ำในแถบการดำเนินการด้านบน
ที่มุมขวาบนของแผงองค์ประกอบ ให้สลับปุ่มเปลี่ยนเป็นมุมมองแบบต้นไม้ของการช่วยเหลือพิเศษ
เรียกดูแผนผังการช่วยเหลือพิเศษ คุณขยายโหนดหรือคลิกเพื่อดูรายละเอียดในส่วนพร็อพเพอร์ตี้ที่คำนวณได้
เลือกโหนดแล้วคลิกปุ่มเปลี่ยนเป็นมุมมองแบบต้นไม้ของ DOM
เพื่อสลับกลับไปยังแผนผัง DOMมีการเลือกโหนด DOM ที่เกี่ยวข้องแล้ว วิธีนี้เป็นวิธีที่ดีในการทำความเข้าใจการแมประหว่างโหนด DOM และโหนดโครงสร้างการช่วยเหลือพิเศษ
ดูแอตทริบิวต์ ARIA ขององค์ประกอบ
แอตทริบิวต์ ARIA ช่วยให้โปรแกรมอ่านหน้าจอมีข้อมูลทั้งหมดที่จำเป็นเพื่อแสดงเนื้อหาของหน้าอย่างถูกต้อง
ดูแอตทริบิวต์ ARIA ขององค์ประกอบในแผงการช่วยเหลือพิเศษ
ดูลำดับแหล่งที่มาขององค์ประกอบบนหน้าจอ
องค์ประกอบในหน้าเว็บอาจไม่ได้แสดงตามลำดับที่อยู่ในแหล่งที่มาเสมอไป ซึ่งอาจทำให้ผู้ใช้สับสนที่ต้องพึ่งพาเทคโนโลยีความช่วยเหลือพิเศษในการท่องเว็บ
วิธีดูและแก้ไขข้อบกพร่องของลำดับแหล่งที่มาในเว็บไซต์
- ตรวจสอบองค์ประกอบในหน้าเว็บ
- ในองค์ประกอบ > การช่วยเหลือพิเศษ > โปรแกรมดูลำดับแหล่งที่มา ให้เลือก
แสดงลำดับของแหล่งที่มา
ในวิวพอร์ต เครื่องมือสำหรับนักพัฒนาเว็บจะร่างองค์ประกอบที่ฝังด้วยเส้นขอบ และทำเครื่องหมายด้วยตัวเลขที่สอดคล้องกับลำดับแหล่งที่มา
ดูคุณสมบัติการช่วยเหลือพิเศษที่คำนวณแล้วขององค์ประกอบ
คุณสมบัติการช่วยเหลือพิเศษบางอย่างได้รับการคำนวณแบบไดนามิกโดยเบราว์เซอร์ ดูคุณสมบัติเหล่านี้ได้ในส่วนคุณสมบัติที่คำนวณของแผงการช่วยเหลือพิเศษ
ดูคุณสมบัติการช่วยเหลือพิเศษที่คำนวณแล้วขององค์ประกอบในแผงการช่วยเหลือพิเศษ
ค้นพบและแก้ไขข้อความคอนทราสต์ต่ำ
เครื่องมือสำหรับนักพัฒนาเว็บสามารถค้นหาปัญหาคอนทราสต์ต่ำโดยอัตโนมัติและแนะนำสีที่ดีขึ้นเพื่อช่วยในการแก้ไข โปรดดูข้อมูลเพิ่มเติมที่ทำให้เว็บไซต์อ่านง่ายขึ้น