ส่วนขยายช่วยให้ผู้ใช้สร้างประสบการณ์การท่องเว็บที่เหมาะกับความสามารถและความต้องการของแต่ละคน ส่วนขยายควรมีองค์ประกอบการช่วยเหลือพิเศษที่สนับสนุนฐานผู้ใช้แบบไม่แบ่งแยก โดยให้ผู้ที่มีความบกพร่องทางสายตา สูญเสียการได้ยิน มีความคล่องแคล่วที่จำกัด และผู้พิการอื่นๆ เข้าถึงส่วนขยายได้
ผู้ใช้ทุกคนสามารถรับประโยชน์จากฟีเจอร์การช่วยเหลือพิเศษได้ ไม่ใช่แค่ผู้ใช้ที่มีความต้องการพิเศษ ผู้ใช้ที่มีความบกพร่องทางสายตา มีความคล่องแคล่วต่ำ และผู้ใช้ขั้นสูงต่างก็ได้รับประโยชน์จากแป้นพิมพ์ลัด คำบรรยายวิดีโอและข้อความถอดเสียงเป็นสิ่งสำคัญสำหรับผู้ใช้ที่หูหนวก แต่ยังช่วยผู้เรียนภาษาได้ด้วย
ผู้คนอาจโต้ตอบกับส่วนขยายได้หลายวิธี ผู้ใช้บางรายมีหน้าจอมาตรฐาน แป้นพิมพ์และเมาส์ หรืออาจต้องใช้แว่นขยายหน้าจอและอาจใช้โปรแกรมอ่านหน้าจอ แม้ว่าจะคาดเดาไม่ได้ว่าเครื่องมือใดที่ผู้คนจะใช้เพื่อเข้าถึงส่วนขยาย แต่ก็มีขั้นตอนที่นักพัฒนาซอฟต์แวร์ต้องทำเพื่อให้ส่วนขยายเข้าถึงได้ง่ายที่สุด
ผสานรวมการควบคุม UI ที่เข้าถึงได้
หากผู้ใช้เข้าถึงส่วนควบคุมอินเทอร์เฟซไม่ได้ ก็จะใช้ส่วนขยายไม่ได้ วิธีที่ง่ายที่สุดในการสร้าง UI ที่เข้าถึงได้คือการใช้การควบคุม HTML มาตรฐาน
การควบคุมมาตรฐาน
หากเป็นไปได้ ให้ใช้การควบคุม UI ของ HTML แบบมาตรฐาน การควบคุม HTML มาตรฐานสามารถเข้าถึง แป้นพิมพ์ ปรับขนาดได้ทันที และโดยทั่วไปโปรแกรมอ่านหน้าจอจะเข้าใจ
WAI-ARIA ในการควบคุมที่กำหนดเอง
Web Accessibility Initiative - Accessible Rich Internet Applications หรือ WAI-ARIA เป็นข้อกำหนดเฉพาะสำหรับการทำให้โปรแกรมอ่านหน้าจอเข้าถึงการควบคุม UI ผ่านชุดแอตทริบิวต์ DOM มาตรฐาน แอตทริบิวต์เหล่านี้จะให้ข้อมูลแก่โปรแกรมอ่านหน้าจอเกี่ยวกับฟังก์ชันและสถานะปัจจุบันของตัวควบคุมในหน้าเว็บ
หากต้องการเพิ่มการรองรับ WAI-ARIA ลงในการควบคุมที่กำหนดเอง คุณจะต้องแก้ไของค์ประกอบ DOM ของส่วนขยายให้รวมแอตทริบิวต์ที่ Chrome ใช้เพื่อเพิ่มเหตุการณ์ระหว่างการโต้ตอบของผู้ใช้ โปรแกรมอ่านหน้าจอจะตอบสนองต่อเหตุการณ์เหล่านี้และอธิบายฟังก์ชันของตัวควบคุม แอตทริบิวต์ DOM ที่ระบุโดย WAI-ARIA ได้รับการจัดประเภทเป็นบทบาท สถานะ และพร็อพเพอร์ตี้
<div role="toolbar">
พร็อพเพอร์ตี้ aria-activedescendant
จะระบุหน่วยย่อยของแถบเครื่องมือที่จะได้รับโฟกัสเมื่อแถบเครื่องมือได้รับโฟกัส โค้ด tabindex="0"
ระบุว่าแถบเครื่องมือได้รับโฟกัสตามลำดับเอกสาร
ลองดูข้อกำหนดที่สมบูรณ์สำหรับแถบเครื่องมือตัวอย่างด้านล่าง
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
เมื่อเพิ่มบทบาท สถานะ และพร็อพเพอร์ตี้ WAI-ARIA ไปยัง DOM ของตัวควบคุม Google Chrome จะเพิ่มเหตุการณ์ที่เหมาะสมไปยังโปรแกรมอ่านหน้าจอ เนื่องจากการรองรับ WAI-ARIA ยังอยู่ระหว่างการพัฒนา Google Chrome อาจไม่ยกระดับเหตุการณ์สำหรับพร็อพเพอร์ตี้ WAI-ARIA ทุกรายการ และโปรแกรมอ่านหน้าจอก็อาจจดจำเหตุการณ์ทั้งหมดที่ยกขึ้นมาไม่ได้
ดูบทแนะนำสั้นๆ ในการเพิ่มการควบคุม WAI-ARIA ไปยังการควบคุมที่กำหนดเองได้ที่การนำเสนอของ Dave Raggett จาก WWW2010
โฟกัสในการควบคุมที่กำหนดเอง
โฟกัสแป้นพิมพ์เป็นสิ่งสำคัญสำหรับผู้ใช้ที่ท่องเว็บโดยไม่ใช้เมาส์ ตรวจสอบว่าการควบคุมการทำงานและการนำทาง เช่น ปุ่ม ช่องรายการ และแถบเมนูสามารถรับโฟกัสของแป้นพิมพ์ได้
โดยค่าเริ่มต้น องค์ประกอบเดียวใน HTML DOM ที่รับโฟกัสของแป้นพิมพ์ได้คือจุดยึด ปุ่ม และตัวควบคุมแบบฟอร์ม อย่างไรก็ตาม การตั้งค่าแอตทริบิวต์ HTML tabIndex
เป็น 0
จะวางองค์ประกอบ DOM ไว้ในลำดับแท็บเริ่มต้น ทำให้องค์ประกอบได้รับโฟกัสของแป้นพิมพ์ได้
element.tabIndex = 0
element.focus();
การตั้งค่า tabIndex = -1
จะนำองค์ประกอบออกจากลำดับแท็บ แต่ยังคงอนุญาตให้องค์ประกอบรับโฟกัสของแป้นพิมพ์แบบเป็นโปรแกรมได้
รองรับการเข้าถึงด้วยแป้นพิมพ์
ส่วนขยายควรใช้ได้กับแป้นพิมพ์เท่านั้น ซึ่งจะช่วยให้ผู้ใช้ที่ไม่สามารถใช้เมาส์และผู้ที่ไม่ค่อยได้ใช้เมาส์สามารถเข้าถึงได้
การนำทาง
ตรวจสอบว่าผู้ใช้สามารถไปยังส่วนต่างๆ ของส่วนขยายได้โดยไม่ต้องใช้เมาส์ ตรวจสอบว่าการใช้ป๊อปอัปสามารถไปยังส่วนต่างๆ ของแป้นพิมพ์ได้ ใช้แป้นพิมพ์ลัดของ Chrome เพื่อดูว่าส่วนขยายนำทางไปยังส่วนต่างๆ ได้หรือไม่
ดูได้ง่ายๆ ว่าส่วนใดของอินเทอร์เฟซที่โฟกัสด้วยแป้นพิมพ์ โดยปกติแล้วโครงร่างโฟกัสจะเคลื่อนไหวไปรอบๆ อินเทอร์เฟซ แต่หากใช้ CSS มากเกินไป ระบบอาจลดขอบหรือคอนทราสต์ลดลง
ทางลัด
แม้ว่ากลยุทธ์การนำทางด้วยแป้นพิมพ์ที่ใช้กันมากที่สุดจะรวมถึงการใช้แป้น Tab เพื่อหมุนโฟกัสผ่านอินเทอร์เฟซของส่วนขยาย แต่นั่นก็ไม่ใช่ตัวเลือกที่ง่ายที่สุดหรือมีประสิทธิภาพมากที่สุดเสมอไป
เครื่องจัดการแป้นพิมพ์ JavaScript แบบง่ายอาจมีลักษณะดังนี้ ดูการอัปเดตพร็อพเพอร์ตี้ WAI-ARIA aria-activedescendant
เพื่อตอบสนองต่อข้อมูลจากผู้ใช้เพื่อแสดงปุ่มแถบเครื่องมือที่ใช้งานอยู่ในปัจจุบัน
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
ส่วนขยายสามารถสร้างแป้นพิมพ์ลัดที่ชัดเจนไปยังองค์ประกอบ UI ของส่วนขยายที่สำคัญ หากต้องการใช้แป้นพิมพ์ลัดเหล่านี้ ให้เชื่อมต่อ Listener กิจกรรมแป้นพิมพ์กับตัวควบคุม แจ้งให้ผู้ใช้ทราบเกี่ยวกับทางลัดที่มีอยู่โดยระบุไว้ในหน้าตัวเลือก
นำเสนอเนื้อหาที่เข้าถึงได้
การนำเสนอเนื้อหาที่เข้าถึงได้ง่ายเป็นสิ่งสำคัญสำหรับผู้ใช้ทุกคน หลักเกณฑ์ต่อไปนี้หลายข้ออาจฟังดูคุ้นเคย เพราะเป็นแนวทางปฏิบัติที่ดีสำหรับเนื้อหาเว็บทั้งหมด
ข้อความ
ตัวเลือกแบบอักษรและขนาดข้อความมีผลต่อความอ่านของเนื้อหาของส่วนขยาย ผู้ใช้ที่มีปัญหาเกี่ยวกับการมองเห็นอาจต้องเพิ่มขนาดข้อความของส่วนขยาย หากใช้แป้นพิมพ์ลัด ให้ตรวจสอบว่า ไม่ได้รบกวนแป้นพิมพ์ลัดการซูมที่อยู่ใน Chrome
เพื่อเป็นตัวบ่งชี้ความยืดหยุ่นของ UI ของส่วนขยาย ให้ใช้การทดสอบ 200% หากขนาดข้อความหรือการซูมหน้าเพิ่มขึ้น 200% จะยังใช้ได้อยู่ไหม
หลีกเลี่ยงการใส่ข้อความลงในรูปภาพ ผู้ใช้ไม่สามารถแก้ไขขนาดและโปรแกรมอ่านหน้าจอจะตีความรูปภาพไม่ได้ แต่ให้ใช้แบบอักษรเว็บที่มีสไตล์แทน เช่น แบบอักษรที่พบใน Google Font API แบบอักษรของเว็บสามารถปรับขนาดให้เหมาะกับขนาดต่างๆ และผู้คนที่ใช้โปรแกรมอ่านหน้าจอสามารถเข้าถึงได้
สีสัน
สีพื้นหลังและสีข้อความในส่วนขยายควรมีคอนทราสต์ที่เพียงพอ ใช้เครื่องมือตรวจสอบคอนทราสต์เพื่อทดสอบว่าสีพื้นหลังและพื้นหน้ามีคอนทราสต์ที่เหมาะสมหรือไม่
เมื่อประเมินความแตกต่าง ให้ตรวจสอบว่าทุกส่วนของส่วนขยายที่ใช้กราฟิกในการถ่ายทอดข้อมูลมองเห็นได้อย่างชัดเจน สำหรับรูปภาพเฉพาะ คุณสามารถใช้เครื่องมือต่างๆ เช่น Coblis—โปรแกรมจำลองการตาบอดสี เพื่อดูว่ารูปภาพมีลักษณะอย่างไรเมื่อมีสีบกพร่องในรูปแบบต่างๆ
ลองเสนอธีมสีต่างๆ หรือให้ผู้ใช้ปรับแต่งรูปแบบสีเพื่อสร้างคอนทราสต์ที่ดีขึ้นได้
เสียง
หากส่วนขยายอาศัยเสียงหรือวิดีโอในการสื่อสารข้อมูล ให้ตรวจสอบว่ามีคำบรรยายแทนเสียงหรือข้อความถอดเสียงให้ใช้งาน ดูข้อมูลเพิ่มเติมเกี่ยวกับคำบรรยายได้ในหลักเกณฑ์ของโปรแกรมสื่อที่มีคำบรรยายและคำบรรยาย
รูปภาพ
ระบุข้อความแสดงแทนที่ให้ข้อมูลสำหรับรูปภาพ
<img src="img.jpg" alt="The logo for the extension">
ใช้ข้อความแสดงแทนเพื่อระบุวัตถุประสงค์ของรูปภาพแทนคำอธิบายตามตัวอักษรของเนื้อหารูปภาพ รูปภาพที่มี Spacer หรือภาพตกแต่งควรมีข้อความแสดงแทน ""
ที่ว่างเปล่า หรือนำออกจาก HTML ทั้งหมดและวางใน CSS
หากส่วนขยายต้องใช้ข้อความในรูปภาพ ให้ใส่ข้อความในรูปภาพแทน แหล่งข้อมูลที่ดีสำหรับการอ้างอิงคือบทความ WebAIM เกี่ยวกับข้อความแสดงแทนที่เหมาะสม
ดูข้อมูลเพิ่มเติม
ดูข้อมูลเพิ่มเติมเกี่ยวกับการช่วยเหลือพิเศษใน Chrome ได้โดยไปที่เวอร์ชัน A11ycasts และอ่านเอกสารทางเทคนิคเกี่ยวกับการช่วยเหลือพิเศษของ Chromium