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