การจัดลําดับเนื้อหาใหม่

ลำดับของเนื้อหาในเอกสารมีความสำคัญต่อการเข้าถึงได้ง่ายของเว็บไซต์ โปรแกรมอ่านหน้าจอจะอ่านเนื้อหาตามลำดับเอกสาร โดยใช้องค์ประกอบ 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 ในเครื่องมือดังกล่าว คุณดูได้ว่าโฟกัสต้องข้ามเลย์เอาต์อย่างไร

ภาพหน้าจอของเครื่องมือข้อมูลเชิงลึกเกี่ยวกับการช่วยเหลือพิเศษที่แสดงลำดับรายการที่สับสน

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

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

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