• 提高网站可访问性


    可访问性 英文译为 Accessibility
    在Web前端开发界,有三个词经常被提及:可用性(Usability)、可访问性(Accessibility)和可维护性(Maintainability)。在《Web Content Accessibility Guidelines 1.0(Web内容可访问性指南)》里,对可访问性的描述是:Web内容对于残障用户的可阅读和可理解性。同时指南里还特别指明:提高可访问性也能让普通用户更容易理解Web内容。
    具体而言,要考虑以下两方面:
    无论用户是否残障,都得通过用户代理(User Agent)来访问Web内容。因此要提高可访问性,首先得考虑各种用户代理:桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。在Google, 专门聘请了一些残障雇员,来帮助提高产品的可访问性。
    还得考虑用户访问Web内容时的环境限制。比如:嘈杂的环境、过暗或过亮的房间、或者是免提等各种情况。这是更高一层次的可访问性要求,做到了,能造就产品在特定领域的核心竞争力。

    那么在编写代码的时候应该怎么注意提高可访问性呢?

    1.对比度,确保你的网站有足够的对比度

    2.不要用色彩作为唯一的标识,如股票不只有颜色表示,还有箭头,因为对于色盲来说红色和绿色是容易搞混的。

    3.给图片加alt,alt=”"会被屏幕阅读器忽略,role=”presentation”可以让屏幕阅读器忽略图片。

    4.当链接文字和背景同色时,加一个background color,否则当背景图片为透明时可能会产生问题。

    5.当使用position:absolute; left:-999em来创建离开屏幕的文本在html设置dir=”rtl”时会产生很长的滚动条。

    6.正确使用clip

    7.不要忘记键盘的可访问性,不要移除focus和active的样式,除非你找到替代的方法,因为click事件是被键盘和鼠标用户支持的。

    8.不要用链接作为一个button,如果要用的话至少加一个role=”button”,你也可以把一个button做成链接的样式。

    9.绑定input和label,用屏幕阅读器测试一下你的表单

    了解更多,请访问Yahoo! Accessibility Lab的代码去发现可访问性的最佳实践。

    一篇非常好的文章;

    25 Ways To Make Your Website Accessible

    译文:

    http://www.topcss.org/?p=305

    http://www.cnblogs.com/zuiaitianxibi/archive/2013/04/07/3006298.html

  • 相关阅读:
    《Graph Attention Network》阅读笔记
    Spark 中的机器学习库及示例
    Spark 中 RDD的运行机制
    Spark 的 python 编程环境
    1.10系统调用和库函数
    nginx中的configure脚本
    nginx中的main函数
    IPv4,IPv6套接字地址结构
    unix网络编程中的地址转换函数
    有关nginx中Strings模块中ngx_explicit_memzero()函数的死区消除优化问题
  • 原文地址:https://www.cnblogs.com/youxin/p/3404478.html
Copyright © 2020-2023  润新知