ARIA DevTools - การแสดงภาพต้นไม้การเข้าถึงของเว็บไซต์

 (chromewebstore.google.com)
4 คะแนน โดย GN⁺ 2024-10-09 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ARIA DevTools เป็นส่วนขยาย Chrome ที่ช่วยให้ตรวจสอบ โครงสร้างที่โปรแกรมอ่านหน้าจอใช้ตีความ ของเว็บแอปพลิเคชัน ทำให้ค้นหาปัญหาการเข้าถึงได้ง่ายขึ้นในขั้นตอนพัฒนา
  • แสดงองค์ประกอบของหน้าโดยอิงตาม บทบาท ARIA แบบชัดเจนและแบบโดยนัย พร้อมให้ตรวจสอบหัวเรื่อง รูปภาพ ตาราง รายการฟอร์ม และองค์ประกอบอื่น ๆ ได้
  • มุ่งเน้นการตรวจสอบปัญหาที่อาจกระทบต่อประสบการณ์การใช้งานเทคโนโลยีช่วยเหลือจริง เช่น ARIA label ที่ขาดหายไป การกำหนดบทบาทผิด และการรองรับคีย์บอร์ดที่ไม่สมบูรณ์
  • ตามข้อมูลใน Chrome Web Store มี ผู้ใช้ 10,000 คน คะแนน 4.9/5 จาก 33 รีวิว และถูกจัดอยู่ในหมวด Developer Tools
  • นักพัฒนาระบุว่าไม่ได้เก็บรวบรวมหรือใช้งานข้อมูลผู้ใช้ และสามารถตรวจสอบสถานะโครงการได้ผ่าน GitHub repository และหน้า issues

ตรวจสอบต้นไม้การเข้าถึงจากมุมมองของโปรแกรมอ่านหน้าจอ

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

ปัญหาการเข้าถึงที่สามารถตรวจสอบได้

  • ช่วยให้ตรวจสอบ ARIA label ที่ขาดหายไปได้ง่ายขึ้น
  • ช่วยค้นหา บทบาท ARIA ที่ใช้งานไม่ถูกต้อง
  • ตรวจสอบ การรองรับคีย์บอร์ด ที่ไม่สมบูรณ์ได้ด้วย
  • มีเป้าหมายเพื่อช่วยลดภาระในกระบวนการพัฒนาและทดสอบเว็บไซต์ที่เข้าถึงได้

ข้อมูลบน Chrome Web Store

  • เป็นส่วนขยายที่ลงทะเบียนอยู่บน Chrome Web Store และอยู่ในหมวด Developer Tools
  • จำนวนผู้ใช้ตามข้อมูลที่ลงทะเบียนคือ 10,000 คน
  • คะแนนคือ 4.9/5 และมี 33 รีวิว
  • เวอร์ชันคือ 1.4.3 และมีขนาด 156KiB
  • โครงการนี้เป็นโอเพนซอร์สที่เผยแพร่บน GitHub

การจัดการข้อมูลส่วนบุคคล

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

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-10-09
ความคิดเห็นบน Hacker News

  • ดูยอดเยี่ยมมากครับ/ค่ะ จะทำให้มัน ทำงานภายใน iframe ได้ไหม? ถ้าใช้กับ Storybook/Playroom ได้คงดีมาก
    ลิงก์ Firefox: https://addons.mozilla.org/en-US/firefox/addon/aria-devtools...

    • ดีใจที่ชอบครับ/ค่ะ เหตุผลหลักที่ยังไม่ได้ใส่การรองรับ iframe คือ ขอบเขตสิทธิ์จะกว้างขึ้นมาก
      แทนที่จะคลิกไอคอน "ARIA DevTools" แล้วอนุญาตให้เข้าถึงเฉพาะแท็บปัจจุบันเหมือนตอนนี้ จะต้องให้สิทธิ์เข้าถึงข้อมูลทั้งหมดบนทุกเว็บไซต์ที่คุณเข้าไป อย่างไรก็ดี ผม/ฉันจะลองตรวจสอบอีกครั้งว่าสถานการณ์เปลี่ยนไปจากครั้งล่าสุดที่ดูไว้หรือไม่
    • สงสัยว่าจะ เปิด iframe ในแท็บใหม่ แล้วใช้ส่วนขยายบนนั้นได้ไหม

  • เป็นเครื่องมือที่มีประโยชน์มากทั้งสำหรับการตรวจอย่างรวดเร็วและการให้ความรู้ การแสดงภาพนี้น่าจะช่วยให้ผู้มีส่วนได้ส่วนเสียที่ไม่ใช่สายเทคนิคเห็นว่าควรคิดเรื่อง การเข้าถึงได้ โดยเฉพาะโปรแกรมอ่านหน้าจอ อย่างไร
    ความยากของ WCAG ครึ่งหนึ่งอยู่ที่การทำให้ผู้มีส่วนได้ส่วนเสียไปไกลกว่าการแค่ติ๊กช่องว่าปฏิบัติตามแล้ว

    • "มันก็เป็นข้อความอยู่แล้วไม่ใช่เหรอ โปรแกรมอ่านหน้าจอก็แค่อ่านไปก็พอไหม?"
    • ก็มีเหตุผลอยู่บ้างนะ ถ้าผู้ใช้ 98% ใช้เว็บที่ไม่มี accessibility ได้โดยไม่มีปัญหา โดยเฉพาะเมื่อคิดว่าคนที่ใช้คอมพิวเตอร์เยอะ ๆ โดยทั่วไปค่อนข้างอายุน้อย แล้วทำไมต้องทำมากกว่าการติ๊กช่องด้วยล่ะ? ดูเหมือนเป็นทางเลือกที่ค่าคาดหวังติดลบ

  • เจ๋งมากครับ/ค่ะ ช่วงนี้ผม/ฉันเพิ่งทำ การแสดงภาพ accessibility tree ในแบบของตัวเอง [1] เครื่องมือนี้น่าสนใจตรงที่ออกจากตัว tree เอง แล้วเน้นการแสดงภาพการจัดกลุ่มของหน่วยย่อยแต่ละส่วนมากกว่า
    ผม/ฉันคิดไปในทางแสดงโครงสร้างทั้งหมด และใช้สิ่งนั้นช่วยให้โฟกัสกับลำดับเชิงตรรกะของหน้า ในทางกลับกัน แนวทางที่มอง tree เป็นชุดของบล็อกย่อย ๆ และมองว่าความสอดคล้องภายในแต่ละบล็อกสำคัญกว่า ก็น่าสนใจทีเดียว ถ้าอยากลองเปรียบเทียบกัน ผม/ฉันยินดีคุยด้วยครับ/ค่ะ
    [1] https://polypane.app/blog/polypane-20-1-the-accessibility-tr...

  • ดูเรียบร้อยดี และเป็นระเบียบกว่า https://wave.webaim.org/ มาก

    • ขอบคุณครับ/ค่ะ ผม/ฉันคิดว่า ARIA DevTools มีศักยภาพมาก ตามมาตรฐานของผม/ฉันถือว่าค่อนข้างเป็นที่นิยม แต่ยังไม่ได้เชื่อมโยงกับคนที่ทำงานเชิงลึกด้าน web accessibility
      เครื่องมือแบบนี้รายละเอียดสำคัญ ดังนั้นถ้าพูดอย่างเป็นธรรม WAVE น่าจะมีโอกาสแม่นยำกว่า

  • ค่อนข้างเรียบร้อยและชอบครับ/ค่ะ ผม/ฉันทดลองกับหน้าเมตาดาต้ารายการทีวีที่กำลังพัฒนาอยู่
    องค์ประกอบหนึ่งเป็นกลุ่ม div ที่มี span ซึ่งอธิบายเนื้อหาด้วย aria-label แต่ VoiceOver บน MacOS อ่านได้ถูกต้อง และ accessibility tree ของ Chrome ก็จับได้ ทว่าเครื่องมือนี้ไม่แสดง aria-label และแสดงค่าต่าง ๆ เรียงเป็นสตริงยาว ๆ แทน อีกอย่างมันจับ ::before { content: ", " / ""; } เป็น , value ซึ่งโดยรวมแล้วการรองรับส่วนนี้ยังไม่ค่อยดีนัก

    • ขอรับลิงก์หน้านั้นได้ไหมครับ/ค่ะ? อยากลองทดสอบเองแล้วแก้ไข

  • ดีครับ/ค่ะ ผม/ฉันสนใจ การรองรับการเข้าถึงได้ มาก
    ตอนนี้เว็บไซต์ไม่ใช่งานหลักของผม/ฉันแล้ว แต่เมื่อก่อนผม/ฉันมักใส่ใจเสมอให้เว็บที่รับผิดชอบถูกทำให้เข้าถึงได้ดีมาก

  • สำหรับเครื่องมือแบบนี้ ผม/ฉันอยากให้ แยกตรรกะ ARIA ออกจาก UI การประมวลผลที่ซับซ้อนเกี่ยวกับ ARIA ควรถูกใส่ไว้ในไลบรารี แล้วให้มี UI หลายแบบวางอยู่บน codebase ร่วมที่ทดสอบมาดีแล้ว
    ขอโปรโมตเล็กน้อย: https://github.com/xi/aria-api

  • เมื่อเทียบกับเครื่องมือในตัวของ Chrome (https://developer.chrome.com/docs/devtools/accessibility/ref...) เป็นอย่างไรบ้าง?

    • ตอนออกแบบเครื่องมือนี้ ผม/ฉันพยายามสะท้อน ประสบการณ์ผู้ใช้โปรแกรมอ่านหน้าจอ มากกว่าแค่แสดงบทบาทและแอตทริบิวต์ ARIA
      ตัวอย่างเช่น ต้องนำทางหน้าเว็บด้วยคีย์บอร์ดเท่านั้น ถ้า dropdown ไม่สามารถเข้าถึงได้ ผู้ใช้จะเห็นได้ทันที ตารางก็จะแสดงเพียงหนึ่งเซลล์พร้อม header ของมันในแต่ละครั้ง ผม/ฉันคิดว่ามันใกล้เคียงกับประสบการณ์จริงของผู้ใช้โปรแกรมอ่านหน้าจอมาก

  • เป็นไอเดียและการทำงานที่ดีครับ/ค่ะ จะลองใช้ใน side project แน่นอน พอดีเพิ่งดูงานนำเสนอของ Mandy Michael เรื่อง ประสิทธิภาพและการเข้าถึงได้ของ HTML [1] แล้วกำลังสงสัยอยู่พอดีว่าจะมีเครื่องมือที่ดีกว่า viewer ของ accessibility tree ที่ติดมากับเบราว์เซอร์ไหม

    1. https://youtu.be/cghb0VpCJqM?si=5pWNrkPOyUsohyGJ

  • เครื่องมือเจ๋งมากครับ/ค่ะ ช่วงนี้ผม/ฉันกำลังลงลึกเรื่องการเข้าถึงได้มากขึ้น และโดยเฉพาะพยายามปรับปรุง ประสบการณ์ผู้ใช้โปรแกรมอ่านหน้าจอ
    มีใครที่มีประสบการณ์มากกว่าได้ลองทดสอบเครื่องมือนี้กับสถานการณ์ซับซ้อน เช่น ฟอร์มขนาดใหญ่หรือตารางแบบไดนามิก บ้างไหม? อยากรู้ว่าในกรณีแบบนั้นมันเทียบกับเครื่องมือ accessibility อื่น ๆ เป็นอย่างไร ถ้ามีเคล็ดลับหรือข้อคิดเห็นเชิงลึกก็ขอบคุณมากครับ/ค่ะ