我目前正在研究有關 HTML5 的網絡無障礙指南。關于圖像，我目前正在 HTML 中添加圖像，如下所示：<!-- Normal Images --><img src="https://placeholder.pics/svg/300x300" title="Image Placeholder" alt="Image Placeholder" aria-labelledby="Image Placeholder" width="300" height="300"><!-- Decorative images --><img src="https://placeholder.pics/svg/100x100" role="presentation" aria-hidden="true" alt="" width="100" height="100">WAI-ARIA 是否建議將普通圖像同時aria-labelledby添加和alt標簽？或者還有什么我應該采用的？我需要為每個裝飾圖像添加role="presentation"、aria-hidden="true"、 和嗎？alt=""他們三個應該一起去嗎？或者只有其中之一？（如果只有其中一兩個，那么是哪一個？）
1 回答
梵蒂岡之花
TA貢獻1900條經驗 獲得超5個贊
對于普通圖像來說，將aria-labelledby和標簽添加在一起是一個好習慣嗎？alt或者我應該采用更好的做法。
詠嘆調標記者
不，事實上，將aria-labelledby和alt添加在一起會導致某些屏幕閱讀器讀取該名稱兩次。只需使用一個alt屬性，這就是它的用途，它擁有最廣泛的支持（100％）并且可以很好地完成工作。
還aria-labelledby需要 DOM 中至少有一個包含文本的元素，您可以通過 ID 引用它。您也可以有多個標簽僅供參考。它旨在用于無法使用語義 HTML 進行標記的其他元素，而不是真正用于圖像（總是有例外，但很少見，這是一般指導）。
例如
<span id="ID1">Read First</span>
<span id="ID2">You can add a second label that will be read second</span>
<div aria-labelledby="ID1 ID2"></div>
標題屬性
也不要使用title屬性，除非您計劃使其與屬性相同alt。否則，鼠標用戶將獲得與屏幕閱讀器用戶不同的體驗，因為title大多數屏幕閱讀器無法訪問該屬性。請參閱我給出的關于該屬性以及如何滾動可訪問版本（如果您想使用它）的深入答案。title
可訪問的圖像示例
所以你最終的、可訪問的圖像將如下所示：-
<img src="https://placeholder.pics/svg/300x300" alt="Image Placeholder" width="300" height="300">
非常方便且易于維護。
?
我需要為每個裝飾圖像添加 role="presentation"、aria-hidden="true" 和 alt="" 嗎？他們三個應該一起去嗎？或者只有其中之一？（如果只有其中一兩個，那么是哪一個？）
替代屬性
您所需要做的就是添加一個空alt屬性。請注意我是如何說空和非空的。例如alt=""不只是alt。用作altnull 屬性將導致某些屏幕閱讀器忽略它，因此文件名將被讀出。
角色=“演示文稿”
為了完整起見，您可以添加role="presentation"，但據我所知，它不會添加任何額外的支持。
話雖這么說，我個人會添加role="presentation"裝飾圖像，因為我們的單元測試將標記任何空alt屬性，除非添加了此屬性。這是一個經過深思熟慮的決定，因此當我們運行測試時，我們不會不斷檢查相同的空alt屬性是否正確。
由于對空alt屬性的支持也達到 99/100%，因此它也完全有效并且只需使用即可訪問alt=""。
詠嘆調隱藏
您想要aria-hidden在外部圖像上使用的唯一地方（主要是時間，總是有例外）是如果您要動態隱藏和顯示它。某些屏幕閱讀器監視 WAI-ARIA 更改比監視 DOM 更改更好。
aria 隱藏和內聯 SVG
我建議在純粹裝飾性的內聯 SVG 上添加 aria-hidden="true",role="presentation"和 ，focusable="false"盡管 Internet Explorer 有時可以讓它們成為焦點。
請注意，無論如何您都不會alt在內聯 SVG 上使用屬性。
裝飾圖像示例
所以你的最終裝飾圖像將是：-
<!--all image types loaded externally using `img` including SVGs-->
<img src="https://placeholder.pics/svg/100x100" alt="" width="100" height="100">
<!--exception for inline SVGs due to focus bug in IE-->
<svg aria-hidden="true" role="presentation" focusable="false">...</svg>
關于 WAI-ARIA 的最后說明
當沒有語義方式時，WAI-ARIA 可以提供信息。
添加額外的 WAI-ARIA 實際上會使可訪問性變得更差。您應該始終從“是否有一種本地方式向屏幕閱讀器提供信息”開始，如果有，則不需要或實際上不推薦使用 WAI-ARIA。
深思熟慮后
我提到內聯 SVG 不使用該alt屬性，而是希望將其用作<title>SVG 的一部分。
- 1 回答
- 0 關注
- 105 瀏覽
添加回答
舉報
0/150
提交
取消