在圖片後面添加文字

我有圖片鏈接按鈕。在高對比度模式下圖像（ok.gif）不可見，所以我想要有替代圖片。我的備用「圖片」是unicode字符unicode \270E。這是工作在高對比度模式，但在正常模式unicode是在圖像。我想讓我的替代「圖片」落後於真實圖片，以便在正常（不是高對比度）模式下不可見。感謝您的幫助。在圖片後面添加文字

a.img-button-edit, 
a.img-button-edit:visited, 
a.img-button-edit:link { 
    width: 28px; 
    height: 20px; 
    display: block; 
    background: transparent url("../Images/buttons/ok.gif") no-repeat top left; 
    background-position: -56px 0px; 
} 

    a.img-button-edit:before { 
     text-align: center; 
     font-size: 1.3em; 
     margin: 0 0 0 0; 
     padding: 0 .2em; 
     content: "\270E"; 
    }

來源

2014-12-22 Raskolnikov

嗯... Z-indext？只要確保爲z-index聲明「位置」即可工作。 – aahhaa

所以，你真正的問題是...？ – jbutler483

將僞元素的內容插入到父元素內的堆棧中。 z-index不起作用。 HTTP：//計算器。com/questions/7822078/z-index-with-before-pseudo-element – fontophilic

我選擇讀你的問題作爲詢問如何與high contrast mode accessibility.

HCM執行圖像精靈刪除所有的背景圖像，並將所有元素的顏色是白色在黑色的背景。這對於低視力人士來說是非常有用的自適應技術，並且這是一個完善的操作系統級別設置，儘管Chrome和其他輔助功能套件會略有不同。憑藉所有的無障礙設計，測試非常重要。

所以我怎麼使用與HCM圖像精靈？

如果您使用傳統圖像精靈，其中單個圖像用作具有不同background-position值的background-image，則這些圖像將從您的HCM頁面中剝離。這是爲了增加頁面的可讀性（回想一下昔日的平鋪gif背景），但這顯然會在工具欄或圖標欄中出現一個大問題，其中圖像是唯一給出的接口。

選擇圖標專用路由有其自己的一套可訪問性問題（手機是否意味着給老年用戶「打電話給我們」？軟盤對2000年出生的人來說意味着「保存」嗎？其他文化怎麼樣？等等）但是，除此之外，您如何從技術上對HCM執行此操作？

Unicode字符更換圖像可以工作，但將很難在您選擇的方式來執行。僞元素被視爲z-index的子元素。我想到的是設置color: transparent;，並允許HCM將其轉換爲黑色，同時允許background-imagePlus, the unicode character is still read aloud to screen readers.一個主意，讓剝離出來。您仍然需要兩個元素，一個包含屏幕閱讀器的文本，另一個包含aria-role="hidden"的圖像。否則，以下內容將被視爲「編輯右下鉛筆」。現在

<a aria-label="edit" class="img-button-edit"><span aria-hidden="true">&#9998;</span></a> 

a.img-button-edit{ 
    color:transparent; 
    width: 28px; 
    height: 20px; 
    display: block; 
    background: transparent url("../Images/buttons/ok.gif") no-repeat top left; 
    background-position: -56px 0px; 
    z-index: 0; 
} 
span[aria-hidden="true"]{ 
    z-index: -1; 
}

，當然，IE8及以上會誤事 '顏色：透明' 或「顏色：RGBA（0,0,0,0）;`所以我用的z-index作爲額外的保險。

但是，你也可以考慮去的the <img> sprite as described by Artz Studio.或Yahoo Accessibility Blog的路線，因爲<img>由HCM原封不動

<a aria-label="edit" class="img-button-edit"><img src="../Images/buttons/ok.gif" aria-hidden="true"></img></a> 

a.img-button-edit{ 
    width: 28px; 
    height: 20px; 
    display: block; 
    overflow:hidden; 
    position:relative; 
    top: -56px; 
}

這將使用<img>元素與overflow: hidden;把你的傳統空的地方<div>或<span>在背景圖像精靈。這在引導語義上更準確。無論哪種方式，我都沒有看到避免爲標記添加額外元素的方法。

來源

2014-12-22 22:18:26 fontophilic

在圖片後面添加文字

回答

相關問題