跳到主要內容
:::|

4.5:EV2040500 使用CSS來將文字取代成影像文字,並提供使用者介面控制元件來加以切換

稽核評量碼

EV2040500

訊息

使用CSS來將文字取代成影像文字,並提供使用者介面控制元件來加以切換

英文訊息

C30: Using CSS to replace text with images of text and providing user interface controls to switch

評量條件

所有網頁中若包含文字,所有文字必須遵守此規範。

評量步驟

1. 原網頁文字

原網頁文字

【HTML】

<div id="recipe">

   <h3>Marinara Sauce</h3>

   <ul>

     <li>2 lbs Romas</li>

     <li>2 cloves garlic</li>

     <li>1 Tbsp olive oil</li>

     <li>1 Tbsp sugar</li>

     <li>1 Tbsp oregano</li>

     <li>1 tsp salt</li>

   </ul>

</div>

2. 使用CSS呈現影像文字

使用CSS呈現影像文字

【CSS】

#firHeader {

   width: 300px;

   height: 50px;

   background: #fff url(firHeader.gif) top left no-repeat;

}

 

#firHeader span {

   display: none;

}

參考資源

http://www.w3.org/TR/WCAG-TECHS/C30.html

http://phark.typepad.com/phark/2003/08/accessible_imag.html

http://moronicbajebus.com/wordpress/wp-content/cssplay/image-replacement/

http://wellstyled.com/css-replace-text-by-image.html

http://www.alistapart.com/articles/fir/

http://www.digital-web.com/articles/in_defense_of_fahrner_image_replacement/

http://en.wikipedia.org/wiki/Fahrner_Image_Replacement

http://www.w3.org/TR/CSS2/colors.html#background-properties

http://wiki.novemberborn.net/sifr/

上一頁| 回首頁