10 วิธีในการออกแบบเว็บไซต์ของคุณเพื่อการช่วยสำหรับการเข้าถึง

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

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

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

เหตุใดการช่วยสำหรับการเข้าถึงจึงสำคัญ

ในปี 2010 ผู้คน 10% ในประเทศที่พัฒนาแล้วมีความบกพร่องในการพิมพ์ ตัวเลขดังกล่าวคือ 15% ในประเทศไม่พัฒนา

ในออสเตรเลีย ความสามารถในการเข้าถึงมีความสำคัญมากพอที่ฉันจะนำคุณขึ้นศาลได้หากไซต์ของคุณไม่สามารถเข้าถึงได้ ตกใจ?

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

เเพง? ไม่ อันที่จริงแล้ว มันกลับมาสู่มาตรฐานการออกแบบ เพราะนี่เป็นสิ่งพื้นฐานที่แท้จริง

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

#1. ทำให้ไซต์ของคุณใช้งานง่าย

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

1. ทำให้เว็บไซต์อ่านและเข้าใจง่าย
2. ทำให้ไซต์ง่ายต่อการนำทาง
3. ทำให้เว็บไซต์ใช้งานง่ายบนอุปกรณ์มือถือ

วิธีนี้จะช่วยให้คุณเข้าถึงได้ง่ายยิ่งขึ้น และยังช่วยให้เครื่องมือค้นหารักไซต์ของคุณอีกด้วย!

โปรแกรมอ่านหน้าจอที่ฉันทดสอบไซต์ของฉันนั้นเหมือนกับโรบ็อตของ Google (ยกเว้นเทคโนโลยีที่มองไม่เห็นมาก่อน)

#2. ทดสอบด้วยซอฟต์แวร์การช่วยการเข้าถึง

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

• Apple (iOS) ใช้ VoiceOver;
• Android ใช้ Talkback;
• Windows ใช้โปรแกรมผู้บรรยาย

นักออกแบบเว็บไซต์เกือบทั้งหมดมีเมนูในเทมเพลต แต่ 95% ไม่สามารถอ่านได้ด้วยเทคโนโลยีข้างต้น! บริการการเข้าถึงข้อมูลเหล่านี้ส่วนใหญ่ไม่รู้จักเมนูที่มีอยู่ เนื่องจากมีการเข้ารหัสอย่างไม่ถูกต้อง ส่วนใหญ่ปัญหาคือว่าเมนูมีรหัสไม่ดีหรือติดแท็กไม่ชัดเจน

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

#3. อย่าเขียนทั้งหมดเป็นตัวพิมพ์ใหญ่

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

นี่เป็นการทดสอบทางวิทยาศาสตร์และพิสูจน์แล้วเพราะตัวพิมพ์ใหญ่ทั้งหมดนั้นยากสำหรับทุกคนที่จะอ่าน!

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

#4. อธิบายลิงค์ของคุณให้ชัดเจน

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

#5. ใช้รูปแบบการตัดกันที่ดี

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

#6. ใช้ลิงก์ 'ข้ามไปยังเนื้อหา'

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

โอ้ และอย่าซ่อนลิงก์ไว้นอกจอ! ผู้พิการทางสายตามักใช้แว่นขยายและค้นหาลิงก์เหล่านั้นด้วยตนเอง (ไม่ใช่ผ่านแป้นพิมพ์)

#7. หยุดใช้ป๊อปอัป

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

หากคุณกำลังจะใช้ป๊อปอัป:

• ทำให้สามารถปิดได้ด้วยปุ่ม 'esc'
• ทำให้ซอฟต์แวร์ของเราสามารถอ่านกล่องข้อความได้ ไม่ใช่ข้อความด้านหลัง
• ให้รายละเอียดวิธีอื่นในการค้นหาเนื้อหาหรือกรอกแบบฟอร์ม - 'หรือไปที่หน้า xxxx ของเราสำหรับรายละเอียดเพิ่มเติม'

#8. ตัวปรับขนาดข้อความอาจมีประโยชน์ในบางสถานการณ์

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

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

#9. ใช้ไอคอนแบบอักษรแทนไอคอนรูปภาพ

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

#10. เพิ่มการถอดเสียงวิดีโอ

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

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

ทรัพยากรการเข้าถึง

ไซต์เหล่านี้มีหลักเกณฑ์และเครื่องมือในการตรวจสอบไซต์ของคุณ:

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

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

• การเข้าถึงงานด้วยคำพูด (JAWS)
• Ai squared เสนอรุ่นทดลองใช้ฟรี
• Window Eyes - โปรแกรมอ่านหน้าจอ
• NV Access นำเสนอโปรแกรมอ่านหน้าจอ Non Visual Desktop Aid (NVDA) ฟรีทั้งหมด

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

บทสรุป

เช่นเดียวกับสิ่งอื่น ๆ มีความสมดุลระหว่างการปฏิบัติตามหน้าที่และการปฏิบัติตามกฎอย่างเคร่งครัด ไซต์ลูกค้าของฉันไม่สามารถเข้าถึงได้ 100% / สอดคล้องกับ W3C พวกเขาสามารถเข้าถึงได้ - และเครื่องมือค้นหาที่เป็นมิตร พวกเขามีเหตุผลและขัดแย้งกัน แต่ยังมีสไตล์และคุณลักษณะสำหรับผลกระทบ

มีคนจำนวนกี่ล้านคนที่มีปัญหาด้านการพิมพ์ในโลกนี้? มีลูกค้าที่มีศักยภาพกี่ราย?

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