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

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

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

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

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

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

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

สี

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

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

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

เสียง

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

รูปภาพ

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

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

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

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

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

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