ลำดับของเนื้อหาในเอกสารมีความสำคัญต่อการเข้าถึงได้ง่ายของเว็บไซต์ โปรแกรมอ่านหน้าจอจะอ่านเนื้อหาตามลำดับเอกสาร โดยใช้องค์ประกอบ HTML ที่คุณเลือกเพื่อให้ความหมายแก่เนื้อหานั้น ผู้ที่ไปยังส่วนต่างๆ ของเว็บไซต์โดยใช้แป้นพิมพ์แทนที่จะใช้หน้าจอสัมผัสหรือเมาส์จะแท็บไปรอบๆ เอกสาร ซึ่งหมายความว่าองค์ประกอบเหล่านี้จะข้ามจากองค์ประกอบที่ใช้งานอยู่ไปยังองค์ประกอบที่ใช้งานอยู่ โดยแท็บไปมาระหว่างลิงก์และช่องแบบฟอร์มอีกครั้งตามลำดับที่มีอยู่ในเอกสาร
การเริ่มต้นด้วยเอกสารที่มีโครงสร้างดีและการใช้องค์ประกอบ HTML ที่เหมาะสมทั้งหมดจึงเป็นส่วนสำคัญในการสร้างเว็บไซต์ที่เข้าถึงได้ง่าย อย่างไรก็ตาม คุณอาจยกเลิกสิ่งที่ดีนั้นบางส่วนได้เมื่อเริ่มใช้ CSS มาดูสาเหตุกัน
แหล่งที่มาเทียบกับลำดับภาพ
การนำทางในเว็บไซต์มักถูกระบุเป็นรายการลิงก์ จากนั้นคุณสามารถใช้ Flexbox เพื่อเปลี่ยนรายการเหล่านี้ให้เป็นแถบแนวนอน ในตัวอย่าง Glitch ด้านล่าง เราได้สร้างรูปแบบที่ใช้กันโดยทั่วไปนี้ไว้ คลิกเข้าไปในตัวอย่าง แล้วแตะ Tab ระหว่างลิงก์ โฟกัสจะย้ายไปในทิศทางที่สมเหตุสมผลจากซ้ายไปขวา ตามลำดับที่เราอ่านเป็นภาษาอังกฤษ
หากคุณสร้างรูปแบบเช่นนี้ขึ้นแล้วระบบขอให้คุณย้ายตัวเลือกติดต่อเราซึ่งเป็นลำดับที่ 2 ของแหล่งข้อมูล มาต่อท้าย คุณสามารถใช้พร็อพเพอร์ตี้ order ซึ่งใช้งานได้ใน Flexbox
ลองใช้การกด Tab ผ่านรายการต่างๆ ในตัวอย่างด้านล่าง ซึ่งใช้พร็อพเพอร์ตี้ order เพื่อจัดเรียงรายการใหม่
โฟกัสจะข้ามไปยังรายการสุดท้ายแล้วย้อนกลับอีกครั้ง ตราบใดที่ลำดับแท็บยังกังวลอยู่ว่ารายการนั้นเป็นรายการที่ 2 แต่พอสังเกตดู นี่เป็นรายการสุดท้าย
ตัวอย่างด้านบนจะไฮไลต์ปัญหาที่เราพบหากเราจัดเรียงและจัดเรียงเนื้อหาใหม่โดยใช้ CSS หากคุณพบปัญหานี้ สิ่งที่ควรทําคือเปลี่ยนลําดับในแหล่งที่มาแทนการใช้ CSS
พร็อพเพอร์ตี้ CSS ใดอาจทำให้เกิดการจัดเรียงใหม่
วิธีการใดๆ ในการจัดวางที่อนุญาตให้คุณย้ายองค์ประกอบไปรอบๆ อาจทำให้เกิดปัญหานี้ได้ คุณสมบัติ CSS ต่อไปนี้มักทำให้เกิดปัญหาในการจัดเรียงเนื้อหาใหม่
- การใช้
position: absoluteและการนำรายการออกมาจากภาพ - พร็อพเพอร์ตี้
orderในเลย์เอาต์ Flexbox และตารางกริด - ค่า
row-reverseและcolumn-reverseสำหรับflex-directionใน Flexbox - ค่า
denseสำหรับgrid-auto-flowในเลย์เอาต์ตารางกริด - การวางตำแหน่งตามชื่อบรรทัดหรือหมายเลข หรือมี
grid-template-areasในเลย์เอาต์แบบตารางกริด
ในตัวอย่างถัดไปนี้ ฉันได้สร้างเลย์เอาต์โดยใช้ตารางกริด CSS และจัดตำแหน่งรายการโดยใช้หมายเลขบรรทัดโดยไม่พิจารณาว่ารายการจะอยู่ที่ตำแหน่งใดในแหล่งที่มา
ลองใช้แท็บรอบๆ ตัวอย่างนี้ แล้วดูว่าโฟกัสเปลี่ยนไปอย่างไร ซึ่งทำให้ผู้ใช้สับสนมาก โดยเฉพาะอย่างยิ่งหากเป็นหน้าเว็บที่ยาว
การทดสอบเพื่อหาปัญหา
การทดสอบง่ายๆ คือการใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ ของหน้า คุณดูข้อมูลได้ทั้งหมดไหม มีการกระโดดแปลกๆ เกิดขึ้นไหม
ถ้าต้องการดูการสาธิตการจัดเรียงเนื้อหาอีกครั้ง ลองใช้เครื่องมือตรวจสอบ "ตัวกั้นแท็บ" ในส่วนขยายข้อมูลเชิงลึกเกี่ยวกับการช่วยเหลือพิเศษสำหรับ Chrome รูปภาพด้านล่างแสดงตัวอย่างตารางกริด CSS ในเครื่องมือดังกล่าว คุณดูได้ว่าโฟกัสต้องข้ามเลย์เอาต์อย่างไร
การจัดลำดับเนื้อหาใหม่และการออกแบบเว็บที่ตอบสนองตามอุปกรณ์
หากคุณมีการนำเสนอเนื้อหาเพียงครั้งเดียว การจัดแหล่งข้อมูลตามลำดับที่สมเหตุสมผลและแสดงให้เห็นว่าในเลย์เอาต์มักจะไม่ใช่เรื่องยาก อาจทำได้ยากขึ้นเมื่อคุณพิจารณาเลย์เอาต์ในจุดพักที่ต่างกัน ตัวอย่างเช่น การย้ายองค์ประกอบไปที่ด้านล่างของเลย์เอาต์บนหน้าจอขนาดเล็กอาจเป็นเรื่องที่เหมาะสม
ยังไม่มีวิธีแก้ปัญหาที่ดีในขณะนี้ ในสถานการณ์ส่วนใหญ่ การพัฒนา "อุปกรณ์เคลื่อนที่เป็นอันดับแรก" จะช่วยให้คุณจัดระเบียบแหล่งที่มาและเลย์เอาต์ได้ถูกต้อง ตัวเลือกที่คุณเลือกเกี่ยวกับลำดับความสำคัญบนอุปกรณ์เคลื่อนที่มักจะเป็นตัวเลือกที่ชัดเจนสำหรับเนื้อหาโดยทั่วไป สิ่งสำคัญคือการตระหนักว่ามีความเป็นไปได้ที่จะมีการจัดเรียงเนื้อหาประเภทนี้ใหม่หรือไม่ และทดสอบว่าประสบการณ์ในช่วงท้ายจะไม่รบกวนมากเกินไปในแต่ละเบรกพอยท์