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