anjia
commented
4 years ago 1.1 替代文本
HTML
<!-- H2. 将 image 和 text 放在一个a链接里 -->
<a href="https://www.so.com">
<img src="logo.png" alt=""> 360搜索
</a>
<!-- 所以：
1. 装饰性图片/图标，可用CSS实现
2. 左图右文的，“左图”可设置成对AT不可见
3. 纯图片的（比如首页图标），则提供 alt="" 或者 title="" 说明
-->
<!-- H30. 链接，提供链接的目的说明（而不是“查看更多”等..） -->
<a href="routes.html">Current routes at Boulders Climbing Gym</a>
<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym" />
</a>
<!-- H37. 给 img 标签提供 alt -->
<img src="" alt="">
<img src="" alt="搜索首页">
<img src="">
<!-- 所以：具体使用时，看怎么赋值 -->
<!-- H45. longdesc 提供长说明（链接到其它地方：新页面/当前页的锚点处） -->
<img longdesc="thispage.html#desc" alt="Line graph of the number of subscribers" src="">
<div id="desc">
<h3>Long Description: Line graph of the number of subscribers</h3>
<!-- Full Description of Graph -->
<p>Long description ends.</p>
<div>
<!-- H24. usemap -->
<img src="welcome.gif" usemap="#map1" alt="Areas in the library. Select an area for more information on that area." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference" />
<area shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab" />
</map>
<!-- H86. ASCII艺术（用字符排成图片/图形/表情）、表情符号、leetspeak -->
eg.惊吓的表情
=8-0 (fright)
<abbr title="fright">=8-0</abbr>
<img src="fright.gif" alt="fright"/>
eg. 用字符画了个蝴蝶
Figure 1: ASCII art picture of a butterfly.
<a href="#skipbutterfly">Skip ASCII image</a>
<a name="skipbutterfly"></a>
eg.Leetspeak
"Austin Rocks" 奥斯丁岩石
<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr>
<!-- H44. 表单控件，input 的 label -->
<!-- H65. 表单控件，title -->
<!-- H其它 -->
<object></object>
<applet></applet>
目录
4个准则、13个指南、30+20+28个实战要求
技术 General Techniques T: Plain-Text Failures
Html Css ARIA
SCR: Client-Side Script SVR: Server-Side Script
SM: SMIL PDF FLASH SL: Silverlight
https://www.w3.org/WAI/WCAG21/quickref/