สร้างส่วนขยายเบราว์เซอร์ที่ครอบคลุม:การออกแบบการเข้าถึงแบบทีละขั้นตอน

<!--Before: Unclear Button Purpose and icon alt text-->
<button class="dice-button" id="generate-advice-btn">
 <img src="/icons/icon-dice.png" alt="Dice icon">
</button>
<!--After: Clear, Accessible Button and icon alt text-->
<button class="dice-button" id="generate-advice-btn" aria-label="Generate new advice">
 <img src="/icons/icon-dice.png" alt="A dice icon with green background" role="presentation">
</button>

วิธีจัดการกับการอัปเดตไดนามิกแบบเงียบ

เราจะเพิ่ม 71 เพื่อให้โปรแกรมอ่านหน้าจอประกาศคำแนะนำใหม่และ 86 เพื่อให้แน่ใจว่าได้อ่านใบเสนอราคาทั้งหมดแล้ว นั่นคือ:

<!--Before: Silent Dynamic Updates-->
<p class="advice-quote" id="advice-quote">
 "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>
<!--After: Announced Content Changes-->
<p class="advice-quote" id="advice-quote" aria-live="polite" aria-atomic="true">
 "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>

วิธีจัดการกับสถานะที่ไม่มีการโหลด

เราจะเพิ่ม 90 ฟังก์ชั่นเพื่อแสดงตัวบ่งชี้การโหลด เพื่อให้มั่นใจว่าผู้ใช้โปรแกรมอ่านหน้าจอจะได้รับการแจ้งเตือนเมื่อมีการดึงเนื้อหา:

// Before: No Loading Feedback
function requestNewAdvice() {
 chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
 // No loading indicators...
 });
}
// After: Accessible Loading States
function requestNewAdvice() {
 setLoadingState(true); 
 chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
 setLoadingState(false);
 // Handle response with proper announcements...
 });
}
function setLoadingState(isLoading) {
 if (isLoading) {
 // Disable button and show loading text
 generateAdviceBtn.disabled = true;
 generateAdviceBtn.setAttribute('aria-label', 'Loading new advice...');
 // Show loading text in the advice quote element
 adviceQuoteElement.textContent = "Loading new advice...";
 } else {
 // Re-enable button
 generateAdviceBtn.disabled = false;
 generateAdviceBtn.setAttribute('aria-label', 'Generate new advice');
 }
}

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

วิธีทดสอบการเข้าถึงส่วนขยายเบราว์เซอร์อัตโนมัติ

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

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

วิธีใช้เครื่องมือตรวจสอบการเข้าถึงส่วนขยาย:

1. บีบอัดโฟลเดอร์ส่วนขยายเบราว์เซอร์ของคุณให้เป็นไฟล์ .zip

2. อัปโหลดไฟล์ .zip บน https://extensiona11ychecker.vercel.app/

3. ตรวจสอบรายงานที่สร้างขึ้นสำหรับการละเมิดการเข้าถึงที่เฉพาะเจาะจง และใช้การแก้ไขที่แนะนำ

ดังที่แสดงใน GIF ด้านบน ขั้นตอนการทำงานนี้ช่วยสร้างการเข้าถึงให้เป็นส่วนหนึ่งของกระบวนการพัฒนาของคุณเป็นประจำ แทนที่จะเป็นสิ่งที่ต้องคำนึงถึงในภายหลัง

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับส่วนขยายเบราว์เซอร์ที่สามารถเข้าถึงได้

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

จากการปรับปรุงของเรา ต่อไปนี้เป็นหลักการสำคัญสี่ประการในการออกแบบส่วนขยายเบราว์เซอร์ที่สามารถเข้าถึงได้:

1. ความหมาย HTML และป้ายกำกับที่ชัดเจน

เริ่มต้นด้วยโครงสร้าง HTML ที่เหมาะสมเสมอ โดยใช้องค์ประกอบที่เหมาะสม (เช่น สำหรับการดำเนินการ "สร้างคำแนะนำ" ลำดับชั้นของส่วนหัวที่เหมาะสม) ก่อนที่จะเพิ่มแอตทริบิวต์ ARIA

ตรวจสอบให้แน่ใจว่าองค์ประกอบเชิงโต้ตอบทุกรายการมีวัตถุประสงค์ที่ชัดเจนผ่าน 103 , 115 หรือข้อความที่มองเห็นได้ซึ่งอธิบายการกระทำ