เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome กำลังเปิดตัวแผนผังการช่วยเหลือพิเศษอย่างเต็มรูปแบบเพื่อให้นักพัฒนาซอฟต์แวร์ดูภาพรวมของแผนผังทั้งแผนผังได้ง่ายขึ้น ในโพสต์นี้ มาดูวิธีสร้างแผนผังนี้และวิธีนำไปใช้ในงานของคุณด้วย
แผนผังการช่วยเหลือพิเศษคืออะไร
เทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอ ใช้ API การช่วยเหลือพิเศษของ Chromium เพื่อโต้ตอบกับเนื้อหาเว็บ โมเดลสำคัญของ API นี้คือแผนผังการช่วยเหลือพิเศษ ซึ่งเป็นแผนผังของออบเจ็กต์การช่วยเหลือพิเศษที่เทคโนโลยีความช่วยเหลือพิเศษสามารถค้นหาแอตทริบิวต์และพร็อพเพอร์ตี้และดำเนินการต่างๆ ได้ นักพัฒนาเว็บกำหนดและควบคุมแผนผังการช่วยเหลือพิเศษผ่านพร็อพเพอร์ตี้ DOM เป็นหลัก เช่น แอตทริบิวต์ ARIA สำหรับ HTML
ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เรามีแผงการช่วยเหลือพิเศษเพื่อช่วยให้นักพัฒนาแอปเข้าใจว่าเทคโนโลยีความช่วยเหลือพิเศษแสดงเนื้อหาของตนอย่างไร อาจเป็นรูปธรรม เมื่อเลือกโหนดในโปรแกรมดูแผนผัง DOM คุณสมบัติของโหนดการช่วยเหลือพิเศษที่เกี่ยวข้องจะปรากฏในแผงร่วมกับมุมมองระดับบนของโหนดและโหนดย่อยของโหนด
โครงสร้างดังกล่าวสร้างขึ้นอย่างไร
ก่อนที่เราจะพูดถึงลักษณะของมุมมองต้นไม้แบบเต็มใหม่นี้ในเครื่องมือสำหรับนักพัฒนาเว็บ มาดูสรุปคร่าวๆ ว่าแผนผังการช่วยเหลือพิเศษนี้มีลักษณะที่จับต้องได้มากขึ้นอย่างไร แผนผังการช่วยเหลือพิเศษเป็นอนุพันธ์ของแผนผัง 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 อย่างไรก็ตาม โหนดส่วนใหญ่เหล่านี้จะเกิดขึ้นในแผนผังภายในเท่านั้นและไม่สามารถเข้าถึงเทคโนโลยีความช่วยเหลือพิเศษได้ เนื่องจาก DevTools รวบรวมข้อมูลการช่วยเหลือพิเศษโดยตรงจากกระบวนการแสดงผล ลักษณะนี้เป็นการแสดงโครงสร้างต้นไม้ที่ DevTools จัดการ
แผนผังการช่วยเหลือพิเศษเต็มรูปแบบในเครื่องมือสำหรับนักพัฒนาเว็บ
แผนผังการเข้าถึงที่สมบูรณ์ใหม่นี้ซิงค์กับแผนผัง DOM เพื่อให้นักพัฒนาซอฟต์แวร์สลับไปมาระหว่างโครงสร้างทั้งสองได้ เราหวังว่าโครงสร้างใหม่นี้จะสำรวจได้มากขึ้น เป็นประโยชน์ และใช้งานง่ายขึ้น
เมื่อทราบแล้วว่าแผนผังการช่วยเหลือพิเศษทำงานอย่างไร ต่อไปก็ใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูว่ามุมมองต้นไม้ใหม่มีลักษณะอย่างไร เอกสาร HTML ต่อไปนี้ที่มีชื่อ ส่วนหัว และปุ่ม 2 ปุ่มใช้สำหรับแสดงโครงสร้าง
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
มุมมองต้นไม้ก่อนหน้านี้จะเปิดให้คุณสำรวจโหนดเดียวและโหนดระดับบนเท่านั้น
ตอนนี้ เมื่อคุณสลับแผนผังใหม่ แผนผังนี้จะแทนที่มุมมองแบบต้นไม้ของ DOM และช่วยให้คุณเห็นแผนผังการเข้าถึงทั้งหมดสำหรับหน้าเว็บ
สร้างต้นไม้แบบ Lazy Loading
เพื่อให้ต้นไม้มีประสิทธิภาพการทำงานได้แม้ในเว็บไซต์ขนาดใหญ่ โครงสร้างต้นไม้จะสร้างขึ้นแบบ Lazy Loading บนฟรอนท์เอนด์ขณะที่สำรวจ เมื่อมีการขยายโหนดในโครงสร้าง ระบบจะดึงข้อมูลย่อยของโหนดผ่าน 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 ฝั่ง ตัวอย่างเช่น ถ้าโหนด B ถูกนำออกในตัวอย่าง เราจะได้รับการอัปเดตสำหรับโหนด X (เนื่องจากโหนด X ของโหนดมีการเปลี่ยนแปลง) แต่ถ้าเราตัดโหนดนั้นออกไป เราคงประสบปัญหาในการพิจารณาว่าจะอัปเดตอะไร
- จะตรวจสอบว่าโหนด DOM ทั้งหมดมีโหนดการช่วยเหลือพิเศษที่สอดคล้องกัน เมื่อมีการสลับแผนผัง เราจะเลือกโหนดที่สอดคล้องกับโหนดที่เลือกอยู่ในปัจจุบันในแผนผัง DOM ในตัวอย่างก่อนหน้านี้ หากผู้ใช้สลับแผนผังในขณะที่โหนด DOM ที่สอดคล้องกับ X ถูกเลือก เราจะแทรก X ระหว่างโหนด A และ B และเลือก X ในโครงสร้าง สิทธิ์นี้ช่วยให้ผู้ใช้ตรวจสอบโหนดการช่วยเหลือพิเศษสำหรับโหนด DOM ทั้งหมดและช่วยระบุสาเหตุที่ละเว้นโหนดได้
แนวคิดในอนาคต
การเปิดตัวแผนผังการช่วยเหลือพิเศษใหม่เป็นเพียงจุดเริ่มต้นเท่านั้น เรามีไอเดีย 2-3 อย่างสำหรับโครงการในอนาคตที่เราสามารถต่อยอดจากมุมมองใหม่ แต่ก็อยากรับฟังความคิดเห็นจากคุณด้วย
การกรองอื่นๆ
ตามที่อธิบายไว้ข้างต้น ขณะนี้เราได้กรองโหนดที่พิจารณาแล้วว่าไม่น่าสนใจออก เราอาจหาวิธีปิดใช้ลักษณะการทำงานนี้และแสดงโหนดทั้งหมด หรืออาจใช้การกรองแบบอื่น เช่น แสดงโหนดจุดสังเกตหรือแสดงส่วนหัว
ไฮไลต์ปัญหา A11y
เราอาจใช้การวิเคราะห์ "แนวทางปฏิบัติแนะนำสำหรับการช่วยเหลือพิเศษ" กับโครงสร้างดังกล่าว และไฮไลต์ปัญหาการช่วยเหลือพิเศษในโหนดที่เป็นปัญหาโดยตรง
แสดงการดำเนินการช่วยเหลือพิเศษในเครื่องมือสำหรับนักพัฒนาเว็บ
แผนผังที่เราแสดงในขณะนี้เป็นแบบทางเดียวเท่านั้น โดยช่วยให้เรารู้ได้ว่าข้อมูลใดบ้างที่ระบบจะป้อนลงในเทคโนโลยีความช่วยเหลือพิเศษเมื่อเรียกดูหน้าเว็บหนึ่งๆ การดำเนินการช่วยเหลือพิเศษจะแสดงถึงการสื่อสารในอีกทิศทางหนึ่ง กล่าวคือทำให้เทคโนโลยีความช่วยเหลือพิเศษทำงานกับ UI ที่นำเสนอได้ เราอาจแสดงการดำเนินการดังกล่าวในเครื่องมือสำหรับนักพัฒนาเว็บเพื่ออนุญาตให้ดำเนินการต่างๆ เช่น "การคลิก" การเลื่อน หรือเปลี่ยนค่าในหน้าเว็บโดยใช้ API ที่เทคโนโลยีความช่วยเหลือพิเศษเข้าถึงได้