รองรับการช่วยเหลือพิเศษ

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

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

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

ผสานรวมการควบคุม 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