2015-11-26 37 views
4

這是一個非常(非常)的特定問題,但在使用該標記顯示ASCII藝術時,將alt屬性用於pre標記是否合適?它基本上像一個圖像(使用屏幕閱讀器不會理解),所以使用alt是有道理的。HTML中的ASCII藝術的Alt屬性?

<pre alt="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre> 

會被屏幕閱讀器讀取嗎?這是適當的還是好的形式?

(我能想象這個地方可能會出現,就像使用印刷對象來表示一個特定的動作,如「家」鏈接的其他情形。)

+0

我喜歡這個想法,語義上,但'pre'甚至有'alt'屬性?如果它是非標準的,那麼它對屏幕閱讀器等的適用性可能是沒有意義的。 – David

回答

4

aria-label屬性存在用於此目的。

<pre aria-label="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre> 

欲瞭解更多信息,檢查出this MDN article on it

+0

謝謝!我無法看到有關瀏覽器支持的任何信息 - 大多數屏幕閱讀器用戶都可以訪問嗎? – JeffThompson

+0

啊,發現一些信息:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ#Browsers – JeffThompson

+0

另外:(1˃̵ᴗ˂̵)和 – JeffThompson

1

您有不同的選擇需要考慮,因爲屏幕閱讀器只是可訪問性大型旅程中的一步。

  1. title屬性

alt屬性是特定於imgarea標籤。對於其他元素,你可以使用title屬性,這將給許多瀏覽器實現的工具提示使用訪問:

HTML5 doc

標題屬性表示元素的參考信息,比如會適用於工具提示。在鏈接上,這可能是目標資源的標題或說明;在圖像上,它可能是圖像信用或圖像描述;在一段中,它可能是對案文的腳註或評註;在引文中,它可能是關於來源的進一步信息;在互動內容上,它可以是元素的標籤或使用說明;等等。值是文本。

警告!目前不鼓勵依賴title屬性,因爲許多用戶代理不按照本規範的要求以可訪問的方式公開屬性(例如,要求諸如鼠標之類的指點設備導致工具提示出現,這排除了僅鍵盤用戶和只觸摸用戶,例如任何擁有現代手機或平板電腦的用戶)。

title屬性可能與某些條件下使用:使用它可指定的元素(使用tabindex=0),以便它可以用鍵盤來訪問,使用JavaScript來顯示工具提示當瀏覽器不和給出了視覺線索,我們可以通過聚焦元素(底層,問號......)來訪問定義。

  • aria-label屬性
  • 許多屏幕閱讀器默認不讀title屬性的值,因此鼓勵您使用aria-label這是莫名其妙特定於屏幕閱讀器。 由於不使用屏幕閱讀器的人不會受益於aria-label,因此您必須將其與title屬性結合使用。

    請注意,您可以使用兩種不同的文字,因爲當aria-label更符合文字替換時,title可用作說明。

    <pre aria-label="Welcome!" title="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre> 
    
  • 忽略它。
  • 你也可以認爲這是毫無意義的屏幕閱讀器,並使用aria-hidden屬性考慮它作爲一個純粹的裝飾文本。

    <pre aria-hidden="true">༼ つ ◕_◕ ༽つ</pre>