หน้านี้ได้รับการแปลโดย Cloud Translation API

แผนผังการช่วยเหลือพิเศษเต็มรูปแบบใน Chrome DevTools

โจฮันเบย์

GitHub

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

โครงสร้างการช่วยเหลือพิเศษคืออะไร

เทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอจะใช้ Accessibility API ของ Chromium เพื่อโต้ตอบกับเนื้อหาเว็บ โมเดลที่สำคัญของ API นี้คือโครงสร้างการช่วยเหลือพิเศษ ซึ่งเป็นต้นไม้ของออบเจ็กต์การช่วยเหลือพิเศษที่เทคโนโลยีความช่วยเหลือพิเศษสามารถค้นหาแอตทริบิวต์และพร็อพเพอร์ตี้ รวมถึงดำเนินการต่างๆ ได้ นักพัฒนาเว็บจะกําหนดและปรับโครงสร้างการช่วยเหลือพิเศษผ่านพร็อพเพอร์ตี้ DOM เป็นหลัก เช่น แอตทริบิวต์ ARIA สำหรับ HTML

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

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

โครงสร้างดังกล่าวสร้างขึ้นอย่างไร

ก่อนจะไปดูลักษณะของมุมมองต้นไม้แบบใหม่ใน DevTools ให้เราอธิบายคร่าวๆ ว่าโครงสร้างการช่วยเหลือพิเศษคืออะไรในอีกรูปแบบหนึ่งที่จับต้องได้ แผนผังการช่วยเหลือพิเศษเป็นอนุพันธ์ของแผนผัง DOM มีโครงสร้างคล้ายๆ กัน แต่นำโหนดที่ไม่มีเนื้อหาเชิงความหมายออก เช่น เอลิเมนต์ <div> ที่ใช้สำหรับการจัดรูปแบบเพียงอย่างเดียว แต่ละโหนดในโครงสร้างมีบทบาท เช่น Button หรือ Heading และมักจะเป็นชื่อ ซึ่งอาจมาจากแอตทริบิวต์ ARIA หรือมาจากเนื้อหาของโหนดก็ได้ หากเราดูเอกสาร HTML:

<html>
<head>
  <title>How old are you?</title>
</head>
<body>
  <label for="age">Age</label>
  <input id="age" type="number" name="age" value="42">
  <div>
    <button>Back</button>
    <button>Next</button>
  </div>
</body>
</html>

โหมดแสดงภาพใน Chromium ที่มีชื่อว่า Blink ได้มาจากแผนผังการช่วยเหลือพิเศษภายในคร่าวๆ ดังนี้

role='rootWebArea' focusable name='How old are you?'
  role='genericContainer' ignored
    role='genericContainer' ignored
      role='labelText'
        role='staticText' name='Age'
      role='spinButton' editable focusable name='Age' value='42'
        role='genericContainer' editable
          role='staticText' editable name='42'
      role='genericContainer'
        role='button' focusable name='Back'
          role='staticText' name='Back'
        role='button' focusable name='Next'
          role='staticText' name='Next'

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

แผนผังการช่วยเหลือพิเศษแบบเต็มในเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
  <button>Back</button>
  <button>Next</button>
</div>

มุมมองต้นไม้ก่อนหน้านี้จะช่วยให้คุณสามารถสำรวจโหนดเดียวและโหนดระดับบนเท่านั้น

มุมมองแบบต้นไม้ก่อนหน้าในเครื่องมือสำหรับนักพัฒนาเว็บ

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

มุมมองแบบต้นไม้ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

สร้างต้นไม้แบบขี้เกียจ

ต้นไม้จะสร้างขึ้นอย่างช้าๆ ในส่วนฟรอนท์เอนด์ขณะที่สำรวจ เพื่อสร้างโครงสร้างดังกล่าวแม้แต่ในเว็บไซต์ขนาดใหญ่ เมื่อมีการขยายโหนดในโครงสร้างแล้ว ระบบจะดึงข้อมูลย่อยของโหนดสำหรับโหนดผ่าน Chrome DevTools Protocol (CDP) และระบบจะสร้างโครงสร้างขึ้นมาใหม่

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

เผยแพร่อยู่

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

เรื่องเล่าเกี่ยวกับต้นไม้หลายต้น

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

แพลตฟอร์ม

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

การแยกเว็บไซต์และเฟรมหลายรายการ

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

โหนดที่ไม่สนใจและไม่น่าสนใจ

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

มุมมองแบบต้นไม้ใหม่ที่แสดงโหนดทั้งหมด

ข้อควรระวังก็คือสิ่งนี้หมายความว่าเราจำเป็นต้องสร้างต้นไม้อื่นเพิ่มจากที่มีอยู่บนระบบแบ็กเอนด์ ตัวอย่างเช่น สมมติว่าเรามีโหนด A, B, C และ X โดยที่ A มีลูก X และ B และ X มีลูก C ถ้า X เป็นโหนดที่ละเว้น เราจะตัด X ออกจากโครงสร้างและสร้างต้นไม้ที่ C เป็นโหนดย่อยไปยัง A

แผนภาพแสดงวิธีที่เราตัดแต่งต้นไม้

ที่ฟรอนท์เอนด์ เราสร้างโครงสร้างต้นไม้ทั้งหมดซึ่งรวมถึงโหนดที่ละเว้น และตัดโหนดเหล่านั้นก่อนแสดงผลโหนดเท่านั้น เราดำเนินการเช่นนี้ด้วยเหตุผล 2 ประการ ดังนี้

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

ไอเดียในอนาคต

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

การกรองทางเลือก

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

ไฮไลต์ปัญหาเกี่ยวกับการช่วยเหลือพิเศษ

เราสามารถรวมการวิเคราะห์ "แนวทางปฏิบัติแนะนำเกี่ยวกับการช่วยเหลือพิเศษ" เข้ากับโครงสร้างและไฮไลต์ปัญหาการช่วยเหลือพิเศษในโหนดที่เป็นปัญหาโดยตรง

แสดงการดำเนินการช่วยเหลือพิเศษในเครื่องมือสำหรับนักพัฒนาเว็บ

โครงสร้างที่เราแสดงอยู่ในปัจจุบันเป็นแบบทางเดียวเท่านั้น โดยช่วยให้เราเห็นภาพข้อมูลที่จะป้อนเข้าสู่เทคโนโลยีความช่วยเหลือพิเศษเมื่อเรียกดูหน้าเว็บหนึ่งๆ การดําเนินการช่วยเหลือพิเศษแสดงถึงการสื่อสารในทิศทางอื่น โดยช่วยให้เทคโนโลยีความช่วยเหลือพิเศษทํางานกับ UI ที่นำเสนอได้ เราสามารถแสดงการดำเนินการดังกล่าวในเครื่องมือสำหรับนักพัฒนาเว็บเพื่ออนุญาตให้มีการดำเนินการต่างๆ เช่น "การคลิก" การเลื่อน หรือการเปลี่ยนค่าในหน้าเว็บโดยใช้ API ที่พร้อมใช้งานกับเทคโนโลยีความช่วยเหลือพิเศษ