เห็นภาพ & แก้ไขข้อบกพร่องของการเข้าถึงเว็บไซต์ด้วย Tota11y

เทคโนโลยีอำนวยความสะดวกเป็นบรรทัดฐานใหม่สำหรับการออกแบบเว็บ เมื่อการออกแบบตอบสนองเป็นสิ่งสำคัญผู้ออกแบบก็เห็นได้อย่างรวดเร็วว่าการสนับสนุนผู้ใช้มากขึ้นเป็นสิ่งจำเป็น.

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

Tota11y เป็น ชุดเครื่องมือฟรีสำหรับแสดงภาพปัญหาการเข้าถึงเว็บไซต์ของคุณ. สิ่งนี้ทำงานได้ในเบราว์เซอร์เพื่อให้คุณสามารถโหลดชุดเครื่องมือคลิกไปทั่วไซต์ของคุณ (หรือเว็บไซต์ใด ๆ !) เพื่อค้นหาคำแนะนำการเข้าถึง.

สิ่งนี้ทำงานเป็นไลบรารี JavaScript ที่สามารถเสียบเข้ากับหน้าใดก็ได้ คุณสามารถ เรียกใช้ด้วยตนเองบนไซต์สด ผ่าน Chrome DevTools แต่ก็ไม่ได้มีประโยชน์เสมอไปเว้นแต่คุณกำลังทำงานบนไซต์ของคนอื่น.

Tota11y เพิ่มแถบเครื่องมือขนาดเล็กลงบนหน้าของคุณและทำงานแบบไดนามิกทั่วทั้ง DOM เมื่อไหร่ก็ตามที่คุณ คลิกองค์ประกอบที่คุณจะได้รับกล่องขยายขนาดเล็ก พร้อมรายละเอียดเกี่ยวกับปัญหาการเข้าถึง.

สิ่งหนึ่งที่ฉันชอบเกี่ยวกับ Tota11y คือ ภาษาที่ชัดเจน ใช้กับแต่ละกล่องไฮไลต์ เอกสาร WAI-ARIA ส่วนใหญ่รู้สึกเหมือนอ่านรหัสภาษี เหมาะสำหรับการนอนหลับไม่เหมาะสำหรับการดีบักเว็บไซต์.

ด้วยห้องสมุดนี้คุณจะพบ ปัญหาและแนวทางแก้ไขที่เขียนเป็นภาษาอังกฤษล้วน. ง่ายกว่ามากที่จะบริโภคและการแก้ปัญหาได้อย่างรวดเร็ว.

หากคุณไปที่หน้าหลักคุณจะพบตัวอย่างของ Tota11y ที่ทำงานบนเว็บไซต์ เป็นแท็บสีดำขนาดเล็กที่มุมซ้ายล่างของหน้าจอ เพียงคลิกที่มุมมองแบบขยายที่ครอบคลุมองค์ประกอบหน้าหลักทั้งหมด.

สิ่งทั้งหมดนั้นเป็น openourced ภายใต้ลิขสิทธิ์ของ MIT ดังนั้นจึงเป็นเรื่องง่ายที่จะทำงานกับ.

คุณสามารถคว้าสำเนาบน GitHub และใช้มันเพื่ออะไรสวยมาก Tota11y ยังมาพร้อมกับปลั๊กอินมากมายที่คุณสามารถขยายเข้าสู่สคริปต์หลักได้ เหล่านี้ เพิ่มฟังก์ชันการทำงานสำหรับการตรวจสอบข้อกังวลการเข้าถึงรายละเอียดเพิ่มเติม.

หากคุณใหญ่ในการทดสอบการเข้าถึงแล้วคุณจะต้องการสำเนาของสคริปต์นี้ในกล่องเครื่องมือของคุณ.