เมื่อผู้จำหน่ายเบราว์เซอร์บิดเบือนมาตรฐานและทำสิ่งที่ไม่เป็นไปตามกฎ พวกเขาอาจทำให้เกิดปัญหาหรืออย่างน้อยก็สับสนได้ ตัวอย่างหนึ่งคือวิธีที่เบราว์เซอร์บางตัวจัดการแอตทริบิวต์ alt (มักเรียกว่าแท็ก alt อย่างไม่ถูกต้อง) เช่น Internet Explorer สำหรับ Windows ซึ่งมีผู้ใช้จำนวนมาก
ข้อความแสดงแทน (ข้อความแสดงแทน) จะไม่ถูกใช้เป็นคำแนะนำเครื่องมือ หรือพูดให้เจาะจงกว่านั้นคือไม่ได้ให้ข้อมูลคำอธิบายเพิ่มเติมสำหรับรูปภาพ แต่ควรใช้แอตทริบิวต์ title เพื่อให้ข้อมูลอธิบายเพิ่มเติมสำหรับองค์ประกอบแทน ข้อมูลนี้จะแสดงเป็นคำแนะนำเครื่องมือในเบราว์เซอร์รูปภาพส่วนใหญ่ แม้ว่าผู้ผลิตจะมีอิสระในการแสดงข้อความแอตทริบิวต์ title ด้วยวิธีอื่นก็ตาม
ดูเหมือนว่าหลายๆ คนจะสับสนกับคุณสมบัติทั้งสองนี้ (คำถามนี้ผุดขึ้นมาในรายชื่อผู้รับจดหมายของ Web Standards Group เมื่อเร็ว ๆ นี้) ดังนั้นฉันจึงเขียนความคิดของฉันเกี่ยวกับวิธีการใช้งาน
แอตทริบิวต์สำรอง
สำหรับ User Agent (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 ต้องน้อยกว่า 100 อักขระภาษาอังกฤษ หรือผู้ใช้ต้องแน่ใจว่าข้อความแทนที่สั้นที่สุดเท่าที่จะทำได้
ฉันเข้าใจว่า "สั้นที่สุดและนานเท่าที่จำเป็น"
แม้ว่าคุณต้องการให้ปรากฏเป็นเคล็ดลับเครื่องมือ อย่าใช้แอตทริบิวต์ alt กับองค์ประกอบข้อความ นี่ไม่ใช่การใช้งานตามวัตถุประสงค์ เท่าที่ฉันรู้ สิ่งนี้ใช้ได้กับเบราว์เซอร์ IE ของ Windows และ Netscape 4.* (เวอร์ชัน windows) เท่านั้น ไม่มีเบราว์เซอร์ Mac แสดงสิ่งนี้เป็นเคล็ดลับเครื่องมือ
ขอแนะนำให้ใช้แอตทริบิวต์ alt ในทางที่ผิดเมื่อเบราว์เซอร์แสดงข้อความแสดงแทนเป็นเคล็ดลับเครื่องมือ บางคนเริ่มเขียนข้อความแสดงแทนที่ไม่มีความหมายเพราะพวกเขามักจะคิดว่ามันเป็นข้อมูลที่อธิบายเพิ่มเติมมากกว่าที่จะแทนที่ซึ่งไม่สามารถแสดงรูปภาพได้ คนอื่นๆ อาจไม่ต้องการให้คำแนะนำเครื่องมือปรากฏขึ้น จากนั้นละเว้นค่าแอตทริบิวต์ alt โดยสิ้นเชิง การปฏิบัติที่ไม่ถูกต้องเหล่านี้ทำให้เกิดปัญหาแก่ผู้ชมที่ไม่สามารถดูภาพได้
สำหรับข้อมูลเพิ่มเติมที่เป็นคำอธิบายและข้อมูลที่ไม่จำเป็น โปรดใช้แอตทริบิวต์ 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 ลิงก์คำอธิบายนั้น "เลิกใช้แล้ว"
หากคำอธิบายรูปภาพแบบยาวมีประโยชน์สำหรับผู้ดู คุณอาจต้องการพิจารณาเพียงแสดงรูปภาพนั้นภายในเอกสารเดียวกัน แทนที่จะลิงก์ไปยังหน้าอื่นหรือซ่อนไว้ เพื่อให้ทุกคนสามารถอ่านได้ นี่เป็นแนวทางที่เรียบง่ายและมีเทคโนโลยีต่ำ