ในบทแนะนำสั้นๆ นี้ คุณจะได้เรียนรู้วิธีแสดงข้อความคำอธิบายสั้นๆ (เช่น คำแนะนำเครื่องมือ) เมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ เช่น รูปภาพหรือลิงก์
วิธีเพิ่มคำแนะนำเครื่องมือใช้เวลาไม่กี่วินาที คุณเพียงแค่ใช้แอตทริบิวต์ชื่อ HTML:title .
แสดงข้อความเมื่อวางเมาส์เหนือองค์ประกอบ
นี่เป็นตัวอย่างพื้นฐานของภาพลูกบาศก์รูบิค เลื่อนเมาส์ไปบนภาพนี้และภายในไม่กี่วินาทีข้อมูลเพิ่มเติมเกี่ยวกับลูกบาศก์ของรูบิคจะปรากฏขึ้น:
นี่คือมาร์กอัป HTML สำหรับองค์ประกอบรูปภาพด้านบน:
<img
src="url-to-image-file"
title="The Rubik's Cube. A 3-D combination puzzle toy invented in 1974 by Hungarian sculptor Ernő Rubik."
alt="A Rubik’s Cube"
/>สมมติว่าคุณต้องการแสดงคำแนะนำเครื่องมือเมื่อผู้ใช้เลื่อนเมาส์ไปวางเหนือองค์ประกอบลิงก์/จุดยึด
เลื่อนเมาส์ไปที่ลิงก์นี้เพื่อแสดงคำแนะนำเครื่องมือ
บทความล่าสุด
และมาร์กอัป HTML:
<a href="https://techstacker.com" title="Link to TechStacker’s front page"
>Latest articles</a
>
นั่นคือทั้งหมดที่มีให้ คุณสามารถเพิ่ม title แอตทริบิวต์ขององค์ประกอบ HTML ใดๆ
ทำไม กำลังแสดงข้อความเมื่อผู้ใช้เลื่อนเมาส์ไปวางเหนือองค์ประกอบหรือไม่
สมมติว่าคุณมีองค์ประกอบที่อาจทำให้เกิดความสับสนสำหรับบางคนเนื่องจากความเรียบง่าย ตัวอย่างอาจเป็นไอคอน คนส่วนใหญ่ไม่รู้จักไอคอนเพียงหยิบมือ แต่มีไอคอนต่างๆ มากมายจัดแสดงอยู่ ในโลกตะวันตกเพียงแห่งเดียว
เพียงเพิ่มแอตทริบิวต์ชื่อลงในไอคอน (เช่น ภายในองค์ประกอบรูปภาพ) ผู้ใช้จะมีตัวเลือกในการรับคำอธิบายที่ชัดเจนเกี่ยวกับฟังก์ชันของไอคอน ที่เคยมีอยู่ใน UI ของคุณ
ตอนนี้ คุณอาจคิดกับตัวเองว่า มีกี่คนที่รู้ว่าการวางเมาส์เหนือองค์ประกอบบางครั้งอาจเปิดเผยข้อมูลเพิ่มเติม
นั่นเป็นคำถามที่ดี คำตอบคือขึ้นอยู่กับกลุ่มเป้าหมายของคุณ ผู้ที่เชี่ยวชาญด้านเทคโนโลยีส่วนใหญ่ทราบโดยสัญชาตญาณว่าการเลื่อนเมาส์ไป + รอ 1-2 วินาทีมักจะเปิดเผยข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้
แต่ถ้าผู้ชมของคุณส่วนใหญ่ประกอบด้วยคนที่ไม่เชี่ยวชาญเทคโนโลยี หรือบางทีอาจเป็นแค่คนที่ไม่ได้ท่องเว็บมากนัก
ถ้าอย่างนั้นการกระทำเริ่มต้นของฉันคือใช้คำแนะนำสากลของ Luke Wroblewski:
ชนะเสมอแน่นอน
หากไอคอนไม่ชัดเจน หรืออย่างน้อยก็ไม่ชัดเจนสำหรับผู้คนจำนวนมาก คุณควรสร้างไอคอนที่ดีขึ้นหรือจับคู่ไอคอนนั้นกับคำอธิบายสั้นๆ
อย่างไรก็ตาม เพิ่มแอตทริบิวต์ title และ แน่นอน แอตทริบิวต์ ALT (สำหรับโปรแกรมอ่านหน้าจอ สำหรับผู้พิการทางสายตา) มีเพียงส่วนต่าง คุณไม่จำเป็นต้องเพิ่มลงในทุกสิ่ง แต่หากคุณสงสัย คุณก็ทำได้
เป็นโบนัสเพิ่มเติม แอตทริบิวต์ ALT อย่างน้อยก็มีผลกระทบต่อ SEO อย่างน้อยก็ทางอ้อม แต่ อาจ โดยตรงด้วย
ได้อย่างไร? คำอธิบาย ALT อยู่ในหมวดการช่วยสำหรับการเข้าถึง ซึ่ง Google ไม่ได้เปิดเผยใดๆ ว่ามีผลกระทบต่อการประเมินคุณภาพของเว็บไซต์ของคุณ ซึ่งจะส่งผลต่ออันดับ SEO ของคุณ
เท่าที่แอตทริบิวต์ title เคย ส่งผลกระทบต่อ SEO แต่จากการวิจัยล่าสุดของฉัน มันไม่ชัดเจนว่ามันยังทำอยู่ในปัจจุบันหรือไม่ แต่อีกครั้ง ไม่มีข้อเสียที่ชัดเจนในการใช้แอตทริบิวต์ title มีแต่กลับหัว
วิธีการแนะนำเครื่องมือทางเลือก
คุณอาจต้องการเวอร์ชันที่กำหนดเองมากขึ้นของแอตทริบิวต์คำแนะนำเครื่องมือ/ชื่อ HTML ในตัว ในกรณีนั้น คุณสามารถใช้ JavaScript และ CSS กับคำแนะนำเครื่องมือเวลาและรูปแบบสำหรับกรณีการใช้งานที่แตกต่างกัน ฉันจะครอบคลุม ทักษะที่มีประโยชน์ ในบทช่วยสอนในอนาคต (อยู่ในรายการต้องเขียนของฉัน!)
