การเข้าถึงเว็บ: ทำไมมาตรฐาน W3C มักถูกละเลย

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

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

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

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

1. “การออกแบบที่เข้าถึงได้” หมายถึงอะไร

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

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

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

• ฟังไม่เก่ง. 360 ล้านคนทั่วโลกมีความบกพร่องทางการได้ยิน เนื้อหาเสียงควรมีการถอดเสียงเป็นคำและวิดีโอควรมีคำบรรยาย

• ไม่สามารถมองเห็นได้ดี คาดว่าผู้คนทั่วโลกจะมีความบกพร่องทางการมองเห็น 285 ล้านคน: 39 ล้านคนตาบอด และ 246 คนมีความบกพร่องทางสายตา ผู้ใช้ที่มีความบกพร่องทางสายตาจะใช้โปรแกรมอ่านหน้าจอ (ที่อ่านเนื้อหาโดยใช้คำพูดที่สังเคราะห์ขึ้น) เครื่องแสดงผลอักษรเบรลล์แบบรีเฟรชได้ (เนื้อหาบนหน้าจอจะปรากฏบนเครื่องแสดงผลอักษรเบรลล์ และผู้ใช้สามารถนำทางและโต้ตอบกับอุปกรณ์ของตนได้โดยใช้ปุ่มบนจอแสดงผล) หรือสูง - โหมดคอนทราสต์

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

• ทุกข์ทรมานจากข้อจำกัดทางกายภาพ ไม่ใช่ทุกคนที่สามารถใช้อุปกรณ์ทั้งหมดได้ ตัวอย่างเช่น การนำทางผ่านเนื้อหาต้องพร้อมใช้งานไม่เฉพาะสำหรับผู้ใช้เมาส์เท่านั้น แต่ยังสำหรับผู้ใช้ที่ไม่สามารถใช้เมาส์ด้วย

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

2. วิธีตรวจสอบการเข้าถึงเว็บได้ดี

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

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

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

เพื่อแสดงให้เห็นว่ามันทำงานอย่างไร มาดูตัวอย่างโค้ดง่ายๆ:

 <a href="#” class=”button”>Delete</a>

รหัสง่ายๆ นี้ สำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ ไม่ได้มีความหมายอะไรมาก มันยิ่งทำให้เข้าใจผิดและอ่านได้เพียงลิงก์ที่มีข้อความ " ลบ " เพื่อช่วยให้ผู้ใช้เข้าใจว่าใช้วิธีใดในการดำเนินการ เราสามารถใช้แอตทริบิวต์ ARIA (Assistive Rich Internet Applications) (ระบุไว้ที่ https://www.w3.org/TR/wai-aria/) เพื่อ แทนที่บทบาทเดิม เราเปลี่ยนความหมายของลิงก์ไปยังปุ่มโดยเพิ่มแอตทริบิวต์ role="button" ด้วยวิธีนี้ โปรแกรมอ่านหน้าจอจะอ่านเป็นปุ่ม ไม่ใช่ลิงก์ ซึ่งเหมาะสมกว่า

กล่าวโดยย่อ คุณลักษณะ ARIA:

• ให้หรือปรับปรุงความหมายขององค์ประกอบที่ไม่ใช่ความหมายหรือความหมายอื่น

• ตรวจสอบให้แน่ใจว่าเนื้อหาแบบไดนามิก (สด) ยังคงสามารถเข้าถึงได้

• ให้บทบาทในการอธิบายประเภทของวิดเจ็ตที่กำหนด (เมนู รายการทรี ตัวเลื่อน ตัววัดความคืบหน้า ฯลฯ)

• ให้บทบาทในการอธิบายโครงสร้างของหน้าเว็บ (หัวเรื่อง ภูมิภาค และตาราง)

• ระบุสถานะของวิดเจ็ต (ตรวจสอบแล้ว มีป๊อปอัป ฯลฯ)

• จัดเตรียมคุณสมบัติสำหรับการลากแล้วปล่อยที่อธิบายแหล่งที่มาของการลากและเป้าหมายการวาง

การเข้าถึงในการออกแบบเว็บคืออะไร?

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

สมมติว่าคุณกำลังจะออกแบบองค์ประกอบดรอปดาวน์การเลือกแบบกำหนดเอง นี่คือสิ่งที่ควรพิจารณาขณะออกแบบองค์ประกอบ:

• ทำเครื่องหมายสถานะต่างๆ: เปิดใช้งาน ปิดใช้งาน อ่านอย่างเดียว

• ทำเครื่องหมายองค์ประกอบเมื่อได้รับสถานะโฟกัส/โฮเวอร์

• ทำเครื่องหมายทุกองค์ประกอบตัวเลือกเมื่อได้รับสถานะโฟกัส/โฮเวอร์

• ตรวจสอบให้แน่ใจว่าเนื้อหายังคงอ่านได้เมื่อซูมเฉพาะข้อความถึงระดับ 200%

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

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

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

• ทำเครื่องหมายแต่ละองค์ประกอบเมื่อได้รับสถานะโฟกัส/โฮเวอร์

• ตรวจสอบให้แน่ใจว่ามีพื้นที่เพียงพอระหว่างองค์ประกอบ เพื่อให้ทุกองค์ประกอบสามารถเปิดใช้งานได้ง่าย เช่น บนอุปกรณ์ที่มีวิวพอร์ตขนาดเล็กกว่า

3. การทดสอบการช่วยสำหรับการเข้าถึง: จะเริ่มต้นที่ไหน

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

การกำหนดประเด็น

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

ตัวอย่างที่ไม่ดี: ผู้ใช้ไม่สามารถใช้แป้นพิมพ์บนหน้าได้

ตัวอย่างที่ดี: ไม่สามารถใช้การนำทางด้วยแป้นพิมพ์ในเมนูหลักได้

ตัวอย่างที่ไม่ดีนำไปสู่คดีที่ค่อนข้างยากที่จะปิดในเวลาอันสั้น การสนทนาในหลายหัวข้ออาจเริ่มต้นในส่วนความคิดเห็นเช่นกัน เนื่องจากชื่อตั๋วนั้นกว้างเกินไป

ตัวอย่างที่ดีชี้ให้เห็นถึงปัญหาอย่างชัดเจนและเน้นที่สิ่งเดียวเท่านั้น: การนำทางด้วยแป้นพิมพ์ในเมนูหลัก

จัดลำดับความสำคัญปัญหาการเข้าถึงเว็บ

ลำดับความสำคัญมีความสำคัญเนื่องจากเป็นตัวกำหนดปัญหาที่ต้องแก้ไขก่อน ตัวอย่างเช่น WCAG แบ่งตามระดับความสอดคล้องสามระดับ: A, AA, AAA ซึ่งหมายความว่าคุณควรเริ่มต้นจากระดับต่ำสุด A แต่นั่นไม่ได้หมายความว่าระดับ AA และ AAA เป็นเพียง "ดีที่จะมี" โดยอัตโนมัติ ทุกระดับมีความสำคัญ และเป็นสิ่งสำคัญที่จะไม่จัดลำดับความสำคัญโดยสมมติว่าระดับ A เพียงอย่างเดียวก็เพียงพอแล้ว

อย่างไรก็ตาม ระดับ WCAG (หรือแนวทางอื่นๆ) อาจเข้าใจได้ยากในบางครั้ง และเพื่อให้เข้าใจง่ายขึ้นเล็กน้อย คุณอาจพิจารณาคำจำกัดความระดับความสำคัญต่อไปนี้:

• สำคัญ – ปัญหาที่ป้องกันไม่ให้ผู้ใช้ใช้แอปพลิเคชัน ไม่มีวิธีแก้ปัญหา

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

• เล็กน้อย – ปัญหาที่น่ารำคาญแต่ไม่ขัดขวางการใช้งาน หรือการปรับปรุงที่สามารถทำได้ในแอปพลิเคชัน

• ข้อมูล – ไม่ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด คำแนะนำทั่วไปสำหรับการปรับปรุง

โซลูชั่น

ไม่มีแนวทางใด—ซึ่งฉันหมายถึง WCAG, มาตรา 508 หรือ ADA— จะให้วิธีแก้ปัญหาที่ตรงไปตรงมาแก่คุณในแง่ของรหัสทางเทคนิคสำหรับวิธีแก้ไขปัญหาที่ระบุ พวกเขากำหนดพฤติกรรมที่คาดหวังเท่านั้น อย่างไรก็ตาม WCAG ยังได้กำหนดขั้นตอนการทดสอบที่ควรจะช่วยให้เข้าใจถึงวิธีการทำให้เกิดปัญหาขึ้นใหม่ และมีกลุ่มชุมชน Automated WCAG Monitoring ซึ่งเป็นชุมชน W3C ที่มุ่งเน้นที่การพัฒนากฎที่เชื่อถือได้สำหรับการทดสอบการช่วยสำหรับการเข้าถึงเว็บ ทั้งแบบอัตโนมัติและกึ่งอัตโนมัติ

ตัวอย่างสำหรับเทคนิค WCAG G4 (“การอนุญาตให้หยุดเนื้อหาชั่วคราวและเริ่มต้นใหม่จากตำแหน่งที่หยุดชั่วคราว”):

กระบวนการทดสอบ

บนหน้าที่มีเนื้อหาที่เคลื่อนไหวหรือเลื่อน

1. ใช้กลไกที่มีให้ในหน้าเว็บหรือโดยตัวแทนผู้ใช้เพื่อหยุดเนื้อหาที่เคลื่อนไหวหรือเลื่อนชั่วคราว

2. ตรวจสอบว่าการเลื่อนหรือการเลื่อนหยุดลงและไม่รีสตาร์ทเอง
3. ใช้กลไกที่มีให้เพื่อรีสตาร์ทเนื้อหาที่เคลื่อนไหว
4. ตรวจสอบว่าการเคลื่อนไหวหรือการเลื่อนกลับมาทำงานต่อจากจุดที่หยุดแล้ว

ผลลัพธ์ที่คาดหวัง

หมายเลข 2 และหมายเลข 4 เป็นความจริง

ดังที่เราเห็นแล้วว่าไม่มีวิธีแก้ปัญหาทางเทคนิค แต่มีการกำหนดพฤติกรรมที่คาดหวังไว้ นักพัฒนาเว็บใช้งานอย่างไรนั้นขึ้นอยู่กับพวกเขา

แนวทางการเข้าถึงเว็บและมาตรฐาน W3C

การปฏิบัติตามมาตรฐานเว็บพื้นฐานควรเป็นจุดเริ่มต้นของคุณ:

• แนวทางทั่วไปในการเข้าถึงเนื้อหาเว็บที่เรียกว่า WCAG WCAG 2.0 เป็น “มาตรฐานทางเทคนิคที่เสถียรและอ้างอิงได้ มีแนวปฏิบัติ 12 ประการที่จัดอยู่ภายใต้ 4 หลักการ คือ มองเห็นได้ ใช้งานได้ เข้าใจได้ และแข็งแกร่ง สำหรับแนวทางแต่ละข้อ มีเกณฑ์ความสำเร็จที่สามารถทดสอบได้ ซึ่งมีสามระดับ: A, AA และ AAA”

• เทคนิคสำหรับ WCAG 2.0 เป็นคู่มือที่ครอบคลุมสำหรับผู้เขียนเนื้อหาเว็บ

  

• ข้อกำหนดผู้ใช้ W3C Media Accessibility — เอกสารนี้นำเสนอข้อกำหนดการช่วยสำหรับการเข้าถึงที่ผู้ใช้ที่มีความทุพพลภาพมีเกี่ยวกับเสียงและวิดีโอบนเว็บ

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

• มาตรา 508 — ข้อกำหนดในการเข้าถึงข้อมูลสำหรับเทคโนโลยีสารสนเทศและการสื่อสาร (ICT) ที่ใช้กับหน่วยงานของรัฐบาลกลางทุกแห่งเมื่อพัฒนา จัดหา บำรุงรักษา หรือใช้เทคโนโลยีอิเล็กทรอนิกส์และเทคโนโลยีสารสนเทศ

• การเข้าถึงเว็บไซต์ภายใต้ Title II ของ Americans with Disabilities Act (ADA) — ที่นั่น คุณจะได้เรียนรู้ว่าข้อกำหนดเรื่องการไม่เลือกปฏิบัติของ Title II ของ ADA มีผลกับเว็บไซต์ของรัฐและท้องถิ่นอย่างไร

การทดสอบการเข้าถึงเว็บ: ฉันจะรู้ได้อย่างไรว่าเนื้อหาของฉันสามารถเข้าถึงได้หรือไม่?

ต่อไปนี้คือจุดตรวจสอบพื้นฐานขั้นพื้นฐานที่จะช่วยให้คุณเข้าถึงเนื้อหาเว็บของคุณได้มากขึ้นจากขั้นตอนที่หนึ่ง:

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

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

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

• เนื้อหาแบบไดนามิก แจ้งให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบเกี่ยวกับการเปลี่ยนแปลงแบบไดนามิก เช่น เมื่อผลการค้นหามีการเปลี่ยนแปลง

• อย่าพึ่งใช้สีมาบรรยายความหมาย ใช้สีร่วมกับคำอธิบาย เช่น [กล่องสีเหลือง] คำเตือน

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

• ข้อความแสดงข้อผิดพลาด แจ้งให้ผู้ใช้ทราบถึงวิธีการแก้ไขข้อผิดพลาดเสมอ อย่าเพิ่งระบุว่าข้อมูลไม่ถูกต้อง

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

• ซูม. ตรวจสอบให้แน่ใจว่าเนื้อหาของหน้ายังคงสามารถอ่านได้ในขณะที่ย่อ/ขยายข้อความได้ถึง 200%

• ปิดภาพ คุณยังสามารถใช้เพจได้อย่างสะดวกสบายหรือไม่? มีข้อความแสดงแทนสำหรับรูปภาพทั้งหมดหรือไม่

• โปรแกรมอ่านหน้าจอ ทดสอบเพื่อดูว่าคุณสามารถอ่านและนำทางผ่านเนื้อหาโดยใช้โปรแกรมอ่านหน้าจออย่างน้อยหนึ่งตัวได้หรือไม่ เช่น VoiceOver, Windows Narrator หรือ NVDA

• โหมดคอนทราสต์สูง ตรวจสอบเพื่อดูว่าเนื้อหายังคงสามารถอ่านได้หรือไม่ในขณะที่เปลี่ยนเป็นโหมดคอนทราสต์สูง

• ขนาดตัวอักษร. ตรวจสอบให้แน่ใจว่าขนาดตัวอักษรบนหน้ามีขนาดไม่ต่ำกว่า 10px

4. ข้อผิดพลาดทั่วไปในการเข้าถึงเว็บ

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

ต่อไปนี้คือรายการข้อผิดพลาดทั่วไปบางประการที่นักพัฒนาซอฟต์แวร์ทำขณะใช้งานการช่วยสำหรับการเข้าถึง:

• ไม่มีความสามารถในการนำ ทางผ่านเนื้อหาโดยใช้ เพียงแป้นพิมพ์

• การใช้คุณสมบัติเค้าร่าง CSS ในทางที่ผิด ในกรณีส่วนใหญ่ outline: 0; ใช้ ซึ่งหมายความว่าโครงร่างรอบองค์ประกอบที่สามารถดำเนินการได้แต่ละรายการจะไม่ปรากฏให้เห็นอีกต่อไป อย่าใช้ outline: 0; หรือ outline: 0 !important; . ผู้ใช้จะสูญเสียความสามารถในการดูองค์ประกอบที่โฟกัสอยู่ขณะนำทางผ่านเนื้อหา เว้นแต่จะมีทางเลือกอื่น เช่น การใช้คุณสมบัติ border CSS

• สูญเสียโฟกัส จากองค์ประกอบปัจจุบัน เช่น เนื่องจากการจัดการ DOM หรือการใช้เมธอด blur() ซึ่งมักเกิดขึ้นกับแอปพลิเคชันหน้าเดียว

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

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

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

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

• ลำดับชั้นของหัวเรื่องไม่ถูกต้อง น่าเสียดาย ที่ยังคงพบเห็นได้ค่อนข้างบ่อย แต่ลำดับชั้นของส่วนหัวไม่ได้สร้างอย่างเหมาะสม เช่น <h1> , <h5> และ <h2> ผู้ใช้โปรแกรมอ่านหน้าจอใช้ส่วนหัวเพื่อเลื่อนดูส่วนต่างๆ และโครงสร้างที่ไม่เหมาะสมทำให้เกิดความสับสนเนื่องจากเข้าใจบริบทได้ยาก

• ไม่มีการสนับสนุนคอนทราสต์สูง มีคนที่ใช้ซอฟต์แวร์ของตนในโหมดคอนทราสต์สูง ตรวจสอบให้แน่ใจว่าเนื้อหาของคุณยังคงสามารถรับรู้ได้

• การใช้โซลูชัน CAPTCHA ที่ไม่สามารถเข้าถึงได้ ขออภัย CAPTCHA ทั้งหมดที่ฉันรู้จักไม่สามารถเข้าถึงได้หรือใช้งานยากมาก

• มีภาพเคลื่อนไหวมากเกินไปและ/หรือหยุดไม่ได้ชั่วคราว การเล่นวิดีโอ โฆษณา หรือภาพหมุนอัตโนมัติทำให้เสียสมาธิอย่างมาก

• ข้อความชิ้นใหญ่ ข้อความที่ย่อเป็นบล็อกเดี่ยวขนาดใหญ่มาก โดยไม่มีช่องว่าง เครื่องหมายจุลภาค หรือจุด อ่านยากมาก การแยกเป็นส่วนย่อย ย่อหน้า และหัวเรื่องย่อยจะช่วยจัดระเบียบเนื้อหาข้อความได้ดียิ่งขึ้น

• ปัญหาการซูม ตรวจสอบให้แน่ใจว่าเนื้อหายังคงอ่านได้และนำทางได้เมื่อซูมสูงสุด 200%

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

• เป้าหมายที่คลิกได้/แตะได้ขนาดเล็ก พื้นที่ที่คลิกได้/แตะได้มักมีขนาดเล็กเกินไป ทำให้ผู้ใช้เปิดใช้งานได้ง่ายขึ้น

แต่ฉันจะปรับปรุงการช่วยสำหรับการเข้าถึงเว็บได้อย่างไร

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

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

• บริการตรวจสอบความถูกต้องของมาร์กอัป W3C — เพื่อให้แน่ใจว่าเนื้อหา HTML ไม่มีข้อผิดพลาด หากโครงสร้าง HTML มีข้อผิดพลาด เอาต์พุตจะไม่สามารถคาดการณ์ได้และไม่สามารถประมวลผลได้อย่างถูกต้อง โดยเฉพาะอย่างยิ่งด้วยเทคโนโลยีอำนวยความสะดวกต่างๆ

• https://www.w3.org/WAI/ER/tools/ — รายชื่อโปรแกรมหรือบริการออนไลน์ที่ช่วยคุณพิจารณาว่าเนื้อหาเว็บตรงตามแนวทางการเข้าถึงหรือไม่

• และเครื่องมือของฉัน ASLint https://www.aslint.org/ ช่วยให้คุณพบปัญหาการช่วยสำหรับการเข้าถึง

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

เน้นที่ปัญหาที่ขัดขวางการใช้งานแอปพลิเคชันของคุณ เช่น ผู้ใช้ไม่สามารถนำทางผ่านเมนูโดยใช้แป้นพิมพ์ได้

เหตุใดจึงต้องทำให้เนื้อหาเข้าถึงได้

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

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

สุดท้าย ต่อไปนี้คือสถิติบางส่วนที่คุณต้องพิจารณา:

• ผู้คนมากกว่า หนึ่งพันล้านคน ทั่วโลกประสบกับความพิการบางประเภท

• อายุของประชากร. ระหว่างปี 2015 ถึง 2030 จำนวนผู้สูงอายุ - ผู้ที่มีอายุ 60 ปีขึ้นไป - ในโลกคาดว่าจะเพิ่มขึ้นร้อยละ 56 จาก 901 ล้านคนเป็นมากกว่า 1.4 พันล้านคน

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

• ประเภทของความทุพพลภาพ: ความทุพพลภาพ แบ่งออกเป็น 5 ประเภทใหญ่ๆ ได้แก่ การมองเห็น การเคลื่อนไหว การพูด การรับรู้ และการได้ยิน

เราทุกคนต้องการบริการคุณภาพสูง มาส่งของกันด้วย