美文网首页
Web内容无障碍指南(Web Content Accessibi

Web内容无障碍指南(Web Content Accessibi

作者: 素炒饼 | 来源:发表于2018-01-28 00:40 被阅读0次

相关文章:

关于 Image

  • 图片或者动画均需提供 alt 信息,使得读屏软件可以将图片动画的内容清楚的读出来。
  • 对于某些用于装饰性的图片,则需设置 alt 为空,使得读屏软件可以忽略此元素。
  • 对于图表文件,alt 属性的设置则需要简明扼要的表达出图表的信息,并不用把里面的细节都详细得描述出来。
  • 对于图表文件,alt 属性的设置则需要简明扼要的表达出图表的信息,并不用把里面的细节都详细得描述出来。
<img src="cat.gif" alt="Image about cat" />

<img src="ring.gif" alt="" />

<a href="http://apple.com/iphone/"> 
    <img src="iphone.jpg" alt="">Apple iPhone 
</a>
CSS 将样式跟结构分离

很多装饰性的图片也都放在 CSS 里面来加载,带来的一个问题就是在 CSS 里面的图片在高对比度模式下都无法显示。如果这个图片并不仅仅是装饰性的,还可以触发功能,那就需要从 CSS 里面拿出来,当成一个独立的 img 或者 input元素。

<div class=” save_button” ></div> 
.save_button{ 
    background: url("images/save_button.png"); 
    width: 33px; 
    height: 33px; 
    vertical-align:middle;  
}

这样当用户切换到高对比度模式,这个图片就是一片空白,用户无法再去点击保存。

//推荐使用
<img src="images/save_button.png" alt="save"/> 
<input type="image" src="images/save_button.png" alt="save"/>

关于 Table

  • 布局用 table,读屏软件没必要知道这是一个表,可以通过设置 role=presentation 使 JAWS 忽略这个表,只关注里面的内容。
  • 数据用 table,则需要设置 caption 属性,说明整个表是用来做什么的,使得 JAWS 可以告诉用户这个表的作用。对于每一个单元内的数据,还应该通过 th 属性使得 JAWS 能识别这个数据的表头是什么。对于复杂表,可以通过 id 和 header 属性来标识。

相关文章

网友评论

      本文标题:Web内容无障碍指南(Web Content Accessibi

      本文链接:https://www.haomeiwen.com/subject/ovxaaxtx.html