如何在錨標記中形成可訪問的圖像？

Question

比方說，我有一個像下面的圖像。

根據WCAG，這一形象是功能性的，因爲這將用戶鏈接到另一個頁面。似乎我應該把鏈接的目標放在alt屬性中，如alt="comic homepage"。

會不會有人用視力障礙也想知道圖片中展現的？用戶是否會喜歡alt="comic that links to the cloudtweaks homepage"？漫畫似乎不是純粹的裝飾。

<a href="http:////cloudtweaks.com"> 
    <img src="comic.png" alt=??? /> 
</a> 

This page做類似的事情（滾動靠近頁面的底部）。

Answer 1

您已經提出了這個問題，但沒有提供足夠的上下文。看到周圍的內容，整個頁面或整個網站都會有所幫助。

• 是否有周圍的文字解釋圖像或鏈接的位置？

• 將圖像顯示在頁面上的鏈接後，也許是更完整版本的圖像（如，所有的面板，如果這個形象是許多之一）？

• 網站是否表現類似於這個網站與您有信心用戶所熟悉的其他站點或部分？

屏幕閱讀器將要宣佈，它是一個鏈接，它是一個圖像，然後將公佈圖像alt文本。如果你不認爲有必要提供的圖像之外的一些文字顯示的用戶，那麼你可能並不需要嘗試將其強行進入alt文字也不成title屬性（也do not use a title attribute）。

基本上你想給短視和沒有視力，低視力正常的用戶一樣的體驗。如果您覺得有必要通過使用alt來管理對鏈接所在位置的期望，那麼您應該在鏈接周圍或收集鏈接之前提供鏈接。然後它可以幫助所有用戶。如果您認爲您不需要管理用戶的期望，那麼不要通過在屏幕閱讀器中堵塞額外的文本來強迫它對無視用戶。

Answer 2

這種情況記錄在WC3網站：Image used alone as a linked logo

，你不應該描述這種情況下的圖像文本，但鏈接功能的WCAG says。

當圖像是一個鏈接的僅有的內容，用於圖像的替代文本描述了鏈路的獨特功能。

例如，如果您認爲圖像中的文本應該向屏幕閱讀器用戶描述，則必須更改HTML的結構，例如從鏈接中排除圖像。

<a href="comics.html">Comics</a> 
Image of the day: 
    <img src="..." alt="If the clouds ever did go down would it be called fog?" /> 

或後添加描述（注意，使用aria-describedby的描述可能被隱藏）

<a href="comics.html" aria-describedby="desc"><img src="..." alt="Comics" /></a> 
<div id="desc" style="display:none">If the clouds ever did go down would it be called fog</div> 

但是，這可能是相當擾動，我會說...