ส่วนขยายช่วยให้ผู้ใช้สร้างประสบการณ์การท่องเว็บที่สมบูรณ์แบบโดยปรับแต่งตามความสามารถและความต้องการของผู้ใช้แต่ละคน ส่วนขยายควรมีคอมโพเนนต์การช่วยเหลือพิเศษที่สนับสนุนฐานผู้ใช้แบบไม่แบ่งแยก โดยให้ผู้ที่มีความบกพร่องทางสายตา สูญเสียการได้ยิน มีความคล่องแคล่วที่จำกัด และความพิการอื่นๆ ให้เข้าถึงส่วนขยายได้
ทุกคนจะได้รับประโยชน์จากฟีเจอร์การช่วยเหลือพิเศษ ไม่ใช่แค่ผู้ใช้ที่มีความต้องการพิเศษเท่านั้น ผู้ใช้ที่มีความบกพร่องทางการมองเห็น มีความคล่องแคล่วต่ำ และผู้ใช้ขั้นสูงต่างก็ได้รับประโยชน์จากแป้นพิมพ์ลัด คำบรรยายวิดีโอและการถอดเสียงจำเป็นต่อผู้ใช้ที่หูหนวก แต่ยังช่วยผู้เรียนภาษาได้ด้วย
ผู้คนอาจโต้ตอบกับส่วนขยายได้หลายวิธี ผู้ใช้บางรายมีจอภาพมาตรฐาน แป้นพิมพ์ และเมาส์ หรืออาจใช้แว่นขยายหน้าจอหรืออาจใช้โปรแกรมอ่านหน้าจอก็ได้ แม้ว่าจะคาดการณ์ไม่ได้ว่าเครื่องมือใดที่ผู้คนจะใช้เพื่อเข้าถึงส่วนขยาย แต่ก็มีขั้นตอนที่นักพัฒนาซอฟต์แวร์สามารถทำได้เพื่อทำให้ส่วนขยายสามารถเข้าถึงได้มากที่สุดเท่าที่จะเป็นไปได้
ผสานรวมการควบคุม 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 ที่จะได้รับโฟกัสของแป้นพิมพ์คือ Anchor, ปุ่ม และตัวควบคุมแบบฟอร์ม อย่างไรก็ตาม การตั้งค่าแอตทริบิวต์ 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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
ส่วนขยายสามารถสร้างแป้นพิมพ์ลัดที่ชัดเจนไปยังองค์ประกอบ UI ของส่วนขยายที่สำคัญ หากต้องการใช้แป้นพิมพ์ลัดเหล่านี้ ให้เชื่อมต่อ Listener เหตุการณ์ของแป้นพิมพ์กับตัวควบคุม แจ้งให้ผู้ใช้ทราบเกี่ยวกับทางลัดที่ใช้ได้โดยระบุไว้ในหน้าตัวเลือก
มอบเนื้อหาที่เข้าถึงได้ง่าย
การให้เนื้อหาที่เข้าถึงได้ง่ายเป็นสิ่งสำคัญสำหรับผู้ใช้ทุกคน หลักเกณฑ์หลายข้อต่อไปนี้อาจฟังดูคุ้นตาเพราะเป็นแนวทางปฏิบัติที่ดีสำหรับเนื้อหาเว็บทั้งหมด
ข้อความ
ตัวเลือกแบบอักษรและขนาดข้อความมีผลต่อเนื้อหาของส่วนขยายที่อ่านได้ ผู้ใช้ที่มีปัญหาเกี่ยวกับการมองเห็นอาจต้องเพิ่มขนาดข้อความของส่วนขยาย หากใช้แป้นพิมพ์ลัด ให้ตรวจสอบว่าคำสั่งไม่รบกวนแป้นพิมพ์ลัดการซูมที่อยู่ใน Chrome
เพื่อเป็นตัวบ่งชี้ความยืดหยุ่นของ UI ของส่วนขยาย ให้ใช้การทดสอบ 200% หากขนาดข้อความหรือการซูมหน้าเพิ่มขึ้น 200% ขนาดข้อความหรือการซูมหน้ายังใช้ได้อยู่ไหม
หลีกเลี่ยงการใส่ข้อความลงในรูปภาพ ผู้ใช้จะปรับขนาดไม่ได้และโปรแกรมอ่านหน้าจอจะตีความรูปภาพไม่ได้ แต่ให้เลือกใช้แบบอักษรของเว็บที่มีการจัดรูปแบบ เช่น แบบอักษรที่พบใน Google Font API เว็บฟอนต์สามารถปรับขนาดให้มีหลายขนาดและผู้ที่ใช้โปรแกรมอ่านหน้าจอสามารถเข้าถึงได้
สีสัน
สีพื้นหลังและสีข้อความในส่วนขยายควรตัดกันมากพอ ใช้เครื่องมือตรวจสอบคอนทราสต์เพื่อทดสอบว่าสีพื้นหลังและพื้นหน้ามีคอนทราสต์ที่เหมาะสมหรือไม่
เมื่อประเมินคอนทราสต์ ให้ตรวจสอบว่าทุกส่วนของส่วนขยายที่ใช้กราฟิกในการถ่ายทอดข้อมูลมองเห็นได้อย่างชัดเจน สำหรับรูปภาพบางประเภท คุณสามารถใช้เครื่องมือต่างๆ เช่น Coblis—โปรแกรมจำลองภาวะตาบอดสีเพื่อดูลักษณะของรูปภาพที่มีภาวะสีบกพร่องในรูปแบบต่างๆ ได้
ลองใช้ธีมสีที่แตกต่างกัน หรือให้ผู้ใช้ปรับแต่งรูปแบบสีเพื่อสร้างคอนทราสต์ที่ดีขึ้นได้
เสียง
หากส่วนขยายอาศัยเสียงหรือวิดีโอในการสื่อสารข้อมูล ให้ตรวจสอบว่ามีคำบรรยายหรือข้อความถอดเสียงพร้อมใช้งาน ดูข้อมูลเพิ่มเติมเกี่ยวกับคำบรรยายได้ในหลักเกณฑ์ของโปรแกรมสื่อที่มีคำอธิบายและคำบรรยาย
รูปภาพ
ใส่ข้อความแสดงแทนที่ให้ข้อมูลสำหรับรูปภาพ
<img src="img.jpg" alt="The logo for the extension">
ใช้ข้อความแสดงแทนเพื่อระบุวัตถุประสงค์ของรูปภาพแทนคำอธิบายตามจริงของเนื้อหารูปภาพ รูปภาพที่มีการเว้นวรรคหรือรูปภาพการตกแต่งเพียงอย่างเดียวควรมีข้อความแสดงแทน "" ที่ว่างเปล่า หรือนำออกจาก HTML ทั้งหมดและวางไว้ใน CSS
หากส่วนขยายต้องใช้ข้อความในรูปภาพ ให้ใส่ข้อความของรูปภาพไว้ในข้อความแสดงแทน แหล่งข้อมูลที่ดีสำหรับการอ้างอิงคือบทความ WebAIM ด้วยข้อความแสดงแทนที่เหมาะสม
ดูข้อมูลเพิ่มเติม
เรียนรู้เพิ่มเติมเกี่ยวกับการเข้าถึงใน Chrome โดยดูที่ช่องทาง A11ycasts และอ่านเอกสารทางเทคนิคเกี่ยวกับการช่วยเหลือพิเศษของ Chromium