麻省理工学院的辅助技术信息中心(ATIC) 参译

麻省理工学院的辅助技术信息中心(ATIC)   参译

无障碍基本目标:

网站内容对下列内容的支持都必须非常的友好: 屏幕阅读器,键盘导航,低带宽连接,禁用JavaScript的浏览器,其他辅助技术和移动设备访问。

特别考虑无障碍:

  1. 视力残疾:
    • 访问未标记的图形,图标,按钮,多媒体存在困难。
    • 表单和框架中的信息可能会由于不良好的标签代码而丢失。
    • 可以使用键盘而不是鼠标。
    • 使用屏幕放大,屏幕阅读器或点字显示器。
    • 字体大小,颜色对比度或其他显示问题的问题。
  2. 听力残疾:需要字幕的音频和视频。
  3. 肢体残疾:可能需要使用键盘来代替鼠标,声音输入,或其他输入法
  4. 认知障碍:需要一致的导航结构。过于复杂的文稿可以是一个问题。闪烁或频闪的设计可能是一个问题。
  5. 技术或带宽的挑战:可能有使用低性能计算机或者低版本浏览器或者使用拨号上网的用户。大文件或那些需要特殊的插件可能会成为一个问题。

5分钟快速检查,您的网站的无障碍可访问性问题:

  1. 在浏览器中关闭图像
    (确保图像占位开启)
  2. 关闭JavaScript支持
  3. 使用Tab健进行页面导航
  4. 尝试更改浏览器中的标准字体的颜色和样式
  5. 尝试使用浏览器增加字体大小(查看>文字大小>增加)
  6. 关闭样式表的支持,您的网站看起来仍然是有可读性吗?

最佳实践

  • 标记所有图片
  • 使用分级结构标签(使用的标题<H1> – <H6>和 list ul,ol)
  • 友好的键盘快捷方式
  • 屏幕阅读器和辅助技术
  • 科学的选择颜色和对比度
  • 允许调整字体大小
  • 标记表单字段
  • 不要依赖于JavaScript
  • 避免table布局
  • 结构化PDF文件
  • 标记Flash和互动内容
  • 弹出新视窗时通知用户
  • 给视频添加文字说明

无障碍网页免费评估工具:

 

也可以使用下面的技术,实现了初级到中级的可访问性。

标记所有图片:使用ALT标签

  • ALT标签和标题标签应该被添加到嵌入式图像的源代码。
  • 信息冗余或者无意义的图像可以设置ALT =“”。
  • 描述性文字的图片(导航按钮,横幅和图像映射)可以借用图中所示的文本,并使用该文本alt和title属性。
  • 如果图像传达复杂信息,如图表,使​​用简短的ALT标记和图像链接到一个较长的页面扩展的解释使用LONGDESC标签:<IMG SRC =“graph.gif的”ALT =“图捐赠的供者型的“LONGDESC = http://www.website.com/donationsgraph.txt标题=”图捐赠的捐赠者类型“>
  • ALT标签常常被误用,大部分人过度使用。这是更好地离开ALT标签空白(ALT =“”),然后输入文字描述是没有用的,或者是多余的。例如一个标题下面的图像并不需要alt文本相匹配的标题,离开alt文本空白,以避免冗余。

注:应交付使用的图像传达的内容(如方程,图表),网站开发ALT标签标记和说明文字长(通过电子邮件或单独的文件)。开发人员不应该负责创建这个文本。

创建结构:使用页眉和适当的标记

  • 结构良好的页面,按照正确的语法,并通过W3C验证是最方便的。
  • headings(<H1> – <H6>)可以跳过,可以使网站通航用户与屏幕阅读器,文本浏览器等。
  • 标签链接正确,避免使用“点击这里” – 是短暂的,但描述性。
  • 使用跳过
    跳过的链接链接应该被用来允许屏幕阅读器直接进入到所需的内容,或跳过共同每一页的导航元素。 要创建一个跳转链接:使用标签页面上的锚链接1×1的gif图像清晰。像这样:
    <a href=”#content”> <img src=”images/1pixel.gif” alt=”Skip content” /> </ A>
  • 使用id和name当创建锚标签:<a id=”content” name=”content”>
  • 您还可以创建一个跳转链接可见,这将有利于那些依靠键盘上的快捷键以及屏幕阅读器。这通常是一个“跳到内容”链接的页面左上方立即。

键盘的快捷键或访问键

  • 访问键可以提供一个快捷方式到各大领域的网站(主页,搜索等)。
    它是由分配在<HREF>标签内的访问键内设置置。<a href=”../index.html” accesskey=”1″>
  • 要按照页面上的链接访问键,用户必须使用组合键:
    Mac:Control+访问键
    Windows:ALT +访问键
  • 下面的链接代码:
    <a href=”http://web.mit.edu/atic/www/index.html” accesskey=0> <img src=”../images/spacer.gif” alt=”link to home page” accesskey=”0″ width=”1″ height=”1″ border=”0″ /> link to home page </a>
  • 让用户知道他们可以使用键盘快捷键,在主页列出这些快捷方式,并指示如何使用它们在Mac或PC。理想情况下,在全站导航和页尾都应该提供快捷,访问键提示。
  • 不要过度使用访问键。太多的accesskey会给用户创造其他问题和障碍。

屏幕阅读器和辅助技术:

明智地选择颜色和对比度:永远不要使用颜色来传达信息

  • 使用符号或图形或其方式,在一个单色的环境运行。
  • 要进行有效的对比测试页,包含背景色,查看黑白打印机打印下的效果。
  • 色盲,红黄蓝无法明显区别。
  • 米色,黄色,橙色视为红色和绿色。
颜色相关资源:

对比度测试工具:

允许字体大小设置:确保控制字体

  • 不能调整大小与像素测量(PX)创建样式表在Internet Explorer的Windows。要允许用于调整窗口大小样式表使用另一种测量,如时间,PT,或相对大小。
  • 阅读W3C规范CSS相对字体和字体大小属性在新窗口打开
  • 指定通用字体家族在新窗口打开在样式表中的字体声明。
  • 指定所有五个属性:所有文件(HTML和CSS文件)的文字颜色,链接,才可生效,alink的,和背景颜色,以避免你的样式表,一个用户可能已经默认设置之间的冲突。
  • 我们建议使用身体的95%,或12点,字体(类似的像素大小,但12%和EMS是可调整大小的窗口在IE浏览器)。这大致相当于.85 – .95 EM取决于屏幕分辨率设置(即96或72DPI)。
  • 了解 相对字体大小和可访问性,除了名单上的网站在新窗口打开
  • 见风格的字体浏览器的截图在新窗口打开,列出每个平台和字体样式。或方法。

避免使用表格布局

  • 使用样式表和div标签进行可视化布局。
  • 使用table做复杂的数据。
  • 为table添加header信息<th></th>。
  • 在非常必要的情况下,使用元素和摘要属性来描述清晰“是表格布局,非数据”

无障碍表单:

(Source: list from Chapter 12 of Joe Clark’s book Building Accessible Websites, New Riders, 2003)

  • 表单区使用加上<fieldset> </ FIELDSET> <optgroup> </ OPTGROUP>。
  • 不要编码表单,让用户可以第一时间控制自己选择,而不是跳转到编码功能去。包含go button(或者类似的功能)
  • 尽可能多的使用五个表单元素: alt,name,value,id,title-在该页面的DOCTYPE声明通过HTML校验,在新窗口打开
  • 表单内容来源:webaim.org

交互内容/ flash

Javascript

  • 所有基于JavaScript的导航都应该包括备用的图像导航或文字链接导航不在<script>标签中。
  • href标记应该用于直接链接到内容,不管是在父 (target=”_parent”)窗口,或一个新的(target=“_blank”)窗口,让禁用JavaScript功能的浏览器可以访问的内容。
  • 使用​​鼠标事件处理,额外添加键盘处理事件,
    例如使用键盘事件处理程序<onclick=openWin(index.html) onkeypress=openWin(index.html)>
  • 阅读关于如何使Javascript的“跳列出”访问:http://jimthatcher.com/webcoursea.htm的#Webcourse10.1.5,在新窗口打开
  • 非鼠标事件处理程序的详细信息,请参阅在 watchfire.org
  • 当使用JavaScript事件处理程序,返回false,不支持JavaScript的浏览器,href将失败。
  • 详细跟踪Javascript的可访问性问题….

弹出窗口

  • 弹出窗口调用单独的HTML内容,使用onclick和onkeypress事件处理程序打开的窗口(返回false,这样的href后面没有启用JavaScript的浏览器),直接点的href的HTML内容,瞄准一个“_blank”窗口。这将允许启用JavaScript的键盘用户能够受益于JavaScript窗口控制,同时允许非JavaScript使用户能够查看的内容,但在整个浏览器窗口。
      <a href=”index.html” target=”_blank” onclick=”openWin(index.html); return false;” onkeypress=”openWin(index.html); return false;”>
此条目发表在 技术 分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注