axe core

ขวานแกน

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

ลงทะเบียนเพื่อรับข่าวสารขวานเพื่อรับข่าวสารล่าสุดเกี่ยวกับฟีเจอร์ขวาน การเปิดตัวในอนาคต และกิจกรรมต่างๆ

กฎการเข้าถึง

Axe-core มีกฎประเภทต่างๆ สำหรับ WCAG 2.0, 2.1, 2.2 ในระดับ A, AA และ AAA รวมถึงแนวทางปฏิบัติที่ดีที่สุดจำนวนหนึ่งที่ช่วยให้คุณระบุแนวทางปฏิบัติในการเข้าถึงทั่วไป เช่น ตรวจสอบให้แน่ใจว่าทุกหน้ามีส่วนหัว h1 และเพื่อช่วย คุณหลีกเลี่ยง "gotchas" ใน ARIA เช่นเดียวกับที่แอตทริบิวต์ ARIA ที่คุณใช้จะถูกละเว้น รายการกฎทั้งหมด ระดับ WCAG ที่จัดกลุ่ม และแนวปฏิบัติที่ดีที่สุด สามารถพบได้ใน doc/rule-descriptions.md

ด้วย axe-core คุณสามารถค้นหา ปัญหา WCAG โดยเฉลี่ย 57% ได้โดยอัตโนมัติ นอกจากนี้ axe-core จะส่งกลับองค์ประกอบเป็น "ไม่สมบูรณ์" โดยที่ axe-core ไม่สามารถระบุได้ และจำเป็นต้องมีการตรวจสอบโดยเจ้าหน้าที่

หากต้องการตรวจจับข้อบกพร่องตั้งแต่เนิ่นๆ ในวงจรการพัฒนา เราขอแนะนำให้ใช้ส่วนขยาย axe-linter vscode เพื่อปรับปรุงความครอบคลุมของการทดสอบให้ดียิ่งขึ้นไปอีก เราขอแนะนำการทดสอบแบบมีคำแนะนำอันชาญฉลาดใน ax Extension

เริ่มต้นใช้งาน

ดาวน์โหลดแพ็คเกจก่อน:

 npm install axe-core --save-dev

ตอนนี้รวมไฟล์จาวาสคริปต์ในแต่ละ iframe ของคุณในระบบทดสอบหรือระบบทดสอบของคุณ:

 < script src =" node_modules/axe-core/axe.min.js " >  script >

ตอนนี้แทรกการเรียกในแต่ละจุดในการทดสอบของคุณโดยที่ UI ชิ้นใหม่ปรากฏหรือเปิดเผย:

 axe
  . run ( )
  . then ( results => {
    if ( results . violations . length ) {
      throw new Error ( 'Accessibility issues found' ) ;
    }
  } )
  . catch ( err => {
    console . error ( 'Something bad happened:' , err . message ) ;
  } ) ; 

ปรัชญา

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

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

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

เกี่ยวกับขวาน - ประกาศของเรา

• ขวานเป็นโอเพ่นซอร์ส
• มันส่งคืนผลบวกลวงเป็นศูนย์ (แม้จะมีข้อบกพร่อง)
• ได้รับการออกแบบมาเพื่อทำงานบนเบราว์เซอร์สมัยใหม่ทั้งหมด และกับเครื่องมือ เฟรมเวิร์ก ไลบรารี และสภาพแวดล้อมใดๆ ก็ตามที่คุณใช้อยู่ในปัจจุบัน
• ได้รับการสนับสนุนอย่างจริงจังจาก Deque Systems ซึ่งเป็นผู้จำหน่ายอุปกรณ์ช่วยการเข้าถึงรายใหญ่
• โดยจะผสานรวมกับการทดสอบอัตโนมัติด้านการทำงาน/การยอมรับที่คุณมีอยู่
• โดยจะกำหนดกฎที่จะรันโดยอัตโนมัติตามบริบทการประเมิน
• Ax รองรับการติดตั้งในหน่วยความจำ การติดตั้งแบบคงที่ การทดสอบการรวม และ iframe ที่มีความลึกไม่สิ้นสุด
• Axe สามารถกำหนดค่าได้สูง

เบราว์เซอร์ที่รองรับ

axe-core API รองรับเบราว์เซอร์ต่อไปนี้อย่างสมบูรณ์:

• Microsoft Edge v40 ขึ้นไป
• Google Chrome เวอร์ชัน 42 ขึ้นไป
• Mozilla Firefox v38 ขึ้นไป
• Apple Safari v7 ขึ้นไป
• Internet Explorer v11 (เลิกใช้แล้ว)

การสนับสนุนหมายความว่าเราจะแก้ไขข้อบกพร่องและพยายามทดสอบแต่ละเบราว์เซอร์เป็นประจำ ขณะนี้มีเพียง Chrome และ Firefox เท่านั้นที่ได้รับการทดสอบกับทุกคำขอดึง

มีการสนับสนุนที่จำกัดสำหรับ JSDOM เราจะพยายามทำให้กฎทั้งหมดเข้ากันได้กับ JSDOM แต่ในกรณีที่เป็นไปไม่ได้ เราขอแนะนำให้ปิดกฎเหล่านั้น ปัจจุบันกฎ color-contrast ใช้ไม่ได้กับ JSDOM

เรารองรับได้เฉพาะสภาพแวดล้อมที่รองรับฟีเจอร์โดยกำเนิดหรือโพลีฟิลอย่างถูกต้องเท่านั้น เราไม่สนับสนุนการใช้งาน v0 Shadow DOM ที่เลิกใช้แล้ว

เนื้อหาของแพ็คเกจ API

แพ็คเกจ axe-core API ประกอบด้วย:

• axe.js - ไฟล์ JavaScript ที่ควรรวมไว้ในเว็บไซต์ของคุณภายใต้การทดสอบ (API)
• axe.min.js - เวอร์ชันย่อของไฟล์ด้านบน

รองรับหลายภาษา

ขวานสามารถสร้างได้โดยใช้ภาษาท้องถิ่นของคุณ ในการดำเนินการดังกล่าว จะต้องเพิ่มไฟล์การแปลเป็นภาษาท้องถิ่นลงในไดเร็กทอรี ./locales ไฟล์นี้ต้องตั้งชื่อในลักษณะต่อไปนี้: .json หากต้องการสร้าง ax โดยใช้โลแคลนี้ แทนที่จะเป็นค่าเริ่มต้น ให้รัน ax ด้วยแฟล็ก --lang ดังนี้:

grunt build --lang=nl

หรือเทียบเท่า:

npm run build -- --lang=nl

สิ่งนี้จะสร้างบิลด์ใหม่สำหรับ axe ที่เรียกว่า axe..js และ axe..min.js หากคุณต้องการสร้างเวอร์ชันที่แปลเป็นภาษาท้องถิ่นทั้งหมด เพียงส่ง --all-lang แทน หากคุณต้องการสร้างเวอร์ชันที่แปลเป็นภาษาท้องถิ่นหลายเวอร์ชัน (แต่ไม่ใช่ทั้งหมด) คุณสามารถส่งรายการภาษาที่คั่นด้วยเครื่องหมายจุลภาคไปยังแฟล็ก --lang เช่น --lang=nl,ja

หากต้องการสร้างการแปลใหม่สำหรับ axe ให้เริ่มด้วยการรัน grunt translate --lang= สิ่งนี้จะสร้างไฟล์ json ในไดเร็กทอรี ./locales locales โดยมีข้อความภาษาอังกฤษเริ่มต้นเพื่อให้คุณแปลได้ หรือคุณสามารถคัดลอก . ./locales/_template.json เรายินดีรับการแปล axe-core เป็นภาษาท้องถิ่น สำหรับรายละเอียดเกี่ยวกับวิธีการมีส่วนร่วม โปรดดูส่วนการบริจาคด้านล่าง สำหรับรายละเอียดเกี่ยวกับไวยากรณ์ข้อความ โปรดดู ตรวจสอบเทมเพลตข้อความ

หากต้องการอัปเดตไฟล์การแปลที่มีอยู่ ให้รัน grunt translate --lang= อีกครั้ง สิ่งนี้จะเพิ่มข้อความใหม่ที่ใช้เป็นภาษาอังกฤษและลบข้อความที่ไม่ได้ใช้ภาษาอังกฤษ

นอกจากนี้ สามารถใช้ locale ขณะรันไทม์ได้โดยส่งวัตถุ locale ไปที่ axe.configure() ออบเจ็กต์โลแคลต้องมีรูปร่างเหมือนกับโลแคลที่มีอยู่ในไดเร็กทอรี ./locales locales ตัวอย่างเช่น:

 axe . configure ( {
  locale : {
    lang : 'de' ,
    rules : {
      accesskeys : {
        help : 'Der Wert des accesskey-Attributes muss einzigartig sein.'
      }
      // ...
    } ,
    checks : {
      abstractrole : {
        fail : 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
      } ,
      'aria-errormessage' : {
        // Note: doT (https://github.com/olado/dot) templates are supported here.
        fail : 'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
      }
      // ...
    }
  }
} ) ;

สถานที่ที่รองรับ

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

• บาสก์
• ภาษาเดนมาร์ก
• ภาษาดัตช์
• ภาษาฝรั่งเศส
• เยอรมัน
• ภาษาฮีบรู
• ญี่ปุ่น
• เกาหลี
• นอร์เวย์ (บุ๊กมอล)
• ขัด
• โปรตุเกส (บราซิล)
• สเปน
• กรีก
• ภาษาอิตาลี
• จีนตัวย่อ
• จีนดั้งเดิม

การอัปเดตและความปลอดภัย

Axe-core มีการเปิดตัวรองใหม่ทุกๆ 3 ถึง 5 เดือน ซึ่งโดยปกติจะแนะนำกฎและคุณสมบัติใหม่ เราขอแนะนำให้จัดตารางเวลาเพื่ออัปเกรดเป็นเวอร์ชันเหล่านี้ การอัปเดตความปลอดภัยจะมีให้สำหรับเวอร์ชันรองที่ มีอายุไม่เกิน 18 เดือน

• ดูการเผยแพร่และการสนับสนุนสำหรับรายละเอียดเกี่ยวกับความถี่ของการเผยแพร่ การสนับสนุนระยะยาว และคำแนะนำในการอัปเกรด axe-core
• ดูความเข้ากันได้แบบย้อนหลังสำหรับรายละเอียดเกี่ยวกับประเภทของการเปลี่ยนแปลงที่อาจมีการเปิดตัวต่างๆ

นโยบายเครื่องหมายการค้า Deque

DEQUE, DEQUELABS, AXE® และ AXE-CORE® เป็นเครื่องหมายการค้าของ Deque Systems, Inc. การใช้เครื่องหมายการค้า Deque จะต้องเป็นไปตามนโยบายเครื่องหมายการค้าของ Deque

บทบาทและคุณลักษณะ ARIA ที่รองรับ

อ้างอิงการสนับสนุน axe-core ARIA สำหรับรายการทั้งหมดของบทบาทและคุณลักษณะที่รองรับ ARIA ตามขวาน

มีส่วนร่วม

อ่านคู่มือกฎ Proposing Axe-core

อ่านเอกสารเกี่ยวกับสถาปัตยกรรม

อ่านเอกสารเกี่ยวกับการบริจาค

โครงการที่ใช้แกนขวาน

รายชื่อโครงการที่ใช้ axe-core

รับทราบ

ขอบคุณ Marat Dulin สำหรับการใช้งาน css-selector-parser ซึ่งรวมอยู่ในการสนับสนุน Shadow DOM ขอขอบคุณอีกครั้งสำหรับผู้ใช้ Slick Parser ที่ให้การสนับสนุน เราได้ใช้อัลกอริธึมบางส่วนในโค้ดสนับสนุน Shadow DOM ของเรา ขอขอบคุณ Lea Verou และ Chris Lilley สำหรับไลบรารี colorjs.io ซึ่งเราได้ใช้สำหรับการแปลงระหว่างรูปแบบสีต่างๆ

ใบอนุญาต

Axe-core เผยแพร่ภายใต้ Mozilla Public License เวอร์ชัน 2.0 มันมาพร้อมกับการขึ้นต่อกันหลายอย่างซึ่งกระจายภายใต้เงื่อนไขของตัวเอง (ดู LICENSE-3RD-PARTY.txt)