การออกแบบที่ยอดเยี่ยมส่งผลต่อการเข้าถึงเว็บไซต์อย่างไร

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

การเข้าถึงคืออะไร?

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

ผู้ฟังที่หลากหลายนี้ “ขยายไปถึงผู้ใดก็ตามที่กำลังประสบกับความทุพพลภาพถาวร ชั่วคราว หรือตามสถานการณ์ เช่น มีแขนข้างเดียวเป็นอาการถาวร แขนที่บาดเจ็บเป็นเพียงชั่วคราว และการอุ้มทารกไว้ในอ้อมแขนข้างเดียวถือเป็นสถานการณ์ — ในแต่ละกรณี ผู้ใช้สามารถทำงานให้เสร็จได้ด้วยมือเดียว” (Avinash Kaur, 2018).

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

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

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

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

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

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

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

เราจะเจาะลึกใน 5 พื้นที่ใหญ่:

1. ความคมชัดของสี
2. ข้อความสำรอง
3. สถานะโฟกัส
4. แบบฟอร์ม
5. วิชาการพิมพ์

ความคมชัดของสี

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

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

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

อัตราส่วนคอนทราสต์ 4.5 ต่อ 1 เป็นไปตามระดับความสอดคล้อง AA (จากสามระดับ: A, AA และ AAA) แต่จะเปลี่ยนแปลงตามขนาดแบบอักษรและระดับความสอดคล้องที่คุณต้องการบรรลุ ฟอนต์ขนาดใหญ่ต้องการอัตราส่วนคอนทราสต์ที่เล็กกว่าเพียง 3 ต่อ 1 หากประเภทเป็น 18 pt (หรือ 14 pt เป็นตัวหนา)

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

ข้อความสำรอง

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

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

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

สถานะโฟกัส

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

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

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

แบบฟอร์ม

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

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

วิชาการพิมพ์

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

อย่างที่คุณเห็น การอ่าน 9 pt เป็นเรื่องยาก

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

• ระยะห่างระหว่างตัวอักษร: x0.12 ขนาดตัวอักษร
• ระยะห่างระหว่าง คำ : x0.16 ขนาดตัวอักษร
• ระยะห่าง บรรทัด : x1.5 ขนาดตัวอักษร
• ระยะห่าง ย่อหน้า : x2 ขนาดตัวอักษร

บทสรุป

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

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

หากคุณต้องการความช่วยเหลือเกี่ยวกับครีเอทีฟโฆษณา อย่าลังเลที่จะติดต่อเรา