การช่วยสำหรับการเข้าถึงเว็บ 101: การออกแบบเพื่อทุกคน

เผยแพร่แล้ว: 2022-01-10

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

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

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

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

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

ทำความเข้าใจผู้ใช้ของคุณ

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

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

อาจลองใช้หน้าจากสาขาวิชาศึกษา หลักการออกแบบสากลเป็นข้อมูลอ้างอิงที่ดี

คิดว่าUX

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

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

การเปลี่ยนแปลงที่เรียบง่าย

ตัวอย่างเช่น การเปลี่ยนแปลงที่ง่ายที่สุดในการใช้งานคือวิธีที่คุณใช้แท็กเน้น

ด้วยสายตา ไม่มีความแตกต่างระหว่าง <b> และ <strong> และ <i> ก็ไม่แตกต่างไปจาก <em> แต่สำหรับผู้ทุพพลภาพ แท็กเหล่านี้สามารถเปลี่ยนประสบการณ์ของผู้ใช้ได้อย่างรวดเร็ว

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

แต่มันไม่ง่ายเหมือนกับการแทนที่ทั้งหมด <b> ด้วย <strong> โดยสุ่มสี่สุ่มห้า ส่วนหัวจำนวนมากใช้ข้อความตัวหนาเพื่อตัดกัน ตัวอย่างเช่น อาจไม่ดีที่สุดสำหรับผู้ใช้ที่มีความทุพพลภาพที่จะสัมผัสแท็ก <strong> ที่นี่ คิดว่า " ข้อความนี้ จำเป็นต้องพูดแตกต่างออกไปหรือไม่เพื่อให้ผู้ใช้ได้สัมผัสกับความหมายที่สมบูรณ์" หากไม่เป็นเช่นนั้น ให้ลองวาง <strong> หรือ <em> เว้นแต่จำเป็นจริงๆ

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

การออกแบบสำหรับผู้พิการทางสายตา

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

พิจารณาองค์ประกอบเหล่านี้:

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการรวมองค์ประกอบสำหรับผู้ใช้ที่มีความบกพร่องทางสายตา โปรดดู American Foundation for the Blind

การออกแบบสำหรับผู้บกพร่องทางการได้ยิน

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

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

สำหรับหลักเกณฑ์คำอธิบายภาพโดยเฉพาะ สามารถดูคำแนะนำของ National Association of the Deaf ได้ที่นี่

การออกแบบสำหรับโรคลมบ้าหมูที่ไวต่อแสง

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

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

การออกแบบสำหรับผู้บกพร่องด้านการเคลื่อนไหว

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

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

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

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

สร้างตัวเลือกเว็บไซต์ "พื้นฐาน"

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

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

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

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