3 เทคนิค HTML พื้นฐานที่มักถูกมองข้าม แต่กระทบ SEO และ Accessibility

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

หนึ่งในปัญหาที่พบบ่อยคือการละเลย 3 จุดสำคัญ ได้แก่ alt สำหรับรูปภาพ, label สำหรับฟอร์ม และ lang บนแท็ก html ซึ่งแต่ละจุดอาจดูเล็กน้อย แต่เมื่อรวมกันแล้วสามารถทำให้กูเกิลเข้าใจคอนเทนต์ได้ไม่เต็มที่ และทำให้ผู้ใช้บางกลุ่มใช้งานเว็บไซต์ได้ลำบากขึ้นอย่างมีนัยสำคัญ

1) alt ในรูปภาพ: ข้อความสั้นๆ ที่สำคัญกว่าที่คิด

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

สิ่งที่พลาดกันบ่อย

• ใส่ข้อความทั่วไป เช่น photo, image, pic
• เขียนยาวเกินไปจนกลายเป็นย่อหน้า
• ยัดคีย์เวิร์ดซ้ำๆ เพื่อหวังผล SEO จนดูเป็นสแปม

แนวทางที่ถูกต้อง

หากรูปภาพมีข้อมูลหรือมีความหมาย ควรเขียน alt ให้สั้น กระชับ และตรงประเด็น เช่น

• alt="ตารางเปรียบเทียบแพ็กเกจ Pro และ Team"

แต่ถ้ารูปนั้นมีหน้าที่แค่ตกแต่ง ไม่ได้เพิ่มเนื้อหาหรือความหมาย ควรใช้ค่าเป็นค่าว่าง เช่น

• alt=""

วิธีนี้จะช่วยให้ screen reader ข้ามรูปดังกล่าวไป ไม่สร้างความรบกวนแก่ผู้ใช้งาน

กรณีพิเศษ: รูปที่เป็นปุ่มหรือลิงก์

หากรูปภาพถูกใช้เป็นปุ่มหรือเป็นลิงก์ เช่น ไอคอนรถเข็น สิ่งสำคัญคือ alt ควรอธิบาย “หน้าที่” ไม่ใช่ “หน้าตา” เช่น

• alt="ไปที่ตะกร้าสินค้า"

แนวคิดนี้ช่วยให้ผู้ใช้เข้าใจได้ทันทีว่ากดแล้วจะเกิดอะไรขึ้น

2) label กับ input: ฟอร์มที่ดีต้องอ่านง่ายและใช้งานง่าย

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

ยิ่งไปกว่านั้น โปรแกรมอ่านหน้าจอก็อาจตีความบริบทของฟอร์มได้ไม่ชัดเจนเท่าการมี label ที่ผูกอย่างถูกต้อง

วิธีที่แนะนำ

ควรใช้ label ควบคู่กับ input โดยผูกกันผ่าน for และ id เช่น

• label for="email" ข้อความ: อีเมล
• input id="email" type="email"

ข้อดีที่ได้ทันที

• ผู้ใช้แตะหรือคลิกที่ข้อความ label ได้โดยตรง
• เคอร์เซอร์จะเข้าไปที่ input อัตโนมัติ
• ใช้งานบนมือถือได้สะดวกขึ้นมาก
• โปรแกรมอ่านหน้าจอเข้าใจบริบทของช่องกรอกข้อมูลได้ชัดเจนขึ้น

ถ้าอยากให้ UI ดูคลีนล่ะ?

สำหรับคนที่ต้องการหน้าตาเรียบสะอาด ยังสามารถใช้เทคนิคซ่อน label แบบที่ยังให้ screen reader อ่านได้ หรือที่เรียกว่า visually hidden ได้ วิธีนี้ช่วยรักษาความสวยงามของ UI โดยไม่เสียเรื่อง Accessibility

หลายดีไซน์ซิสเต็มหรือ CSS framework มักมีคลาสสำเร็จรูปสำหรับงานลักษณะนี้อยู่แล้ว

3) lang บนแท็ก html: รายละเอียดเล็กๆ ที่ช่วยทั้งการค้นหาและการอ่านออกเสียง

การกำหนดภาษาให้หน้าเว็บเป็นอีกเรื่องสำคัญที่มักถูกลืม โดยเฉพาะในเว็บไซต์ภาษาไทยที่มีคำอังกฤษปะปนอยู่บ่อย การใส่ lang อย่างถูกต้องจะช่วยให้ทั้งเสิร์ชเอนจินและโปรแกรมอ่านหน้าจอเข้าใจภาษาในหน้าได้แม่นยำขึ้น

การกำหนดระดับหน้า

หากหน้าเว็บเป็นภาษาไทย ควรระบุว่า

• html lang="th"

หากเป็นหน้าอังกฤษจริงๆ ก็ใช้

• html lang="en"

การสลับภาษาเฉพาะช่วง

ในกรณีที่มีคำหรือวลีภาษาอื่นแทรกอยู่ในเนื้อหา เช่น คำศัพท์เทคนิคภาษาอังกฤษ สามารถครอบเฉพาะส่วนนั้นด้วย lang ได้ เช่น

• span lang="en" สำหรับคำว่า Deployment

วิธีนี้ช่วยให้โปรแกรมอ่านหน้าจอออกเสียงได้ถูกต้องมากขึ้น และลดความสับสนในการตีความภาษา

ผลลัพธ์ที่หลายคนคาดไม่ถึง

• กูเกิลเข้าใจบริบทและภาษาของคอนเทนต์ดีขึ้น
• การจัดหมวดหมู่ภาษาและ rich results มีโอกาสแม่นยำขึ้น
• ประสบการณ์ใช้งานดีขึ้นจนช่วยลดอัตราตีกลับได้

เช็กลิสต์ก่อนปล่อยเว็บไซต์

ก่อนเผยแพร่เว็บไซต์จริง ควรตรวจสอบอย่างน้อยตามรายการต่อไปนี้

• รูปที่มีความหมายต้องมี alt ที่สื่อสารชัดเจน
• รูปตกแต่งควรใช้ alt=""
• ทุก input ต้องมี label ผูกกันอย่างถูกต้อง
• หน้าเว็บต้องกำหนด lang ให้ตรงกับภาษาหลัก
• ข้อความต่างภาษาควรใส่ lang เฉพาะจุดเมื่อจำเป็น

เครื่องมือที่ช่วยตรวจสอบได้รวดเร็ว

หากต้องการตรวจสอบเรื่อง SEO และ Accessibility แบบเบื้องต้น สามารถใช้เครื่องมือเหล่านี้ได้

• Chrome Lighthouse
• axe DevTools
• WAVE Web Accessibility Evaluation

สรุป

HTML ที่เขียนอย่างถูกต้องไม่ได้เป็นเพียงเรื่องของมาตรฐานโค้ดเท่านั้น แต่ยังส่งผลโดยตรงต่อความสามารถในการค้นหา การเข้าถึงของผู้ใช้ทุกกลุ่ม และภาพลักษณ์ความเป็นมืออาชีพของเว็บไซต์

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