เลิกใช้คลาส .active หลอกสกรีนรีดเดอร์ หันมาใช้แอตทริบิวต์ HTML กันดีกว่า

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

ปัญหาหลักคือคลาสอย่าง .active ไม่มี语义 (ความหมายในตัว) ติดมาด้วย เบราว์เซอร์ไม่มีทางรู้เลยว่าคลาสนี้หมายถึงหน้าปัจจุบันที่ผู้ใช้งานกำลังเปิดอยู่ เช่นเดียวกับโปรแกรมอ่านหน้าจอ (screen reader) ที่มองเห็นมันเป็นเพียงข้อความสตริงธรรมดา ความเข้าใจนี้เกิดขึ้นได้ก็เพราะนักพัฒนาตกลงกันเองใน CSS ซึ่งความสัมพันธ์นี้จะพังทันทีเมื่อมีคนเปลี่ยนชื่อคลาส ลืมอัปเดตไฟล์ JavaScript ที่คอยสลับสถานะ หรือเขียนคอมโพเนนต์ใหม่ขึ้นมาโดยไม่รู้ถึงข้อตกลงเดิม

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

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