การช่วยเหลือพิเศษ (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 ที่รับโฟกัสของแป้นพิมพ์ได้คือ 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 ที่สำคัญของส่วนขยายได้ หากต้องการใช้แป้นพิมพ์ลัดเหล่านี้ ให้เชื่อมต่อเครื่องมือฟังเหตุการณ์ของแป้นพิมพ์กับตัวควบคุม แจ้งให้ผู้ใช้ทราบเกี่ยวกับแป้นพิมพ์ลัดที่มีให้ใช้งานโดยระบุไว้ในหน้าตัวเลือก

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

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

ข้อความ

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

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

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

สี

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

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

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

เสียง

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

รูปภาพ

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

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

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

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

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

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