เมื่อผู้จำหน่ายเบราว์เซอร์บิดเบือนมาตรฐานและทำสิ่งที่ไม่เป็นไปตามกฎ พวกเขาอาจทำให้เกิดปัญหาหรืออย่างน้อยก็สับสนได้ ตัวอย่างหนึ่งคือวิธีที่เบราว์เซอร์บางตัวจัดการแอตทริบิวต์ alt (มักเรียกว่าแท็ก alt อย่างไม่ถูกต้อง) เช่น Internet Explorer สำหรับ Windows ซึ่งมีผู้ใช้จำนวนมาก
ข้อความแสดงแทน (ข้อความแสดงแทน) จะไม่ถูกใช้เป็นคำแนะนำเครื่องมือ หรือพูดให้เจาะจงกว่านั้นคือไม่ได้ให้ข้อมูลคำอธิบายเพิ่มเติมสำหรับรูปภาพ แต่ควรใช้แอตทริบิวต์ title เพื่อให้ข้อมูลอธิบายเพิ่มเติมสำหรับองค์ประกอบแทน ข้อมูลนี้จะแสดงเป็นคำแนะนำเครื่องมือในเบราว์เซอร์รูปภาพส่วนใหญ่ แม้ว่าผู้ผลิตจะมีอิสระในการแสดงข้อความแอตทริบิวต์ title ด้วยวิธีอื่นก็ตาม
ดูเหมือนว่าหลายๆ คนจะสับสนกับคุณสมบัติทั้งสองนี้ (คำถามนี้ผุดขึ้นมาในรายชื่อผู้รับจดหมาย ของ Web Standards Group เมื่อเร็ว ๆ นี้) ดังนั้นฉันจึงเขียนความคิดของฉันเกี่ยวกับวิธีการใช้งาน
แอตทริบิวต์ alt
คือตัวแทนผู้ใช้ (UA) ที่ไม่สามารถแสดงรูปภาพ แบบฟอร์ม หรือแอปเพล็ตได้ แอตทริบิวต์ alt ใช้เพื่อระบุข้อความแทนที่ ภาษาของข้อความแทนที่จะถูกระบุโดยแอตทริบิวต์ lang
แหล่งที่มา: วิธีระบุข้อความสำรอง
แอตทริบิวต์ Alt (โปรดทราบว่าเป็น "แอตทริบิวต์" แทนที่จะเป็น "ป้ายกำกับ") มีคำแนะนำในการแทนที่และจำเป็นสำหรับรูปภาพและฮอตสปอตรูปภาพ สามารถใช้ได้เฉพาะในองค์ประกอบ img พื้นที่ และอินพุต (รวมถึงองค์ประกอบแอปเพล็ต) สำหรับองค์ประกอบอินพุต แอตทริบิวต์ alt มีวัตถุประสงค์เพื่อแทนที่รูปภาพปุ่มส่ง ตัวอย่างเช่น: <input type="image" src="image.gif" alt="Submit" />
แอตทริบิวต์ alt ใช้เพื่อระบุคำอธิบายข้อความสำหรับผู้ดูที่ไม่เห็นภาพในเอกสารของคุณ ซึ่งรวมถึงผู้ใช้ที่ใช้เบราว์เซอร์ที่ไม่รองรับการแสดงรูปภาพโดยกำเนิดหรือปิดการแสดงรูปภาพ ผู้ใช้ที่มีความบกพร่องทางการมองเห็น และผู้ใช้ที่ใช้โปรแกรมอ่านหน้าจอ ข้อความแสดงแทนใช้เพื่อแทนที่รูปภาพแทนที่จะให้ข้อความอธิบายเพิ่มเติม
คิดให้รอบคอบก่อนเขียนข้อความแสดงแทนเพื่อให้แน่ใจว่าจะให้ข้อมูลแก่ผู้ที่ไม่สามารถมองเห็นภาพได้จริงและสมเหตุสมผลในบริบท สำหรับรูปภาพตกแต่ง ให้ใช้ค่าว่าง (alt="" ไม่มีการเว้นวรรคระหว่างเครื่องหมายคำพูด) แทนข้อความแทนที่ที่ไม่เกี่ยวข้อง เช่น "bullet bullet" หรือ "spacer.gif" อย่าเพิกเฉย เพราะหากคุณเพิกเฉย โปรแกรมอ่านหน้าจอบางตัวจะอ่านชื่อไฟล์รูปภาพโดยตรง และเบราว์เซอร์ข้อความ เช่น Lynx จะแสดงชื่อไฟล์รูปภาพ และนั่นจะไม่เป็นประโยชน์สำหรับผู้ดูของคุณมากนัก
วิธีที่ง่ายที่สุดในการตั้งค่าข้อความแสดงแทนสำหรับรูปภาพที่มีข้อความ โดยทั่วไป ข้อความที่อยู่ในรูปภาพสามารถใช้เป็นค่าแอตทริบิวต์ alt ได้
สำหรับความยาวของข้อความแทนที่ โปรดดูที่ WCAG 2.0 (หลักเกณฑ์ความพร้อมใช้งานของเนื้อหาเว็บไซต์ 2.0) ระบุไว้:
ฉันเข้าใจว่า "สั้นที่สุดและนานเท่าที่จำเป็น"
แม้ว่าคุณต้องการให้ปรากฏเป็นเคล็ดลับเครื่องมือ อย่าใช้แอตทริบิวต์ alt กับองค์ประกอบข้อความ นี่ไม่ใช่การใช้งานตามวัตถุประสงค์ เท่าที่ฉันรู้ สิ่งนี้ใช้ได้กับเบราว์เซอร์ IE ของ Windows และ Netscape 4.* (เวอร์ชัน windows) เท่านั้น ไม่มีเบราว์เซอร์ Mac แสดงสิ่งนี้เป็นเคล็ดลับเครื่องมือ
ขอแนะนำให้ใช้แอตทริบิวต์ alt ในทางที่ผิดเมื่อเบราว์เซอร์แสดงข้อความแสดงแทนเป็นเคล็ดลับเครื่องมือ บางคนเริ่มเขียนข้อความแสดงแทนที่ไม่มีความหมายเพราะพวกเขามักจะคิดว่ามันเป็นข้อมูลที่อธิบายเพิ่มเติมมากกว่าที่จะแทนที่ซึ่งไม่สามารถแสดงรูปภาพได้ คนอื่นๆ อาจไม่ต้องการให้คำแนะนำเครื่องมือปรากฏขึ้น จากนั้นละเว้นค่าแอตทริบิวต์ alt โดยสิ้นเชิง การปฏิบัติที่ไม่ถูกต้องเหล่านี้ทำให้เกิดปัญหาแก่ผู้ชมที่ไม่สามารถดูภาพได้
สำหรับข้อมูลเพิ่มเติมที่เป็นคำอธิบายและข้อมูลที่ไม่จำเป็น โปรดใช้แอตทริบิวต์ title
แอตทริบิวต์ title
แอตทริบิวต์ title ให้ข้อมูลคำแนะนำสำหรับองค์ประกอบที่มีการตั้งค่า
แหล่งที่มา: แอตทริบิวต์ title
แอตทริบิวต์ title สามารถใช้ได้ในทุกแท็ก ยกเว้น base, basefont, head, html, meta, param, script และ title แต่ก็ไม่จำเป็น บางทีนั่นอาจเป็นสาเหตุที่หลายๆ คนไม่เข้าใจว่าควรใช้เมื่อใด
ใช้แอตทริบิวต์ title เพื่อให้ข้อมูลเพิ่มเติมที่ไม่จำเป็น เบราว์เซอร์ภาพส่วนใหญ่จะแสดงข้อความชื่อเรื่องเป็นคำแนะนำเครื่องมือเมื่อวางเมาส์เหนือองค์ประกอบเฉพาะ อย่างไรก็ตาม ขึ้นอยู่กับผู้ผลิตที่จะตัดสินใจว่าจะแสดงข้อความชื่อเรื่องอย่างไร เบราว์เซอร์บางตัวจะแสดงข้อความชื่อเรื่องในแถบสถานะ ตัวอย่างเช่น เบราว์เซอร์ Safari เวอร์ชันแรกๆ
การใช้แอตทริบิวต์ title ที่ดีคือการเพิ่มข้อความอธิบายให้กับลิงก์ โดยเฉพาะอย่างยิ่งเมื่อตัวลิงก์ไม่ได้สื่อถึงวัตถุประสงค์ของลิงก์อย่างชัดเจน วิธีนี้ทำให้ผู้เยี่ยมชมทราบว่าลิงก์จะนำพวกเขาไปที่ใด และพวกเขาจะไม่โหลดหน้าที่ตนอาจไม่สนใจเลย การใช้งานที่เป็นไปได้อีกอย่างหนึ่งคือการให้ข้อมูลที่เป็นคำอธิบายเพิ่มเติมสำหรับรูปภาพ เช่น วันที่หรือข้อมูลที่ไม่จำเป็นอื่นๆ
ค่าแอตทริบิวต์ชื่อสามารถตั้งค่าให้ยาวกว่าค่าแอตทริบิวต์ alt อย่างไรก็ตาม โปรดทราบว่าเบราว์เซอร์บางตัวจะตัดข้อความที่ยาวเกินไป (เช่น คำแนะนำเครื่องมือหรืออื่นๆ) ตัวอย่างเช่น เบราว์เซอร์หลักของ Mozilla สามารถแสดงได้เฉพาะอักขระ 60 ตัวแรกเท่านั้น นี่ถือเป็น ข้อบกพร่องของ Mozilla และเป็นสิ่งที่คุณควรระวัง
พิจารณาก่อนที่จะใช้
คำแนะนำของฉันคือให้ข้อความแสดงแทนของคุณอยู่ในสิ่งสำคัญ ในแอปพลิเคชันส่วนใหญ่ ควรเว้นว่างไว้ alt="" (โปรดทราบว่าไม่มีการเว้นวรรคระหว่างเครื่องหมายคำพูด) ลองนึกถึงภาพเหล่านั้น ข้อมูลที่พวกเขาให้ข้อมูลแก่ผู้ที่ดูภาพเหล่านั้น คุณควรใช้คำใดในการอธิบาย หรือข้อมูลใดที่คุณควรให้ข้อมูลแก่ผู้ที่มองไม่เห็นภาพเหล่านั้น จะช่วยคนที่มองไม่เห็นภาพเขียนข้อความแสดงแทนว่า "รูปภาพ: CEO ยืนอยู่นอกอาคาร ใส่สูทสีเทา ผูกเน็คไทสีดำ มองท้องฟ้า" ได้จริงหรือ? ถ้าคุณคิดอย่างนั้นก็เขียนมัน ในหลายกรณี ฉันคิดว่าควรเว้นว่างข้อความทดแทนไว้จะดีกว่า
สำหรับแอตทริบิวต์ title เป็นการยากที่จะให้คำแนะนำการใช้งานที่เข้มงวด ส่วนใหญ่ฉันใช้กับลิงก์ที่ไม่สามารถอธิบายตนเองได้ เช่น ข้อความลิงก์เดียวกันในหน้าเดียวกัน แต่เป็นหน้าที่ลิงก์ต่างกัน บางครั้งมีการจัดเตรียมข้อความอธิบายเพิ่มเติมสำหรับบางปุ่มหรือองค์ประกอบของแบบฟอร์ม
คำอธิบายที่ยาวขึ้น
เมื่อรูปภาพต้องการคำอธิบายที่ยาวเกินกว่าขีดจำกัดของแอตทริบิวต์ alt ก็มีบางตัวเลือกให้เลือก
คุณลักษณะ longdesc สามารถใช้เพื่อจัดเตรียมลิงก์ไปยังหน้าที่แยกต่างหากซึ่งมีคำอธิบายข้อความของรูปภาพ ซึ่งหมายถึงการเชื่อมโยงผู้ดูไปยังหน้าอื่นซึ่งอาจทำให้เกิดปัญหาในการทำความเข้าใจ นอกจากนี้ การสนับสนุนเบราว์เซอร์สำหรับแอตทริบิวต์ longdesc นั้นไม่สอดคล้องกันและไม่ค่อยดีนัก
แอตทริบิวต์ longdesc สามารถมีลิงก์ไปยังส่วนอื่นของเอกสารปัจจุบัน (จุดยึด) แทนที่จะลิงก์ไปยังหน้าอื่น ใน เชิงอรรถการเข้าถึง Andy Clarke ให้คำอธิบายที่ดีเกี่ยวกับวิธีการนำไปใช้
ลิงก์คำอธิบาย (ลิงก์ D) สามารถใช้เพื่อเสริม longdesc ลิงก์คำอธิบายคือลิงก์ปกติไปยังหน้าที่มีข้อความแสดงแทน ลิงก์นี้วางอยู่ข้างรูปภาพและสามารถใช้ได้ในทุกเบราว์เซอร์ มีความคิดเห็นที่แตกต่างกันมากมายเกี่ยวกับประสิทธิภาพของมัน และโดยส่วนตัวแล้วฉันไม่ชอบข้อความนี้ WCAG เช่นกัน ในร่าง เทคนิค HTML ที่ใช้งานได้สำหรับ WCAG 2.0 ลิงก์คำอธิบายนั้น "เลิกใช้แล้ว"
หากคำอธิบายรูปภาพแบบยาวมีประโยชน์สำหรับผู้ดู คุณอาจต้องการพิจารณาเพียงแสดงรูปภาพนั้นภายในเอกสารเดียวกัน แทนที่จะลิงก์ไปยังหน้าอื่นหรือซ่อนไว้ เพื่อให้ทุกคนสามารถอ่านได้ นี่เป็นแนวทางที่เรียบง่ายและมีเทคโนโลยีต่ำ
ข้อมูลเพิ่มเติม
ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับแอตทริบิวต์ alt, title และ longdesc หรือไม่ ดูที่นี่: