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

Johan Bay
Johan Bay

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

แผนผังการช่วยเหลือพิเศษคืออะไร

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

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

แผงการช่วยเหลือพิเศษใน Chrome 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 ต่อไปนี้ที่มีชื่อ ส่วนหัว และปุ่ม 2 ปุ่มใช้เพื่อแสดงแผนภูมิ

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

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

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

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

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

การสร้างต้นไม้แบบ Lazy

ระบบจะสร้างทรีแบบ Lazy Load ในฝั่งหน้าเว็บขณะที่ผู้ใช้สํารวจ เพื่อให้ทรีมีประสิทธิภาพแม้สําหรับเว็บไซต์ขนาดใหญ่ เมื่อขยายโหนดในแผนภูมิ ระบบจะดึงข้อมูลโหนดย่อยของโหนดผ่านโปรโตคอล Chrome DevTools (CDP) และสร้างแผนภูมิขึ้นมาใหม่

แผนผังการช่วยเหลือพิเศษแบบใหม่แสดงผลลัพธ์ของหน้าเว็บขนาดใหญ่

ไลฟ์สด

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

เรื่องราวของต้นไม้มากมาย

ในคำอธิบายความหมายของต้นไม้การช่วยเหลือพิเศษ คุณได้ทราบวิธีที่ Blink สร้างต้นไม้การช่วยเหลือพิเศษสําหรับ DOM ที่แสดงผล และ DevTools ดึงข้อมูลต้นไม้นี้ผ่าน CDP แม้ว่าจะเป็นเช่นนั้น แต่เราไม่ได้อธิบายรายละเอียดทั้งหมดไว้ในคำอธิบายนี้ แต่อันที่จริงแล้ว วิธีต่างๆ ในการใช้งานโครงสร้างการช่วยเหลือพิเศษใน Chromium นั้นมีอยู่มากมาย เมื่อออกแบบมุมมองแผนภูมิต้นไม้ใหม่สำหรับ DevTools เราได้เลือกบางส่วนของข้อมูลภายในด้านการช่วยเหลือพิเศษของ 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 ทั้งหมด และช่วยระบุสาเหตุที่ระบบละเว้นโหนดได้

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

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

การกรองอื่นๆ

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

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

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

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

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