ภาวะที่กลืนไม่เข้าคายไม่ออกในการเข้าถึง

เกณฑ์ความสำเร็จสำหรับการเข้าถึงเว็บภายใต้WCAG 2.1 (หลักเกณฑ์การเข้าถึงเนื้อหาเว็บ) อาจเกินขอบเขตหากมองจากมุมมองของตำราเรียนเท่านั้น จากประสบการณ์ของฉัน นักพัฒนาและผู้จัดการเกือบจะเป็นเอกฉันท์ที่รู้สึกไม่สบายใจต่อโครงการ Web Accessibility เช่น: เราต้องอ่าน "ทั้งหมดนั้น" ไหม มันแค่ "น่าเบื่อมาก" "แค่เรียกใช้ตัวตรวจสอบความถูกต้อง" ... จิ้งหรีดและวัชพืชเพื่อสรุป

ในฐานะนักพัฒนาและผู้เรียนรู้เกี่ยวกับ Web Accessibility ฉันตระหนักดีว่าเมื่อก้าวผ่าน "ความเจ็บปวดอย่างแสนสาหัส" จากการอ่านเกณฑ์แล้ว ก็สามารถเข้าหาได้จากมุมที่แตกต่างกัน จาก มุม ประสบการณ์ของผู้ใช้เช่น และตามเลเยอร์ ช้า แต่จริง ๆเพียงแค่ทดสอบ สิ่งที่นักพัฒนาทำอยู่ตลอดเวลา ตอนนี้มักจะทำให้ฉันเข้าสู่คำถาม & คำตอบต่อไปนี้:

แต่เราต้อง "ทดสอบ" อะไรกันแน่?

สิ่งที่เรา ทำโดย ไม่รู้ตัวเป็นส่วนใหญ่: การเดินทางของผู้ใช้

เราจะทำอย่างนั้นได้อย่างไร?

ผู้ใช้ของเราอาจจำลองหรือเลียนแบบ โดยการเห็นอกเห็นใจผู้ทุพพลภาพ อย่างมีสติ

การทดสอบไซต์ของฉันด้วยตัวตรวจสอบความถูกต้องยังไม่เพียงพออีกหรือ

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

ขอการเปรียบเทียบที่เป็นรูปธรรมได้ไหม

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

การเข้าถึงหน้าร้าน

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

อาคารสถานที่

ลองอธิบายกระบวนการด้วยตัวอย่าง แต่ก่อนอื่นให้สร้างสถานที่บางส่วน:

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

ก่อนที่จะเข้าใจว่าPersonaคืออะไร มาทำความเข้าใจกันก่อน ฟังดูเป็นเรื่องง่ายๆ ที่เราเคยได้ยินมาหลายครั้งว่า “ใส่ตัวเองเข้าไปอยู่ในรองเท้าของคนอื่น” มันจะยากแค่ไหน? กลับกลายเป็นว่าผู้คนมีระดับความเห็นอกเห็นใจที่แตกต่างกัน และมักจะได้รับอิทธิพลจากประสบการณ์ชีวิตของพวกเขาเอง... ดังนั้นมันไม่ง่ายอย่างนั้น

ความเห็นอกเห็นใจไม่ใช่การเอาใจใส่

นอกจากนี้ การรับรู้ที่แตกต่างกันว่าความเห็นอกเห็นใจหมายถึงอะไรทำให้สิ่งต่างๆ ซับซ้อน ฉันเคยได้ยินคำจำกัดความที่เกิดขึ้นเองมากมาย: มันเกี่ยวกับการมีจิตใจที่ยิ่งใหญ่ มีความรู้สึกอ่อนไหวต่อบางสิ่ง การเป็นคนใจบุญ หรือการอ่านอารมณ์ “ระหว่างบรรทัด”… ใช่ ฉันเดาว่า อาจเป็นไปได้ทั้งหมดขึ้นอยู่กับบริบทของการสนทนา แต่ถึงกระนั้นทั้งหมดที่กล่าวมาก็ใกล้เคียงกับความเห็นอกเห็นใจมากกว่าการเอาใจใส่ ตอนนี้ เมื่อพูดถึงWeb Accessibilityโชคดีที่การเอาใจใส่ถือเป็นปัญหาที่นำไปใช้ได้จริง ตัวอย่างเช่น หน้าร้านออนไลน์สามารถเข้าถึงได้หรือไม่สามารถเข้าถึงได้ กล่าวอีกนัยหนึ่ง "เข้าถึงได้ครึ่งหนึ่ง" จะไม่เกิดขึ้นหากการเดินทางที่สำคัญไม่ประสบความสำเร็จ อย่างที่ไม่ทำกับร้านขายอิฐและปูน นักช้อปที่มีความทุพพลภาพสามารถเข้าไปจับจ่ายซื้อของหรือไม่ก็ได้

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

เรื่องราวตามปกติของฉันในการ "โน้มน้าว" ให้ผู้คนเห็นอกเห็นใจมีดังนี้ ก่อนอื่นเรามาเพิ่มบรรยากาศที่ผ่อนคลายก่อน โดยทำเป็นว่าเราอยู่ในร้านอาหารหรือบาร์ แวดล้อมไปด้วยครอบครัว เพื่อน หรือผู้ยืนดูเป็นครั้งคราว ซึ่งโดยปกติแล้วจะเป็นบริบทที่ฉันเล่าเรื่องนี้:

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

ความต้านทานต่อการเอาใจใส่

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

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

อย่างไรก็ตาม เมื่อตัวอย่างถูกหลอมรวมและผู้คนเริ่มโยนทฤษฎีและจดจำหรือค้นหาวิธีเคลื่อนไหวบนหน้าจอโดยใช้แป้นพิมพ์เท่านั้น เราก็จะมีความคิด แผน แผนงาน — การเดินทาง — ว่าจะชำระเงินอย่างไรให้เสร็จ .

ตกลง เมื่อการเดินทางบนแป้นพิมพ์นี้ถูกหลอมรวมแล้ว มาเพิ่มความซับซ้อนกันเถอะ สมมติว่าคุณซื้อสินค้านี้หลายครั้ง (รับผ้าพันคอสีเหลืองสำหรับทุกคน) และตอนนี้คุณรู้กระบวนการด้วยหัวใจ รู้ว่า "ดีมาก" คุณสามารถทำได้โดยไม่ต้องใช้ หนูดีจัง ทำแบบ “หลับตา” ได้ … จริงเหรอ? … มาลองกัน: การนำทางด้วยแป้นพิมพ์ + ปิดตา

บุคคลที่มีความพิการ

ก่อนปิดตาเรามานิยามว่าPersonaคืออะไร ในบริบทของ User Experience (UX) Design “ บุคคล ” คือผู้ใช้ตามแบบฉบับซึ่งมีเป้าหมายและคุณลักษณะที่แสดงถึงความต้องการและข้อจำกัดของผู้ใช้กลุ่มใหญ่ ใช่ การแสดงใบหน้าให้กับผู้ใช้ช่วยในกระบวนการเอาใจใส่ โดยกูเกิล "personas for accessibility" เราสามารถค้นหาตัวตนที่พร้อมใช้งานมากมาย แต่ใช่ อ่านเพิ่มเติม … จิ้งหรีดและวัชพืชอีกครั้ง

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

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

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

เส้นทางของผู้ใช้ที่สำคัญ

กรณีทดสอบ: เจนกำลังหาซื้อผ้าพันคอสีเหลืองให้ตัวเอง ในทางกลับกันจอห์นต้องการซื้อผ้าพันคอแบบเดียวกันให้แฟนสาวของเธอ ชี้แจงเพิ่มเติมเจน & จอห์นไม่เกี่ยวข้องกัน ไม่รู้จักกัน

สำหรับทั้งJane & Johnการเดินทางครั้งสำคัญในการซื้อผ้าพันคอสีเหลืองสำหรับผู้หญิงจะมีลักษณะดังนี้:

แท็บไปที่ ช่อง ค้นหา > พิมพ์ “ผู้หญิงผ้าพันคอสีเหลือง” > แท็บไปยังผลิตภัณฑ์แรก (แสร้งทำเป็นผ้าพันคอสีเหลือง) > เริ่มกระบวนการชำระเงิน

เลียนแบบหรือเลียนแบบ?

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

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

การโต้ตอบของแป้นพิมพ์

• แท็บ
• SHIFT+แท็บ
• ช่องว่าง
• เข้าสู่
• ปุ่มลูกศร.

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

เลียนแบบเจน

ติดตามเส้นทางที่สำคัญของผู้ใช้โดยใช้แป้นคีย์บอร์ดที่เจนจะใช้เท่านั้น

เลียนแบบจอห์น

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

ปัญหาที่พบบ่อย

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

การปฏิบัติตามเกณฑ์

คำชี้แจง: เกณฑ์เป็นพหูพจน์; เกณฑ์เป็นเอกพจน์

ตอนนี้ หากคุณสามารถเสร็จสิ้นขั้นตอนการชำระเงินโดยการจำลองJane & Johnได้สำเร็จ แสดงว่าหน้าร้านนั้นได้ปฏิบัติตามเกณฑ์WCAG 2.0 ต่อไปนี้

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

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

สรุปแล้ว

1. เราตรวจสอบการช่วยสำหรับการเข้าถึงหน้าร้านได้ด้วยการ "เดินไปเดินมา" ด้วยความเอาใจใส่
2. เมื่อวางแผน พัฒนา และทดสอบหน้าร้านออนไลน์ ความพยายามใดๆ ในกระบวนการเพื่อลบจุดบกพร่องที่เกี่ยวข้องกับเกณฑ์ 16 ข้อที่ระบุไว้ข้างต้นจะช่วยอำนวยความสะดวกในการชำระเงินสำหรับผู้ใช้ที่มีความพิการ
3. นักพัฒนาเว็บควรตรวจสอบให้แน่ใจว่า เส้นทางของ ผู้ใช้ที่สำคัญที่สามารถเข้าถึงได้นั้นใช้งานได้จริงก่อนที่จะส่งมอบให้กับผู้ทดสอบ QA
4. เครื่องมือตรวจสอบที่ดีที่สุดคือการเอาใจใส่
5. บางครั้งการหลับตา เราสามารถ “มองเห็น” ว่าปัญหาอยู่ที่ไหน
6. นักช้อปที่มีความทุพพลภาพควรซื้อทางออนไลน์ได้เช่นเดียวกับที่ซื้อในร้านค้าที่มีหน้าร้านจริง
7. ไม่มีใครได้รับการยกเว้นจากความทุพพลภาพตลอดชีวิต กรณีตัวอย่างที่ดีที่สุด: เราทุกคนล้วนมีอายุ
8. การเข้าถึงเว็บควรถูกมองว่าเป็นโอกาสทางธุรกิจในกลยุทธ์ที่นำไปสู่เงินสด ก่อนที่จะกลายเป็น สถานการณ์ ที่ นำไปสู่คดีความ