การเข้าถึงอาจไม่ใช่สิ่งแรกที่คุณนึกถึงเมื่อวางแผนเว็บไซต์ใหม่ แต่เป็นสิ่งสำคัญที่สุดประการหนึ่งที่ต้องทำให้ถูกต้อง เมื่อทำอย่างถูกต้อง การออกแบบที่เข้าถึงได้มักจะไม่มีใครสังเกตเห็น — แต่หากทำผิด อาจสร้างความรำคาญให้กับผู้ใช้และทำให้เว็บไซต์ของคุณใช้งานไม่ได้!
ด้านล่างนี้ฉันได้ระบุประเด็นสำคัญบางประการที่ควรคำนึงถึงก่อนออกแบบโครงการต่อไปของคุณ
การเลือกสี
หากการเลือกสีของคุณขาดคอนทราสต์ที่เพียงพอ เนื้อหาจะอ่านได้ยาก โดยเฉพาะสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น
แหล่งข้อมูลที่น่าทึ่งที่นี่คือ WebAIM Contrast Checker ไซต์นี้อนุญาตให้คุณเลือกการผสมสีพื้นหลังและพื้นหน้า และจะบอกคุณว่ามีคอนทราสต์เพียงพอหรือไม่
สิ่งสำคัญคือต้องทดลองใช้การผสมสีต่างๆ รวมทั้งพิจารณาถึงผลกระทบที่ตัวเลือกบางอย่างอาจมีต่อผู้ใช้ที่ตาบอดสี
ขนาดตัวอักษร
เมื่อวางข้อความใดๆ บนหน้า จะต้องแสดงให้ชัดเจน ท้ายที่สุดแล้วทำไมต้องเขียนอะไรบางอย่างในเมื่อไม่มีใครอ่านได้?
มีพารามิเตอร์จำนวนหนึ่งที่คุณสามารถใช้เพื่อควบคุมสิ่งนี้: ประเภทแบบอักษร ขนาดแบบอักษร ระยะห่างระหว่างตัวอักษร ระยะห่างบรรทัด ฯลฯ
ประการแรก คุณควรตรวจสอบให้แน่ใจว่าแบบอักษรที่เลือกนั้นปรับให้เข้ากับขนาดหน้าจอที่แตกต่างกันได้ วิธีหนึ่งในการทำเช่นนี้คือการตั้งค่าแบบอักษรของคุณให้ใช้ "ขนาดสัมพันธ์" (เช่น ใช้ "1.5rem" เป็นพารามิเตอร์แทน "20px") จากนั้น คุณสามารถสร้างคิวรีสื่อสองสามรายการเพื่อเพิ่มประสิทธิภาพหน่วยฐานและควบคุมขนาดของไซต์ทั้งหมดได้
แม้ว่าอาจดูเป็นเรื่องยากที่จะทราบว่าควรใช้ระยะห่างหรือขนาดใด แต่ก็มี “แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG)” ที่ระบุมาตรฐานสำหรับทั้งหมดนี้ — เช่น ขนาดตัวอักษรมากกว่า 18px และระยะห่างบรรทัด 1.5
การโต้ตอบที่ใช้งานง่าย
เมื่อเลื่อนหน้าเว็บ มีหลายวิธีที่ทำให้การออกแบบเป็นเรื่องง่าย หากเราเห็นข้อความที่เป็นสีน้ำเงินและขีดเส้นใต้จิตใจของเราเชื่อมโยงกับลิงก์ก็จะรู้ว่าต้องลองคลิกดู หากเคอร์เซอร์ของเราวางเมาส์เหนือกล่องและเปลี่ยนเป็นพอยน์เตอร์ เราจะรู้สึกว่าเนื้อหานั้นควรเป็นเนื้อหาที่สามารถคลิกได้ สิ่งสำคัญคือต้องใช้การตอบสนองตามสัญชาตญาณเหล่านี้เมื่อออกแบบไซต์ เพื่อให้ผู้ใช้ไม่หงุดหงิดเมื่อค้นหาลิงก์
อีกวิธีหนึ่งที่สามารถนำมาใช้ได้คือการใช้สถานะ “::focus” เพื่อแสดงว่าฟิลด์ใดที่ใช้งานอยู่ในปัจจุบัน สิ่งนี้มีประโยชน์สำหรับผู้ใช้ที่กำลังนำทางโดยไม่ต้องใช้เมาส์ คุณยังสามารถตั้งค่าสถานะให้แสดงข้อผิดพลาดหรือคำเตือนเมื่อมีการกรอกข้อมูลในช่องป้อนข้อมูลผิด
โครงสร้างหน้า
วิธีที่คุณจัดโครงสร้างเนื้อหามีผลกระทบอย่างมากต่อความง่ายในการเข้าใจ การดูแลให้ส่วนหัวมีการไหลอย่างเหมาะสม (เริ่มต้นด้วย h1 และไล่ไปจนถึง h6) จะช่วยให้ผู้ใช้ทราบว่าพวกเขากำลังเข้าสู่ส่วนใหม่เมื่อใด หรือย่อหน้าถัดไปเป็นส่วนย่อยของส่วนสุดท้ายหรือไม่
การจัดวางข้อความก็มีความสำคัญเช่นกัน ในฐานะคนที่เคยชอบเนื้อหาที่มีเหตุผล จริงๆ แล้ววิธีนี้เป็นวิธีการจัดตำแหน่งที่คุณควรเลือกเป็นลำดับสุดท้าย เนื่องจากการเว้นวรรคคำที่ไม่สม่ำเสมออาจทำให้อ่านเนื้อหาได้ยาก
ตามมาตรฐาน คุณควรตั้งเป้าให้มีอักขระ 45–85 ตัวต่อบรรทัดเมื่อโพสต์ข้อความบนเว็บไซต์ของคุณ (ตามที่ระบุไว้ใน WCAG — ลิงก์อยู่ในส่วนด้านบน) เพื่อให้บรรลุเป้าหมายนี้ คุณสามารถใช้หน่วย “ch” เพื่อคงข้อความที่เหมาะสมที่สุดต่อบรรทัดได้ แม้ว่าเว็บไซต์ของคุณจะถูกปรับขนาดก็ตาม
ข้อความแสดงแทน
ข้อความแสดงแทนจะแสดงบริบทของรูปภาพแก่ผู้ใช้ที่มีความบกพร่องในการมองเห็น เป็นสิ่งสำคัญเสมอที่จะต้องกรอกข้อมูลบางอย่างลงในฟิลด์ข้อความแสดงแทนเพื่อให้โปรแกรมอ่านหน้าจอและผู้ใช้ที่มีความบกพร่องในการมองเห็นสามารถเพลิดเพลินกับเว็บไซต์ของคุณได้อย่างเต็มที่ ทำได้โดยการเพิ่มแอตทริบิวต์ alt ให้กับโค้ด HTML ของคุณ:
<img src="./images/sunflower" alt="Sunflower in Bloom">
ข้อความที่ใช้ควรกระชับและควรอธิบายรูปภาพอย่างชัดเจน หากเนื้อหารูปภาพไม่สำคัญหรือไม่สามารถอธิบายได้ ให้ใช้ช่องว่าง (“ ”) เพื่อให้ผู้อ่านที่ใช้ Alt Text รู้ว่าคำอธิบายจะไม่ถูกลืม
การตั้งค่าภาษา
นี่อาจดูเหมือนเป็นจุดเล็กๆ แต่สิ่งสำคัญคือต้องประกาศใน HTML ว่าคุณกำลังใช้ภาษาใด ซึ่งช่วยให้เบราว์เซอร์ (หรืออุปกรณ์ช่วยการเข้าถึงใดๆ เช่น โปรแกรมอ่านหน้าจอ) ทราบว่าเว็บไซต์นั้นเขียนด้วยภาษาใด
<!DOCTYPE HTML> <HTML lang="en">
การประกาศนี้ควรอยู่ในแท็ก HTML เสมอ ไม่ใช่แท็ก Body เพื่อที่จะรวมการแยกวิเคราะห์ข้อมูลเมตาใด ๆ ภายในส่วน ‹head›
การตั้งค่าการพิมพ์
ฉันแน่ใจว่าคุณคงเคยเจอหน้าเว็บที่แม้จะง่ายต่อการนำทางบนหน้าจอ แต่เมื่อพยายามพิมพ์เนื้อหาเหล่านั้นจะอ่านไม่ออก แถบด้านข้างหรือส่วนหัวขนาดใหญ่เติมเต็มพื้นที่พิมพ์และบดบังเนื้อหาที่คุณต้องการดูจริงๆ
สามารถเขียนคำสั่ง '@media print' เพื่อลบองค์ประกอบที่ไม่ต้องการออก และรับประกันว่าจะมีการแยกวิเคราะห์เฉพาะเนื้อหาที่สามารถพิมพ์ได้เท่านั้น ตัวอย่างเช่น คุณสามารถตั้งค่าการสืบค้นเพื่อลบแถบด้านข้าง ลิงก์นำทาง หรือแม้แต่แสดงแหล่งที่มาของลิงก์ที่อ้างอิงบนเพจ
ฉันหวังเป็นอย่างยิ่งว่าบทความนี้จะช่วยคุณได้ หากคุณสนใจที่จะนำสิ่งนี้ไปใช้กับโครงการของคุณมากขึ้น ฉันขอแนะนำให้ตรวจสอบลิงก์ด้านล่างไปยังหน้าของ A11y Coffee ซึ่งมีรายละเอียดเกี่ยวกับวิธีต่างๆ ทั้งหมดในการทำให้ไซต์ของคุณเข้าถึงได้มากขึ้น
หากคุณชอบโพสต์นี้และต้องการอ่านเพิ่มเติม โปรดตรวจดูโปรไฟล์ของฉันสำหรับโพสต์ที่คล้ายกัน ลองสมัครเป็นสมาชิกขนาดกลางเพื่อเข้าถึงแนวคิดและนักเขียนที่ดีที่สุดได้อย่างไม่จำกัด
ขอบคุณที่อ่าน!
เนื้อหาเพิ่มเติมได้ที่ PlainEnglish.io ลงทะเบียนเพื่อรับ จดหมายข่าวรายสัปดาห์ฟรี ของเรา ติดตามเราบน Twitter และ LinkedIn เข้าร่วม ความไม่ลงรอยกันของชุมชน ของเรา
