十大建议,让你的网站访问

  1. 选择一个内容管理系统支持无障碍
  2. 使用正确的标题来组织你的内容的结构
  3. 包括图像适当替代文本
  4. 给你的链接唯一的描述性名称
  5. 用色彩小心
  6. 设计您可访问形式
  7. 表格数据,而不是布局使用表
  8. 确保所有的内容,可以单独用键盘以逻辑方式进行访问
  9. 使用ARIA角色和地标(但仅在必要时)
  10. 使动态内容访问

1.选择一个内容管理系统支持可访问性。

有可以帮助你建立你的网站的许多内容管理系统。常见的例子包括Drupal和WordPress的,还有很多其他的,但可用的选项。

一旦您选择适合您的需求该CMS,一定要选择一个主题/模板是可访问的。咨询主题的有关辅助说明和用于创建这一主题访问的内容和布局的技巧文档。一定要遵循同样的原则选择模块,插件或小部件。

对于像视频编辑工具栏和玩家的元素,确保他们支持创建访问的内容。例如,编辑工具栏包括为应对访问的标题,表格,和视频播放器的选择应该包括隐藏字幕。 CMS的管理选项(如创建一个博客张贴或发布评论)应该可以访问也是如此。

返回列表的提示

2.使用标题来正确地组织你的内容的结构。

用户可以使用屏幕阅读器来浏览内容的标题结构。通过使用标题(

,

等)正确,从战略上讲,你的网站的内容将精心组织,并通过屏幕阅读器容易理解的。

一定要通过使用CSS(层叠样式表)坚持以标题的正确顺序,并单独呈现的结构。不挑头,只是因为它看起来不错,在视觉上(这会混淆屏幕阅读器的用户);相反,创建一个新的CSS类风格你的文字。

正确使用标题的例子:

  • 采用

    该页面的初级职称。避免使用

    对于不是网站的标题和单页的标题以外的任何。

  • 用标题来组织内容指示和结构。
  • 不要跳过标题级别(例如,从去

    ),由于屏幕阅读器用户,如果丢失的内容不知道。

返回列表的提示

3.包括图像适当的替代文字。

应提供图像的说明文字,让用户可以屏幕阅读器,通过在页面上使用图片了解消息传送。重要的是,这是特别的图像信息(如信息图表)。当创建alt文本,文本消息,你应该包含希望通过影像来传达,如果图像包括文本,文本也应包括在alt。

的例外是当图像被纯粹用于装饰;在这种情况下, alt文本可以留空 这使屏幕阅读器用户没有从页面上的更重要内容分心。

如果图像是链接的唯一内容,如果没有提供替代文本屏幕阅读器将读取的文件名。总是被用作链接图像提供替代文本。

返回列表的提示

4.给你的链接唯一的描述性名称。

当包括在内容中的链接,使用文本较好地描述链接将去。使用“点击这里”没有描述的考虑,并且是无效的屏幕阅读器的用户。

就像视力正常的用户浏览网页的文本链接,视觉障碍的用户可以使用屏幕阅读器来扫描他们的链接。其结果是,屏幕阅读器的用户不看内页的其余部分的背景下,经常联系。使用描述性文字介绍正确链接到屏幕阅读器用户的上下文。

该链接的最独特的内容应首先呈现,如屏幕阅读器的用户将通过首字母进行搜索导航链接通常列表。

例如,如果你是指向游客到一个名为“关于我们”页面:

  • 尽量不要说“点击这里 要了解我们公司。“
  • 相反,说:“更多地了解我们公司,阅读 关于我们“。

返回列表的提示

5,用色谨慎。

缺乏色彩的最常见的形式,红绿色彩不足,约8%的影响的人口。如只使用这些颜色(尤其是指示在表单中必填项)会阻止这些人从认识你的消息。

残疾人其他团体,学习障碍具有特别的用户,受益于大大的彩色当用来区分和组织您的内容。

同时满足团体,用色,但一定要还可以使用其它视觉指示器,或以星号这样的问号。可以肯定的当前内容块彼此使用视觉分离处理程序(如空白或边框)区分开来。

有几种 工具,你可以用它来评估对比色,这将帮助你把你的页面使用尽可能在视觉上给个体色彩的低视力或失明不同级别。

返回列表的提示

6.设计表单的可访问性。

当表单字段没有适当标记,屏幕阅读器用户不具有可作为有远见的用户相同的线索。可以说,它是不可能告诉什么类型的内容应输入表单字段。

表单中的每个字段应该有一个很好的定位,描述性标签。例如,如果该字段是一个人的名字,它适当地被标记为不是“全名”或有两个不同的领域标记为“名”和“姓氏”。使用

当你正在经历一个表单域,能够标签的人应该通过形式和获得“提交”按钮前填写的所有字段,甚至没有意识到他们君那附加字段存在。从本质上讲,Tab键顺序应遵循的视觉秩序。

如果您有相关领域或类似的使用考虑字段集分组在一起。例如,像“全名”和“出生日期”字段可以一起为分组“的个人信息。”这种类型的组织可以帮助形成一个进步的屏幕阅读器用户跟踪,并能提供可能,同时填写表格丢失的上下文。

如果某些需要的表单字段,该字段应相应地标记,并且被配置成提醒用户屏幕阅读器。通常,所需的字段如前所述这样的星号有了,不会被一些屏幕阅读器说。星号(或类似视觉标志)仍然应该用于视力正常的用户,有学习障碍或人说话的人英语WHO作为第二语言。即指示需要字段给屏幕阅读器可以通过添加所需的咏叹调=“true”和需要咏叹调=“假”为可选字段来实现。提交表单后,用户需要警惕任何提交提交确认和错误。我们建议在页面标题(用户提交后)任何错误计数,因此用户将被告知立即还有那网页上的错误。如果用户提交有错误的一种形式,用户应提请提交页面指示错误是什么,并提供一个简单的方式来浏览这些错误。

最后,验证码人迹罕至的使用和用于不应该被验证的提交。 WebAIM有接近的替代品有用的摘要 验证码到形式,以保持无垃圾邮件提交的。

返回列表的提示

7.使用表的表格数据,而不是布局。

使用表格进行页面布局增加了额外的冗长屏幕阅读器的用户。当屏幕阅读器遇到一个表格,用户被告知,有一个表的“X”号列和行的,从内容分心。此外,内容可以在不匹配页面的视觉秩序的顺序读取。不创建使用表网站的布局;相反,使用CSS呈现。

当一个数据表是必要的(即有一组即以表格形式最好的解释,比如银行对账单数据)的行和列,使用标题,这有助于解释细胞之间的关系。表格单元格在复杂的可能有几个表有彼此独特的关系,并确定了这些应该是通过使用HTML的“范围”属性。表格标题(HTML5)可用于提供额外的信息给用户关于如何更好地阅读和理解的关系表。

返回列表的提示

8.确保所有的内容可以在一个合乎逻辑的方式仅使用键盘进行访问。

随着用户的移动性障碍,重复性压力伤害包括,可能无法使用鼠标或触控板。单开关输入或嘴棒,这些人都能够访问内容通过按“标签”或“箭头”键,或通过使用替代输入装置使用一个键盘的:如。其结果是,该标签顺序相匹配的视觉顺序应该,所以只有键盘,用户可以通过内容网站逻辑导航。

有很多页长的内容应该分手的锚链接(跳转列表)允许用户键盘只跳到页面的相关部分,而无需通过其他的内容进行谈判。 “跳到主要内容”应当在每个页面的顶部提供,所以只有键盘,用户不会为了得到主要内容,通过页面导航有标签。

本地与菜单和多层次,分项目,应该进行配置,以便所有菜单项可以用键盘访问的菜单页面。不使用的元素不仅激活了时用鼠标项目的用户悬停,键盘只有屏幕阅读器或用户将无法激活它们。

返回列表的提示

9. ARIA角色和使用的标记(但只在必要时)。

咏叹调(富互联网应用程序访问)是将无障碍信息元素的复合,强大的技术规范都不是本地访问。你应该总是使用本地的HTML元素时可获得。请记住,咏叹调的第一条规则是“不使用咏叹调。”这曾经的许多功能需要现在ARIA属性在HTML5实现的。

例如:

  • 使用本地的HTML标记按钮而是按钮的咏叹调作用。
  • HTML改为使用标签标记咏叹调标签或宋体 - labeledby的。
  • 使用HTML 5的导航标签而不是导航的咏叹调作用。

ARIA属性可以添加到您的HTML,以同样的方式,你才能从CSS添加到类加载HTML属性。

请注意,唱段只是添加属性不足以使最复杂的部件进行访问。咏叹调什么都不做只键盘的用户(见#8提示);它仅使用辅助技术影响的人。你仍然需要使用JavaScript设置您的交互和行为。

使用唱段合适的例子包括:

  • 加入警报通知的动态页面屏幕阅读器的变化,股票行情和用户:如搜索过滤器。
  • 制作复杂,各种交互式小部件:如日期选择器屏幕阅读器的用户访问。

返回列表的提示

10.使动态内容访问。

当内容动态更新(即无需刷新页面),屏幕阅读器可能不知道。 ESTA包括屏幕覆盖,灯箱,在页面更新,弹出窗口和模式对话框。只有键盘的用户可能会被困在页面覆盖。放大软件的用户可能会在页面的部分是错误的缩放。

这些功能可以易于获得。 ARIA选项包括角色和警报,以及前端开发框架的具体支持辅助功能。

确保视频播放器不会自动播放(非自愿的声音),而且玩家可以用键盘来使用。此外,所有影片必须有字幕和成绩单为听力障碍的选项。

如果您的网站包含幻灯片,确保每一张照片有替代文字,可以通过键盘进行导航。如果您正在使用的任何独特部件的处理程序(如日历选择器或拖滴),一定要测试的可访问性。

返回列表的提示