ผู้ขายเบราว์เซอร์บิดเบือนมาตรฐานและทำสิ่งต่าง ๆ ด้วยตัวเองโดยไม่ทำตามกฎซึ่งอาจทำให้เกิดปัญหาบางอย่างหรืออย่างน้อยก็ทำให้เกิดความสับสน ตัวอย่างหนึ่งคือวิธีที่เบราว์เซอร์บางตัวจัดการกับแอตทริบิวต์ ALT (โดยปกติเรียกว่าแท็ก alt ไม่ถูกต้อง) เช่นเบราว์เซอร์ IE ที่มีผู้ใช้จำนวนมากใน Windows
ข้อความ Alt ไม่ได้ใช้เป็นเคล็ดลับเครื่องมือหรือมากกว่านั้นไม่ได้ให้คำแนะนำเพิ่มเติมสำหรับรูปภาพ ในทางตรงกันข้ามแอตทริบิวต์ชื่อควรใช้เพื่อให้ข้อมูลคำอธิบายเพิ่มเติมสำหรับองค์ประกอบ ข้อมูลนี้จะแสดงเป็นเคล็ดลับเครื่องมือในเบราว์เซอร์ภาพส่วนใหญ่แม้ว่าผู้ผลิตสามารถใช้วิธีอื่นใดในการแสดงข้อความของแอตทริบิวต์ชื่อเรื่อง
หลายคนดูเหมือนจะสับสนกับคุณลักษณะทั้งสองนี้ (คำถามได้กลายเป็นเรื่องธรรมดามากขึ้นในรายชื่อจดหมายของกลุ่มมาตรฐานเว็บเมื่อเร็ว ๆ นี้) ดังนั้นฉันจึงเขียนความคิดของฉันเกี่ยวกับวิธีการใช้งาน
แอตทริบิวต์ Altสำหรับตัวแทนผู้ใช้ (UA) ที่ไม่สามารถแสดงภาพฟอร์มหรือแอปเปิ้ลแอตทริบิวต์ ALT ใช้เพื่อระบุข้อความทางเลือก ภาษาของข้อความทดแทนถูกระบุโดยแอตทริบิวต์ Lang ที่มา: วิธีระบุข้อความสำรอง
แอตทริบิวต์ ALT (มุ่งเน้นไปที่ "แอตทริบิวต์" มากกว่า "แท็ก") รวมถึงคำแนะนำในการเปลี่ยนซึ่งจำเป็นสำหรับภาพและฮอตสปอตรูปภาพ มันสามารถใช้ได้เฉพาะใน IMG, พื้นที่และองค์ประกอบอินพุต (รวมถึงองค์ประกอบแอปเพล็ต) สำหรับองค์ประกอบอินพุตแอตทริบิวต์ ALT มีวัตถุประสงค์เพื่อแทนที่ภาพของปุ่มส่ง ตัวอย่างเช่น: <อินพุต type = "image" src = "image.gif" />
ใช้แอตทริบิวต์ ALT เพื่อให้คำอธิบายข้อความแก่ผู้ชมที่ไม่เห็นภาพในเอกสารของคุณ ซึ่งรวมถึงผู้ใช้ที่ใช้เบราว์เซอร์ที่ไม่รองรับการแสดงภาพหรือปิดการแสดงภาพผู้ใช้ที่มีความบกพร่องทางสายตาและผู้ใช้ที่ใช้เครื่องอ่านหน้าจอ ข้อความทางเลือกใช้เพื่อแทนที่ภาพแทนที่จะให้คำบรรยายเพิ่มเติม
คิดอย่างรอบคอบก่อนเขียนข้อความทดแทนเพื่อให้แน่ใจว่าคำเหล่านั้นให้ข้อมูลที่เป็นตัวอย่างสำหรับผู้ที่ไม่เห็นภาพและสมเหตุสมผลในบริบท สำหรับภาพตกแต่งให้ใช้ค่าว่าง (ALT = "" ไม่มีช่องว่างตรงกลางคำพูด) แทนที่จะใช้สารทดแทนที่ไม่เกี่ยวข้องเช่น "กระสุนสีน้ำเงิน" หรือ "spacer.gif" อย่าเพิกเฉย หากคุณไม่สนใจเครื่องอ่านหน้าจอบางตัวจะอ่านชื่อไฟล์ของไฟล์ภาพโดยตรงและเบราว์เซอร์ข้อความเหล่านั้นเช่น Lynx จะแสดงชื่อไฟล์ของไฟล์ภาพซึ่งจะใช้กับเบราว์เซอร์ของคุณเพียงเล็กน้อย
มันง่ายที่สุดในการตั้งค่าข้อความแทนที่ในรูปภาพที่มีข้อความ ข้อความที่มีอยู่ในภาพโดยทั่วไปสามารถใช้เป็นค่าแอตทริบิวต์ alt
สำหรับความยาวของข้อความทดแทนดูสิ่งที่ WCAG 2.0 (คู่มือการใช้งานเว็บไซต์เนื้อหา 2.0) กล่าวว่า:
ค่าแอตทริบิวต์ ALT ต้องน้อยกว่า 100 อักขระภาษาอังกฤษหรือผู้ใช้จะต้องตรวจสอบให้แน่ใจว่าข้อความทดแทนนั้นสั้นที่สุดเท่าที่จะทำได้
ฉันเข้าใจว่ามันเป็น "สั้นที่สุดเท่าที่จะเป็นไปได้"
แม้ว่าคุณต้องการให้ปรากฏเป็นเคล็ดลับเครื่องมืออย่าใช้แอตทริบิวต์ Alt สำหรับองค์ประกอบข้อความซึ่งไม่ใช่การใช้งาน เท่าที่ฉันรู้มันใช้งานได้เฉพาะใน Windows เช่นเบราว์เซอร์และ NetScape 4* (เวอร์ชัน Windows) ไม่มีเบราว์เซอร์ของ Mac จะแสดงเป็นเคล็ดลับเครื่องมือ
เมื่อเบราว์เซอร์แสดงข้อความทดแทนเป็นเคล็ดลับเครื่องมือพฤติกรรมของการใช้แอตทริบิวต์ ALT ไม่ถูกต้องก็จะได้รับการสนับสนุน บางคนเริ่มเขียนข้อความการทดแทนที่ไม่มีความหมายเพราะพวกเขามักจะคิดว่ามันเป็นข้อมูลภาพลวงตาเพิ่มเติมมากกว่าการเปลี่ยนที่ไม่สามารถแสดงภาพได้ คนอื่นอาจไม่ต้องการให้เคล็ดลับเครื่องมือปรากฏขึ้นจากนั้นละเว้นการเขียนค่าแอตทริบิวต์ alt อย่างสมบูรณ์ การปฏิบัติที่ไม่ถูกต้องเหล่านี้ทำให้เกิดปัญหาสำหรับผู้ชมที่ไม่สามารถมองเห็นภาพได้
สำหรับคำแนะนำเพิ่มเติมและข้อมูลที่ไม่จำเป็นโปรดใช้แอตทริบิวต์ชื่อเรื่อง
แอตทริบิวต์ชื่อเรื่องแอตทริบิวต์ชื่อเรื่องให้คำแนะนำสำหรับองค์ประกอบที่ตั้งค่าแอตทริบิวต์นี้ ที่มา: แอตทริบิวต์ชื่อเรื่อง
แอตทริบิวต์ชื่อเรื่องสามารถใช้กับแท็กทั้งหมดยกเว้นฐาน, basefont, head, html, meta, param, สคริปต์และชื่อเรื่อง แต่ไม่จำเป็น บางทีนั่นอาจเป็นสาเหตุที่หลายคนไม่เข้าใจว่าจะใช้เมื่อใด
ใช้แอตทริบิวต์ชื่อเรื่องเพื่อให้ข้อมูลเพิ่มเติมที่ไม่จำเป็น เบราว์เซอร์ที่มองเห็นส่วนใหญ่แสดงข้อความชื่อเรื่องเป็นเคล็ดลับเครื่องมือเมื่อเมาส์ถูกระงับในองค์ประกอบเฉพาะ แต่ขึ้นอยู่กับผู้ผลิตเพื่อตัดสินใจว่าจะแสดงข้อความชื่อเรื่องอย่างไร เบราว์เซอร์บางตัวจะแสดงข้อความชื่อในแถบสถานะ ตัวอย่างเช่นเบราว์เซอร์ Safari เวอร์ชันก่อนหน้า
แอตทริบิวต์ชื่อเรื่องมีจุดประสงค์ที่ดีซึ่งคือการเพิ่มข้อความเชิงพรรณนาไปยังลิงค์ซึ่งไม่ธรรมดาเมื่อลิงก์เองไม่ได้แสดงวัตถุประสงค์ของลิงก์อย่างชัดเจน สิ่งนี้ช่วยให้ผู้เข้าชมทราบว่าลิงก์เหล่านั้นจะนำไปใช้ที่ไหนและพวกเขาจะไม่โหลดหน้าเว็บที่อาจไม่น่าพอใจอย่างสมบูรณ์ แอปพลิเคชั่นที่เป็นไปได้อีกอย่างหนึ่งคือการให้ข้อมูลเพิ่มเติมสำหรับรูปภาพเช่นวันที่หรือข้อมูลที่ไม่จำเป็นอื่น ๆ
ค่าแอตทริบิวต์ชื่อเรื่องอาจยาวกว่าค่าแอตทริบิวต์ ALT แต่ควรสังเกตว่าเบราว์เซอร์บางตัวตัดข้อความที่ยาวเกินไป (เช่นคำแนะนำเครื่องมือหรืออื่น ๆ ) ตัวอย่างเช่นเบราว์เซอร์หลักของ Mozilla สามารถแสดงอักขระ 60 ตัวแรกเท่านั้น นี่ถือเป็นข้อผิดพลาด Mozilla ซึ่งคุณต้องใส่ใจ
พิจารณาก่อนใช้คำแนะนำของฉันคือเพื่อให้แน่ใจว่าข้อความทดแทนเป็นสิ่งจำเป็น ในแอปพลิเคชันส่วนใหญ่ควรว่างเปล่า Alt = "" (โปรดทราบว่าไม่มีช่องว่างในสองคำพูด) คิดเกี่ยวกับภาพเหล่านั้นมุมมองเหล่านั้นให้ข้อมูลประเภทใดคุณควรใช้ข้อความอะไรเพื่ออธิบายหรือข้อมูลใดที่คุณควรให้กับผู้ที่ไม่เห็นภาพ การเขียนข้อความทดแทนเป็น "ภาพถ่าย: CEO ยืนอยู่นอกอาคารสวมชุดสูทสีเทาและเน็คไทสีดำมองไปที่ท้องฟ้า" มีประโยชน์จริงๆสำหรับผู้ที่มองไม่เห็นภาพ? ถ้าคุณคิดอย่างนั้นคุณสามารถเขียนได้ ในหลายกรณีฉันคิดว่าเป็นการดีกว่าที่จะปล่อยให้ข้อความทดแทนว่างเปล่า
สำหรับแอตทริบิวต์ชื่อเรื่องมันเป็นเรื่องยากที่จะให้คำแนะนำที่เข้มงวด การใช้งานส่วนใหญ่ของฉันอยู่ในลิงค์ที่ไม่สามารถอธิบายตนเองได้เช่นข้อความลิงก์เดียวกันในหน้าเดียวกันและหน้าลิงก์ที่แตกต่างกัน บางครั้งข้อความคำบรรยายภาพเพิ่มเติมมีไว้สำหรับปุ่มหรือองค์ประกอบแบบฟอร์ม
คำอธิบายที่ยาวขึ้นเมื่อภาพต้องการคำอธิบายที่ยาวขึ้นและเกินกว่าข้อ จำกัด ของแอตทริบิวต์ ALT มีตัวเลือกบางอย่าง
คุณสมบัติ LongDesc สามารถใช้เพื่อให้ลิงก์ไปยังหน้าแยกต่างหากที่มีคำอธิบายข้อความของภาพ ซึ่งหมายถึงการเชื่อมโยงผู้ชมไปยังหน้าอื่นซึ่งอาจทำให้เกิดความเข้าใจปัญหา นอกจากนี้เบราว์เซอร์ที่รองรับแอตทริบิวต์ LongDesc ก็ไม่สอดคล้องกันและมันก็ไม่ค่อยดีนัก
คุณสมบัติ LongDesc สามารถมีลิงก์ไปยังส่วนอื่นของเอกสารปัจจุบัน (จุดยึด) แทนการเชื่อมโยงไปยังหน้าอื่น ในเชิงอรรถในการเข้าถึง Andy Clarke อธิบายวิธีการใช้งานได้ดีมาก
ลิงค์คำอธิบาย (ลิงก์ D) สามารถใช้เพื่อเสริม Longdesc ลิงค์คำอธิบายเป็นลิงค์ปกติที่เชื่อมต่อกับหน้าเว็บที่มีข้อความทางเลือก ลิงค์ถูกวางไว้ถัดจากภาพและตกลงในเบราว์เซอร์ทั้งหมด ผู้คนมีความคิดเห็นที่แตกต่างกันมากมายเกี่ยวกับประสิทธิผลของมันและฉันไม่ชอบสิ่งนี้มากนักกับความเห็นส่วนตัวของฉัน WCAG ยังเป็นและในเทคนิคการทำงาน HTML ของพวกเขาสำหรับ WCAG 2.0 ลิงก์คำอธิบายคือ "ไม่อนุมัติ"
หากคำอธิบายที่ยาวนานของภาพมีประโยชน์ต่อผู้ชมทุกคนคุณต้องพิจารณาเพียงแค่แสดงในเอกสารเดียวกันแทนที่จะเชื่อมโยงไปยังหน้าอื่น ๆ หรือซ่อนมัน วิธีนี้ทุกคนสามารถอ่านได้ นี่เป็นวิธีที่ง่ายและมีเทคโนโลยีต่ำ