การช่วยเหลือพิเศษ (a11y)

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

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

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

ผสานรวมการควบคุม 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="button2">
  <img src="buttonpaste" role="button" alt="paste" id="button3">
</div>

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

มีเนื้อหาที่เข้าถึงได้

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

ข้อความ

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

ใช้การทดสอบ 200% เพื่อดูว่า UI ของส่วนขยายมีความยืดหยุ่นเพียงใด หากเพิ่มขนาดข้อความหรือการซูมหน้าเว็บ 200% ผู้ใช้จะยังใช้งาน UI ได้อยู่ไหม

หลีกเลี่ยงการฝังข้อความไว้ในรูปภาพ ผู้ใช้จะแก้ไขขนาดไม่ได้ และโปรแกรมอ่านหน้าจอจะตีความรูปภาพไม่ได้ แต่ให้เลือกใช้แบบอักษรเว็บที่มีสไตล์ เช่น แบบอักษรใดแบบหนึ่งที่มีอยู่ใน Google Font API แบบอักษรเว็บสามารถปรับขนาดเป็นขนาดต่างๆ และผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอสามารถเข้าถึงได้

สี

สีพื้นหลังและสีข้อความในส่วนขยายควรตัดกันมากพอ ใช้เครื่องมือตรวจสอบคอนทราสต์เพื่อทดสอบว่าสีพื้นหลังและสีพื้นหน้ามีความคมชัดเหมาะสมหรือไม่

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

ลองเสนอธีมสีต่างๆ หรือให้ผู้ใช้ปรับแต่งรูปแบบสีเพื่อสร้างคอนทราสต์ที่ดีขึ้น

เสียง

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

รูปภาพ

ระบุข้อความแสดงแทนที่ให้ข้อมูลสำหรับรูปภาพ

<img src="img.jpg" alt="The logo for the extension">

ใช้ข้อความแสดงแทนเพื่อระบุวัตถุประสงค์ของรูปภาพแทนการอธิบายเนื้อหาของรูปภาพอย่างตรงไปตรงมา รูปภาพตัวเว้นวรรคหรือรูปภาพที่ใช้เพื่อตกแต่งเท่านั้นควรมี""ข้อความแสดงแทนว่างเปล่า หรือนําออกจาก HTML ทั้งหมดและวางไว้ใน CSS

หากส่วนขยายต้องใช้ข้อความในรูปภาพ ให้ใส่ข้อความของรูปภาพไว้ในข้อความแสดงแทน แหล่งข้อมูลที่มีประโยชน์ซึ่งควรอ่านคือบทความของ WebAIM เกี่ยวกับข้อความแสดงแทนที่เหมาะสม

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับการช่วยเหลือพิเศษใน Chrome ได้โดยไปที่ช่อง A11ycasts และอ่านเอกสารประกอบทางเทคนิคเกี่ยวกับการช่วยเหลือพิเศษของ Chromium