คู่มือฉบับสมบูรณ์เกี่ยวกับเครื่องมือช่วยการเข้าถึง

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

ARIA

แบบสำรวจของ WebAIM Million พบว่าโฮมเพจที่มี ARIA มีข้อผิดพลาดที่ตรวจพบได้โดยเฉลี่ย 41% มากกว่าที่ไม่มี ARIA ARIA เป็นเครื่องมือที่จำเป็นสำหรับการสร้างเว็บแอปพลิเคชันที่ซับซ้อน แต่ข้อกำหนดนั้นเข้มงวดและอาจเป็นเรื่องยากที่จะแก้ไขข้อบกพร่องโดยผู้ที่ไม่ได้ใช้เทคโนโลยีอำนวยความสะดวกเป็นประจำ การใช้เครื่องมือช่วยให้เรามั่นใจว่าเราใช้ ARIA อย่างถูกต้องและไม่ทำให้เกิดข้อผิดพลาดเพิ่มเติมในแอปพลิเคชันของเรา

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

สิ่งหนึ่งที่ไม่ได้ทดสอบอย่างชัดเจนใน bookmarklet ด้านบนคือการมีบทบาท ARIA ที่ซ้ำกัน บทบาทจุดสังเกตบางอย่างมีชื่อที่ฟังดูเหมือนอาจนำไปใช้กับหลายองค์ประกอบ แต่ควรใช้เพียงครั้งเดียวต่อหน้าเท่านั้น เช่น banner หรือ contentinfo Adrian Roselli ได้จัดทำ bookmarklet แบบง่าย ๆ ที่ใช้ CSS เพื่อตรวจสอบว่าบทบาท ARIA เหล่านี้มีการทำซ้ำหรือไม่ การเปิดใช้งาน bookmarklet จะเพิ่มโครงร่างสีแดงให้กับองค์ประกอบที่ละเมิด

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

เครื่องมือทดสอบอัตโนมัติ

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

เครื่องมือจำนวนมากใช้แกนแกนอยู่ใต้ประทุน ดังนั้นจึงอาจใช้ชุดเครื่องมือร่วมกันซ้ำซ้อนได้ ในท้ายที่สุด คุณจะเลือกเครื่องมือประเภทใดเป็นมากกว่าเกี่ยวกับประเภทของ UI ที่คุณต้องการ และระดับความครอบคลุมในผลลัพธ์ ตัวอย่างเช่น Lighthouse ซึ่งเป็นเครื่องมือที่สร้างขึ้นใน Google Chrome ใช้กฎแกนหลักบางส่วนที่เลือก ดังนั้นหากคุณจัดการให้ได้รับการสแกนที่สะอาดด้วย DevTools ขวาน คุณก็ไม่จำเป็นต้องเรียกใช้การสแกนของ Lighthouse เช่นกัน

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

ข้อมูลเชิงลึกด้านการเข้าถึงยังทำงานบนแกนแกน แต่มีคุณสมบัติหลายอย่างที่แตกต่างจากขวาน DevTools มันสามารถทำงานบนแพลตฟอร์มต่าง ๆ รวมถึง Android, Windows หรือเป็นส่วนขยายของเบราว์เซอร์ ทุกเวอร์ชันของ Accessibility Insights มีเครื่องมือที่คล้ายกับผู้ตรวจสอบสำหรับการค้นหาข้อมูลองค์ประกอบแต่ละรายการ ตลอดจนวิธีการเรียกใช้การตรวจสอบอัตโนมัติ ส่วนขยายเว็บยังมีคุณลักษณะการประเมิน ซึ่งมีทั้งการทดสอบแบบอัตโนมัติ แบบแนะนำ และแบบทดสอบด้วยตนเอง เพื่อให้คุณสร้างรายงานฉบับเต็มได้

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

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

คุณเคยพิจารณาที่จะทดสอบความสามารถในการเข้าถึงซอร์สโค้ดของคุณโดยอัตโนมัติด้วย GitHub Actions หรือไม่? ไม่ว่าคุณจะยังไม่ได้ใช้ GitHub Actions หรือเพียงแค่ต้องการความช่วยเหลือเล็กน้อยในการตั้งค่าเวิร์กโฟลว์ที่เหมาะสม บทช่วยสอนของ Adrian Bolonio ก็เหมาะสำหรับคุณ มันแสดงให้คุณเห็นทีละขั้นตอนในการทำการทดสอบการช่วยสำหรับการเข้าถึงของคุณโดยอัตโนมัติด้วยไลบรารีเช่น axe, pa11y, Lighthouse และการทดสอบหน่วยโดยตรงในที่เก็บ GitHub ของคุณ

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

สี

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

เมื่อคุณเริ่มออกแบบจานสี เครื่องมือเลือกสีในเบราว์เซอร์อาจมีประโยชน์ Are My Colours Accessible คือเครื่องมือที่สามารถช่วยคุณหาจานสีที่สามารถเข้าถึงได้ โหมดพื้นฐานจะคำนวณอัตราส่วนคอนทราสต์ระหว่างสองสีใดๆ ขนาดแบบอักษรและน้ำหนักแบบอักษรของข้อความของคุณอาจส่งผลต่ออัตราส่วนคอนทราสต์ที่ต้องการตามระดับความสอดคล้อง และเครื่องมือนี้ช่วยจัดวางมาตรฐานต่างๆ ที่ตรงตามมาตรฐานต่างๆ อย่างเป็นประโยชน์ นอกจากนี้ยังมีแถบเลื่อนช่วง HSL เพื่อให้คุณสามารถปรับแต่งสีใดก็ได้ โดยผลลัพธ์จะอัปเดตโดยอัตโนมัติเมื่อคุณทำการปรับเปลี่ยน โหมดจานสีช่วยให้คุณเปรียบเทียบทุกสีในจานสีกับแต่ละสี และแสดงอัตราส่วนคอนทราสต์และมาตรฐานที่ตรงตาม ซึ่งมีประโยชน์ในการกำหนดวิธีที่คุณสามารถ รวมสีต่างๆ เข้าด้วยกัน การปรับสีต่างๆ ยังอัปเดตลิงก์ถาวร ช่วยให้คุณแชร์การผสมสีกับทีมของคุณได้อย่างง่ายดาย หากคุณต้องการอินเทอร์เฟซสำหรับการเลือกสีที่แตกต่างกัน Atul Varma ได้สร้างเครื่องมือที่คล้ายกันซึ่งใช้ตัวเลือกสีแทนตัวเลื่อนช่วง HSL

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

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

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

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

บางครั้งในฐานะนักพัฒนา เราเริ่มทำงานในโครงการที่เราอาจต้องออกแบบในขณะที่เราไป และเริ่มเขียนโค้ดโดยไม่มีชุดสีแบรนด์ที่สร้างไว้ล่วงหน้าอย่างครบถ้วน เมื่อการพัฒนาเริ่มต้นขึ้น การนำเข้าจานสีไปมาในเครื่องมือภายนอกอาจเป็นเรื่องที่น่าเบื่อหน่าย มีตัวเลือกมากมายสำหรับ ตรวจสอบคอนทราสต์ของสีในสภาพแวดล้อมของโค้ด Alex Clapperton ได้พัฒนาเครื่องมือ CLI ที่คุณส่งผ่านในสองสีและส่งออกอัตราส่วนความคมชัดและมาตรฐานการส่งผ่านในเทอร์มินัล BBC ได้เผยแพร่ตัวตรวจสอบความคมชัดของสี JavaScript ที่ใช้สองสีและกำหนดว่าตรงตามมาตรฐานที่คุณต้องการหรือไม่ เครื่องมือเช่นนี้สามารถอยู่ใน codebase ของคุณพร้อมกับการทดสอบ หรือนำไปใช้ในไลบรารีระบบการออกแบบของคุณ เช่น Storybook, PatternLab และอื่นๆ

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

ความเข้ากันได้

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

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

เอกสารการช่วยสำหรับการเข้าถึง

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

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

การจัดการโฟกัส

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

bookmarklet นี้โดย Level Access จะติด ป้ายกำกับทุกองค์ประกอบ ที่สามารถโฟกัสได้บนหน้า เพื่อให้คุณสามารถตรวจสอบได้ว่าลำดับโฟกัสตรงกับลำดับการอ่าน สำหรับผู้ใช้ Firefox นั้น Accessibility Inspector ของ Firefox ได้เพิ่มคุณสมบัตินี้ตั้งแต่เวอร์ชัน 84

ในฐานโค้ดที่ซับซ้อน ซึ่งส่วนประกอบต่างๆ หรือโค้ดของบุคคลที่สามอาจเคลื่อนโฟกัสไปรอบๆ โดยไม่คาดคิด ข้อมูลโค้ดเล็กๆ นี้โดย Scott Vinkle สามารถช่วยให้คุณเห็นว่าองค์ประกอบใดมีโฟกัสอยู่ในขณะนี้ หากฉันกำลังดิ้นรนกับการโฟกัสที่ส่วนอื่นๆ ของแอปพลิเคชันของฉันเคลื่อนไปมา บางครั้งฉันก็ต้องการแทนที่ console.log ด้วย console.trace เพื่อกำหนดว่าฟังก์ชันใดที่เคลื่อนโฟกัสไปรอบๆ

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

การตั้งค่า tabindex เชิงบวกเพื่อลองและแก้ไขลำดับโฟกัสคือ gotcha การช่วยสำหรับการเข้าถึงทั่วไป องค์ประกอบที่มี tabindex เชิงบวกจะบังคับให้เบราว์เซอร์แท็บไปที่องค์ประกอบเหล่านั้นก่อน แม้ว่าในทางเทคนิคแล้วอาจไม่ใช่ข้อผิดพลาด แต่สิ่งนี้มักเกิดขึ้นโดยไม่คาดคิดและอาจทำให้เกิดปัญหามากกว่าที่จะแก้ไขได้ bookmarklet แท็บดัชนีของ Paul J. Adam ช่วยให้คุณสามารถเน้นองค์ประกอบทั้งหมดที่มีการใช้แอตทริบิวต์ tabindex

การใช้งานเลย์เอาต์

ลำดับการอ่านเอกสารในบางครั้งอาจไม่ตรงกับสิ่งที่ผู้ดูคาดหวังหากเลย์เอาต์อาศัยคุณสมบัติคำสั่ง CSS Grid หรือ Flexbox มากเกินไป Adrian Roselli ได้เข้ารหัส bookmarklet เพื่อติดตามลำดับการอ่านเพื่อช่วยให้คุณแน่ใจว่าไซต์ของคุณผ่านแนวทางลำดับที่มีความหมาย

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

Jared Smith สร้าง bookmarklet เพื่อเปลี่ยนเคอร์เซอร์ของคุณให้เป็นกล่องขนาด 44×44 พิกเซล เพื่อให้คุณสามารถวางเมาส์ไว้เหนือการควบคุมเพื่อให้แน่ใจว่าตรง ตามเกณฑ์ขนาดเป้าหมายที่แนะนำ

Linters

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

นักพัฒนาหลายคนรู้จักและใช้ ESLint ในระดับหนึ่งอยู่แล้ว แทนที่จะเรียนรู้เครื่องมือใหม่ เป็นไปได้ที่จะเริ่มต้นการทดสอบการช่วยสำหรับการเข้าถึงโดยการเพิ่มปลั๊กอินใหม่ลงในเวิร์กโฟลว์ที่มีอยู่ของคุณ Eslint-plugin-jsx-a11y เป็นปลั๊กอิน ESLint สำหรับองค์ประกอบ JSX ของคุณ โดยจะแสดงข้อผิดพลาดใดๆ ในขณะที่คุณเขียนโค้ด Scott Vinkle ได้เขียนคำแนะนำที่เป็นประโยชน์เกี่ยวกับการตั้งค่า

Deque ได้ออก axe Linter ซึ่งมีให้ในแอพ Github หรือ VS Code Extension Axe Linter ตรวจสอบไฟล์ React, Vue, HTML และ Markdown ตามกฎหลักโดยไม่มีการกำหนดค่าใด ๆ ดังนั้นจึงง่ายต่อการเริ่มต้นและใช้งาน แม้ว่าคุณจะสามารถส่งผ่านตัวเลือกของคุณเองได้ คุณลักษณะที่เป็นประโยชน์อย่างหนึ่งคือ มันแยกความแตกต่างระหว่าง WCAG 2 และ WCAG 2.1 ซึ่งมีประโยชน์หากคุณพยายามทำให้ตรงตามมาตรฐานที่กำหนด

มาร์กอัป

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

หากคุณเป็นคนที่ชอบมองเห็นภาพมากกว่า โปรเจ็กต์ a11y.css ของ Gael Poupard คือสไตล์ชีตที่ตรวจสอบความเสี่ยงที่อาจเกิดขึ้นภายในมาร์กอัปของคุณ มีให้เลือกทั้งในรูปแบบส่วนขยายหรือ bookmarklet คุณสามารถปรับแต่งภาษาและระดับคำแนะนำที่แสดงได้ ในลักษณะเดียวกัน sa11y เป็นเครื่องมือที่สามารถติดตั้งเป็น bookmarklet หรือรวมเข้ากับ codebase ของคุณ Sa11y ได้รับการออกแบบมาโดยเฉพาะสำหรับการดู ผลลัพธ์ของเนื้อหา CMS โดยจะแสดงคำเตือนในภาษาที่ไม่ใช่ด้านเทคนิค เพื่อให้ผู้แก้ไขเนื้อหาสามารถเข้าใจและแก้ไขที่จำเป็นได้

ระดับการอ่าน

ไซต์ที่สามารถเข้าถึงได้เริ่มต้นด้วยเนื้อหาที่สามารถเข้าถึงได้ ความสามารถในการเข้าถึงทางปัญญาเป็นจุดสนใจหลักของร่าง WCAG 3 ที่กำลังดำเนินอยู่ และปัจจุบันมีการกล่าวถึงในเกณฑ์ความสำเร็จ 3.1.5 ซึ่งแนะนำว่าผู้เขียนตั้งเป้าให้เนื้อหาสามารถเข้าใจได้ในระดับมัธยมศึกษาตอนต้น (เกรด 7-9)

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

ชุดทดสอบและการบูรณาการอย่างต่อเนื่อง

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

เป็นอีกครั้งที่ axe-core ปรากฏขึ้นเป็นไลบรารีโอเพนซอร์ซที่มักจะสนับสนุนเครื่องมือเหล่านี้ส่วนใหญ่ ดังนั้นการที่เครื่องมือจะทำงานให้คุณหรือไม่นั้นก็มักจะขึ้นอยู่กับว่ามันรวมเข้ากับโค้ดของคุณได้ดีเพียงใด มากกว่าความแตกต่างใดๆ ในผลการทดสอบ . Marcy Sutton ได้เผยแพร่คำแนะนำเกี่ยวกับเฟรมเวิร์กที่ไม่เชื่อเรื่องพระเจ้าสำหรับการเริ่มต้นเขียนการทดสอบอัตโนมัติสำหรับการช่วยสำหรับการเข้าถึง เธอครอบคลุมความแตกต่างระหว่างการทดสอบหน่วยและการทดสอบการรวม และเหตุผลที่คุณอาจต้องการเลือกแบบใดแบบหนึ่งในสถานการณ์ต่างๆ

หากคุณมีเฟรมเวิร์กการทดสอบที่คุณชอบอยู่แล้ว ก็มีโอกาสสูงที่จะมีไลบรารี่ ที่รวมเอาแกนหลัก เข้าไปด้วย ตัวอย่างเช่น Josh McClure ได้เขียนคู่มือที่ใช้ขวานไซเปรส และ Nick Colley ได้ผลิตเวอร์ชันที่แต่งกลิ่นรส Jest ด้วยขวานล้อเลียน

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

ค่ากำหนดของผู้ใช้

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

Magica11y คือชุดของฟังก์ชันที่ให้คุณกำหนดความชอบของผู้ใช้ ส่งหน้าเอกสารให้ผู้ทดสอบที่ไม่ใช่ด้านเทคนิคหรือรวมข้อมูลเหล่านี้ไว้ในแอปของคุณ เพื่อให้คุณสร้างสภาพแวดล้อมของผู้ใช้ได้แม่นยำยิ่งขึ้น

ห่อ

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

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