เราทราบดีว่าการออกแบบให้ปรับเปลี่ยนตามอุปกรณ์ได้เพื่อให้ได้รับประสบการณ์การใช้งานบนอุปกรณ์ที่หลากหลายที่ดีที่สุดนั้นก็เป็นความคิดที่ดี แต่การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ก็ช่วยให้บรรลุเป้าหมายด้านการเข้าถึงได้เช่นกัน
ลองพิจารณาไซต์ที่คล้ายกับ Udacity:
ผู้ใช้ที่มีสายตาเลือนรางซึ่งมีปัญหาในการอ่านตัวอักษรขนาดเล็กอาจซูมหน้าเว็บได้มากถึง 400% เนื่องจากเว็บไซต์ออกแบบมาให้ตอบสนองตามอุปกรณ์ UI จะจัดเรียงตัวเองใหม่สำหรับ "วิวพอร์ตที่เล็กลง" (จริงๆ แล้วสำหรับหน้าที่ใหญ่ขึ้น) ซึ่งเหมาะอย่างยิ่งสำหรับผู้ใช้เดสก์ท็อปที่ต้องการการขยายหน้าจอ และผู้ใช้โปรแกรมอ่านหน้าจอบนอุปกรณ์เคลื่อนที่ด้วย ถือว่าได้ประโยชน์ทั้งสองฝ่าย นี่คือหน้าเดียวกันที่ขยายเป็น 400%
อันที่จริง เพียงแค่ออกแบบให้ตอบสนองตามอุปกรณ์ เราก็เห็นกฎ 1.4.4 ของรายการตรวจสอบ WebAIM ซึ่งระบุว่าหน้า "... ควรอ่านง่ายและใช้งานได้เมื่อขนาดข้อความเพิ่มเป็น 2 เท่า"
เกี่ยวกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ทั้งหมดอยู่นอกเหนือขอบเขตของคู่มือนี้ แต่ต่อไปนี้คือสรุปประเด็นสำคัญที่จะเป็นประโยชน์ต่อประสบการณ์การใช้งานที่ปรับเปลี่ยนตามอุปกรณ์ และช่วยให้ผู้ใช้เข้าถึงเนื้อหาของคุณได้ดีขึ้น
ใช้เมตาแท็กวิวพอร์ต
<meta name="viewport" content="width=device-width, initial-scale=1.0">
การตั้งค่า width=device-width จะจับคู่ความกว้างของหน้าจอเป็นพิกเซลที่ไม่ขึ้นอยู่กับอุปกรณ์ และการตั้งค่า initial-scale=1 จะสร้างความสัมพันธ์แบบ 1:1 ระหว่างพิกเซล CSS และพิกเซลที่ขึ้นอยู่กับอุปกรณ์
การทำเช่นนี้จะบอกให้เบราว์เซอร์ปรับขนาดเนื้อหาของคุณให้พอดีกับหน้าจอ
เพื่อที่ผู้ใช้จะได้ไม่เพียงแค่เห็นข้อความจำนวนมาก
โปรดดูปรับขนาดเนื้อหาให้พอดีกับวิวพอร์ตเพื่อเรียนรู้เพิ่มเติม
อนุญาตให้ผู้ใช้ซูม
คุณใช้เมตาแท็กวิวพอร์ตเพื่อป้องกันการซูมได้โดยการตั้งค่า maximum-scale=1 หรือ user-scaleable=no
โปรดหลีกเลี่ยงการดำเนินการดังกล่าวและให้ผู้ใช้ซูมเข้าหากจำเป็น
ออกแบบได้อย่างยืดหยุ่น
หลีกเลี่ยงการกําหนดเป้าหมายขนาดหน้าจอที่เฉพาะเจาะจงและใช้ตารางกริดที่ยืดหยุ่นแทน เพื่อเปลี่ยนแปลงเลย์เอาต์เมื่อเนื้อหาเป็นไปตามข้อความ จากตัวอย่าง Udacity ตามตัวอย่างข้างต้น วิธีนี้ช่วยรับประกันว่าการออกแบบจะตอบสนองได้ว่าพื้นที่ที่ลดลงนั้นเป็นผลมาจากหน้าจอขนาดเล็กหรือระดับการซูมที่สูงขึ้น
อ่านข้อมูลเพิ่มเติมเกี่ยวกับเทคนิคเหล่านี้ได้ในบทความพื้นฐานการออกแบบเว็บที่ตอบสนองตามอุปกรณ์
ใช้หน่วยสัมพัทธ์สำหรับข้อความ
ในการใช้ตารางกริดแบบยืดหยุ่นให้เกิดประโยชน์สูงสุด ให้ใช้หน่วยสัมพัทธ์ เช่น em หรือ rem กับขนาดข้อความ แทนการใช้ค่าพิกเซล บางเบราว์เซอร์รองรับการปรับขนาดข้อความเฉพาะในค่ากำหนดของผู้ใช้เท่านั้น และหากคุณใช้ค่าพิกเซลสำหรับข้อความ การตั้งค่านี้จะไม่มีผลกับสำเนาของคุณ อย่างไรก็ตาม หากคุณใช้หน่วยที่เกี่ยวข้องมาตลอด สำเนาเว็บไซต์จะอัปเดตเพื่อแสดงความต้องการของผู้ใช้
วิธีนี้จะช่วยให้ทั้งเว็บไซต์จัดเรียงใหม่ได้เมื่อผู้ใช้ซูม ซึ่งเป็นการมอบประสบการณ์การอ่านที่ผู้ใช้จําเป็นต้องใช้ในเว็บไซต์
หลีกเลี่ยงการยกเลิกการเชื่อมต่อมุมมองภาพจากลำดับแหล่งที่มา
ผู้เข้าชมที่กดแท็บผ่านเว็บไซต์ของคุณด้วยแป้นพิมพ์จะทำตามลำดับของเนื้อหาในเอกสาร HTML เมื่อใช้เมธอดเลย์เอาต์สมัยใหม่ เช่น Flexbox และ Grid คุณสามารถทำให้การแสดงผลภาพไม่ตรงกับลำดับแหล่งที่มาได้ง่ายๆ ซึ่งอาจทำให้คนที่ใช้แป้นพิมพ์เลื่อนไปรอบๆ หน้าได้อย่างไม่คาดคิด
อย่าลืมทดสอบการออกแบบที่เบรกพอยท์แต่ละจุดด้วยการกด Tab ผ่านเนื้อหา การไหลผ่านหน้าเว็บยังเหมาะสมอยู่ไหม
อ่านเพิ่มเติมเกี่ยวกับยกเลิกการเชื่อมต่อการแสดงแหล่งที่มาและภาพ
ดูแลด้วยคำใบ้เชิงพื้นที่
เวลาเขียนไมโครสำเนา ให้หลีกเลี่ยงการใช้ภาษาที่ระบุตำแหน่งขององค์ประกอบบนหน้าเว็บ เช่น การอ้างอิง "ทางด้านซ้าย" ไม่สมเหตุสมผลสำหรับเวอร์ชันอุปกรณ์เคลื่อนที่เมื่อการนําทางอยู่ที่ด้านบนของหน้าจอ
ตรวจสอบว่าเป้าหมายการแตะมีขนาดใหญ่พอในอุปกรณ์หน้าจอสัมผัส
ในอุปกรณ์หน้าจอสัมผัส ตรวจสอบว่าเป้าหมายการแตะของคุณมีขนาดใหญ่พอที่จะเปิดใช้งานได้ง่ายโดยไม่ต้องกดลิงก์อื่นๆ ขนาดที่เหมาะสมสำหรับองค์ประกอบที่แตะได้คือ 48 พิกเซล โปรดอ่านคำแนะนำเพิ่มเติมเกี่ยวกับเป้าหมายการแตะ