แท็ก HTML img: แอตทริบิวต์หัวเรื่องเทียบกับแอตทริบิวต์ alt?

ฉันกำลังเรียกดูAmazonและสังเกตเห็นว่าเมื่อค้นหา " 1TB " หากคุณวางเคอร์เซอร์ของเมาส์ไว้เหนือรูปภาพการจัดอันดับดาวคุณจะเห็นคะแนนเฉพาะเมื่อใช้ IE หากคุณใช้เบราว์เซอร์อื่นคะแนนจะไม่แสดง

คะแนน 3.8 และคะแนน 4.2 ทั้งคู่แสดงเป็น 4 ดาว แน่นอนว่า 3.8 ดาวเทียบกับ 4.2 ดาว (คะแนน 76% เทียบกับ 84%) สามารถสร้างความแตกต่างได้!

เนื่องจากวิธีการแสดงaltข้อความมาตรฐานคือเมื่อผู้ใช้ปิดกราฟิกหรือเมื่อเบราว์เซอร์ "อ่านออก" (เช่นเบราว์เซอร์สำหรับผู้ใช้ที่มีความบกพร่องทางสายตา) อย่างไรก็ตาม IE จะแสดงเมื่อวางเมาส์เหนือ

ดังนั้นฉันคิดว่าถ้า Amazon แสดงโดยไม่คำนึงถึงเบราว์เซอร์ของผู้ใช้titleควรใช้นอกเหนือจากalt. คุณจะเห็นด้วย?

ฉันจะไปทั้งสองอย่าง Title จะแสดงคำแนะนำเครื่องมือที่ดีในทุกเบราว์เซอร์และ alt จะให้คำอธิบายเมื่อเรียกดูในเบราว์เซอร์ที่ไม่มีภาพ

ที่กล่าวว่าฉันชอบที่จะเห็นสถิติของจำนวน "นักเล่นเซิร์ฟ" ที่ไปที่ "ร้านค้า" เพื่อเรียกดูสินค้าจริง ๆ แล้วปิดภาพหรือใช้เบราว์เซอร์ที่ไม่รองรับรูปภาพ ฉันคิดว่าวันที่ 90% ของประชากรใช้โมเด็ม 28k เพื่อเชื่อมต่อกับ InterWeb นั้นน่าเบื่อ

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

titleแอตทริบิวต์จะแสดงพร้อมกับภาพที่มักจะเป็นคำแนะนำเครื่องมือเลื่อน

ไม่ควรใช้ "แทน" ของอีกอัน ควรใช้อย่างเหมาะสมเพื่อทำสิ่งที่ออกแบบมาให้ทำ

altและชื่อเป็นสิ่งที่แตกต่างกันดังที่ได้กล่าวไปแล้ว แม้ว่าแอตทริบิวต์titleจะให้คำแนะนำเครื่องมือ แต่altก็เป็นแอตทริบิวต์ที่สำคัญเช่นกันเนื่องจากระบุข้อความที่จะแสดงหากไม่สามารถแสดงรูปภาพได้ (และในบางเบราว์เซอร์เช่น firefox คุณจะเห็นข้อความนี้ขณะโหลดรูปภาพ)

อีกจุดหนึ่งที่ฉันรู้สึกว่าควรทำคือแอตทริบิวต์alt จำเป็นต้องตรวจสอบความถูกต้องเป็นเอกสาร XHTML ในขณะที่แอตทริบิวต์titleเป็นเพียง "ตัวเลือกเพิ่มเติม" เหมือนเดิม

นั่นเป็นเพราะพวกเขาตอบสนองวัตถุประสงค์ที่แตกต่างกันและทั้งสองไม่ควรใช้เพียงอย่างเดียวแทนกัน

"alt" มีไว้สำหรับสิ่งที่พวกคุณพูดไปแล้วดังนั้นคุณจะเห็นว่าภาพนั้นเกี่ยวกับอะไรหากไม่สามารถแสดงภาพได้ (ไม่ว่าด้วยเหตุผลใดก็ตาม) นอกจากนี้ยังช่วยให้ผู้พิการทางสายตาเข้าใจว่าภาพนั้นเกี่ยวกับอะไร

แอตทริบิวต์ "title" เป็นแอตทริบิวต์ที่ถูกต้องในการแสดงคำแนะนำเครื่องมือพร้อมชื่อสำหรับรูปภาพ

ในความคิดของฉันควรให้ข้อความแสดงแทนอธิบายสิ่งที่มองเห็นได้ในภาพเสมอสำหรับกรณีที่ไม่แสดงภาพ

alt = text [CS] สำหรับตัวแทนผู้ใช้ที่ไม่สามารถแสดงรูปภาพแบบฟอร์มหรือแอพเพล็ตแอตทริบิวต์นี้ระบุข้อความอื่น ภาษาของข้อความทางเลือกถูกระบุโดยแอตทริบิวต์ lang

w3.org

ฉันเชื่อว่า alt เป็นสิ่งจำเป็นสำหรับการปฏิบัติตาม XHTML ที่เข้มงวด

ดังที่คนอื่น ๆ ได้กล่าวไว้ชื่อนี้มีไว้สำหรับคำแนะนำเครื่องมือ (ดีที่มี) alt มีไว้สำหรับการช่วยสำหรับการเข้าถึง ไม่มีอะไรผิดปกติกับการใช้ทั้งสองอย่าง แต่ควรมี alt เสมอ

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

ALT แอตทริบิวต์

altแอตทริบิวต์ที่กำหนดไว้ในชุดของแท็ก (คือเป็นimg, areaและเลือกสำหรับinputและapplet) เพื่อให้คุณสามารถให้เทียบเท่าข้อความสำหรับวัตถุ

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

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

แอตทริบิวต์ชื่อเรื่อง

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

ตัวอย่างที่ 1: เมนูแบบเลื่อนลงที่ จำกัด ขอบเขตของการ
ค้นหาแบบฟอร์มการค้นหาใช้เมนูแบบเลื่อนลงเพื่อ จำกัด ขอบเขตของการค้นหา เมนูแบบเลื่อนลงจะอยู่ติดกับช่องข้อความที่ใช้ป้อนคำค้นหาทันที ความสัมพันธ์ระหว่างช่องค้นหาและเมนูแบบเลื่อนลงนั้นชัดเจนสำหรับผู้ใช้ที่สามารถมองเห็นการออกแบบภาพซึ่งไม่มีที่ว่างสำหรับป้ายกำกับที่มองเห็นได้ titleแอตทริบิวต์ที่ถูกใช้ในการระบุselectเมนู โปรแกรมtitleอ่านหน้าจอสามารถพูดแอตทริบิวต์หรือแสดงเป็นเคล็ดลับเครื่องมือสำหรับผู้ที่ใช้แว่นขยายหน้าจอ

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

ตัวอย่างที่ 2: ช่องป้อนหมายเลขโทรศัพท์
หน้าเว็บมีการควบคุมการป้อนหมายเลขโทรศัพท์ในสหรัฐอเมริกาโดยมีฟิลด์สามช่องสำหรับรหัสพื้นที่การแลกเปลี่ยนและตัวเลขสี่หลักสุดท้าย

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 

ตัวอย่างที่ 3: ฟังก์ชันการค้นหา หน้าเว็บมีช่องข้อความที่ผู้ใช้สามารถป้อนคำค้นหาและปุ่ม "ค้นหา" เพื่อดำเนินการค้นหา titleแอตทริบิวต์ที่ถูกใช้ในการระบุการควบคุมแบบฟอร์มและปุ่มอยู่ในตำแหน่งที่เหมาะสมหลังจากที่ช่องข้อความเพื่อที่ว่ามันเป็นที่ชัดเจนกับผู้ใช้ที่ช่องข้อความคือที่คำค้นหาที่ควรจะใส่

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

ตัวอย่างที่ 4: ตารางข้อมูลของตัวควบคุมฟอร์ม
ตารางข้อมูลของตัวควบคุมฟอร์มจำเป็นต้องเชื่อมโยงแต่ละตัวควบคุมกับส่วนหัวของคอลัมน์และแถวสำหรับเซลล์นั้น หากไม่มีชื่อเรื่อง (หรือ LABEL นอกหน้าจอ) เป็นเรื่องยากสำหรับผู้ใช้ที่ไม่เห็นภาพในการหยุดชั่วคราวและซักถามเกี่ยวกับค่าส่วนหัวของแถว / คอลัมน์ที่เกี่ยวข้องโดยใช้เทคโนโลยีการช่วยเหลือในขณะที่แท็บผ่านแบบ

ตัวอย่างเช่นแบบสำรวจมีส่วนหัวคอลัมน์สี่คอลัมน์ในแถวแรก: คำถามเห็นด้วยไม่ตัดสินใจไม่เห็นด้วย แต่ละแถวต่อไปนี้มีคำถามและปุ่มตัวเลือกในแต่ละเซลล์ที่ตรงกับตัวเลือกคำตอบในสามคอลัมน์ แอตทริบิวต์ title สำหรับทุกปุ่มตัวเลือกคือการเชื่อมต่อกันของตัวเลือกคำตอบ (ส่วนหัวของคอลัมน์) และข้อความของคำถาม (ส่วนหัวของแถว) โดยมียัติภังค์หรือโคลอนเป็นตัวคั่น

องค์ประกอบ Img

คุณลักษณะที่ได้รับอนุญาตให้พูดถึงMDN

• alt
• crossorigin
• decoding
• height
• importance (API ทดลอง)
• intrinsicsize (API ทดลอง)
• ismap
• referrerpolicy (API ทดลอง)
• src
• srcset
• width
• usemap

ดังที่คุณเห็นtitleไม่อนุญาตให้ใช้แอตทริบิวต์ภายในimgองค์ประกอบ ฉันจะใช้altแอตทริบิวต์และหากต้องการฉันจะใช้ CSS (ตัวอย่าง: คลาสหลอก:hover) แทนtitleแอตทริบิวต์

ไม่ฉันคิดว่าaltจะดีกว่าเพราะจุดประสงค์ของแอตทริบิวต์นั้นคือเพื่อให้ข้อความ "สำรอง" ในกรณีที่ไม่สามารถดูรูปภาพได้ (ไม่ว่ารูปภาพจะหายไปหรือเบราว์เซอร์เองก็ไม่สามารถแสดงได้)

MVCFutures สำหรับ ASP.NET MVC ตัดสินใจทำทั้งสองอย่าง ในความเป็นจริงหากคุณระบุ "alt" ระบบจะสร้าง "title" ที่มีค่าเดียวกันให้คุณโดยอัตโนมัติ

ฉันไม่มีซอร์สโค้ดในมือ แต่การค้นหาโดย Google อย่างรวดเร็วทำให้เกิดกรณีทดสอบขึ้น!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

คุณไม่ควรใช้แอตทริบิวต์ title สำหรับองค์ประกอบ img เหตุผลเบื้องหลังสิ่งนี้ค่อนข้างง่าย:

ข้อมูลคำอธิบายภาพเป็นข้อมูลสำคัญที่ควรมีให้สำหรับผู้ใช้ทุกคนโดยค่าเริ่มต้น หากเป็นเช่นนั้นให้นำเสนอเนื้อหานี้เป็นข้อความถัดจากรูปภาพ

ที่มา: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1มีคำแนะนำทั่วไปเกี่ยวกับการใช้แอตทริบิวต์ title:

การใช้แอตทริบิวต์ title เป็นสิ่งที่ไม่สนับสนุนในขณะนี้เนื่องจากตัวแทนผู้ใช้จำนวนมากไม่เปิดเผยแอตทริบิวต์ในลักษณะที่สามารถเข้าถึงได้ตามข้อกำหนดนี้ (เช่นต้องใช้อุปกรณ์ชี้ตำแหน่งเช่นเมาส์เพื่อทำให้คำแนะนำเครื่องมือปรากฏขึ้นซึ่งไม่รวมผู้ใช้แป้นพิมพ์เท่านั้นและ ผู้ใช้แบบสัมผัสเท่านั้นเช่นทุกคนที่มีโทรศัพท์หรือแท็บเล็ตที่ทันสมัย)

ที่มา: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

เมื่อพูดถึงการช่วยการเข้าถึงและโปรแกรมอ่านหน้าจอต่างๆ:

• ขากรรไกร 10-11: ปิดโดยค่าเริ่มต้น
• Window-Eyes 7.02: เปิดโดยค่าเริ่มต้น
• NVDA: ไม่รองรับ (ไม่มีตัวเลือกการสนับสนุน)
• VoiceOver: ไม่รองรับ (ไม่มีตัวเลือกการสนับสนุน)

ดังนั้นในขณะที่เดนิส Boudreauเพียงพอวาง: ชัดเจนไม่ได้มีการปฏิบัติที่แนะนำ