为了确保我的网站可以访问,我应该遵循的最低步骤是什么?


35

我正在尝试遵循一个非常重要的标准,我必须承认,直到最近我还是忽略了它。我想确保大部分残障人士可以访问我的页面。我主要关注于文本和图像密集型的教程,但没有视频/ Flash或任何形式的动画。

为了确保许多残疾人在使用我的网站时能获得良好的体验,我可以遵循什么清单?我应该最了解哪些残疾人?

我知道我无法取悦所有人。我已经阅读了W3C指南,但是我不确定是否适用什么标准。我不是在构建Web应用程序,而是在构建Wiki,例如信息交流,博客和偶尔的论坛。


uxexchange.com?
鲍比·杰克

Answers:


18
  • 确保每个图像都有替代文本。
  • 确保您的配色方案适合那些有色盲的人。
  • 为视障者提供高对比度的布局或大文本布局。
  • 确保从上下文中读取时您的链接有意义(即,不要只写“单击此处”)。
  • 如果用户不支持JavaScript,请确保您的站点仍提供完整的基本功能。

W3 通过其网站提供了一些有关可访问性的基本提示。乔·克拉克(Joe Clark)拥有他的“建立可访问的网站”一书的在线版本,该书可免费查看,其中包含许多有用的信息。


1
对于“替代文字”规则有一些警告。不幸的是,我与将其视为一成不变的规则的人一起工作-即每个图像都必须具有alt属性。然后,他们在徽标图像中添加“我们公司的徽标”,并在与Twitter帐户链接的图像中添加“蓝色大”。
鲍比·杰克

有了alt标签,我相信每张图片都应该有一张。使用屏幕阅读器时,您需要告诉它该怎么做。如果您的图像只是为了视觉上的吸引力而没有其他值,请使用alt =“”,以便屏幕阅读器知道忽略它。如果您的图像是图形或标题,请确保在alt标记中包含该信息,以使屏幕阅读器以及禁用图像的人们不会错过。
ph33nyx

8

进行标记语义化是迈向可访问性的重要一步,如果可以在不应用任何CSS的情况下浏览您的站点,并且其内容有意义,那么其他所有内容都只是肉眼可见!


1
裸CSS日还有更多的乐趣:)
Tim Post

2
哈哈,自然!但是,严重的是,很多人认为可访问性与设计有关,这是完全相反的,如果您可以制作内容使其无需任何设计即可工作,那么机器(因此也就是人)将始终可以访问它。
托比

7

首先,“残疾人”一无是处!

因此,让我们看一下您需要检查的人群才能成为您的网站。

一个只有一本小屏幕笔记本的穷人

您只需要检查浏览器窗口较小时是否可以使用您的网站,就不会太痛苦。

色盲人

有人可以在不查看图标等颜色的情况下使用您的网站吗?

一个人穷人。

当您在浏览器中更改字体大小时,站点中的所有文本是否都会变大,并且布局仍然可以。该网站还可以在小型显示器上使用吗?

您的网站是否使用高对比度版式,如果不是,用户是否容易切换到高对比度版式?

无法使用鼠标的人

以前从未使用过您网站的人可以使用键盘来访问所有功能/信息。(Tab键是否有用?)

阅读能力差的人

您尽可能使用简单的英语吗?

不善于学习新事物的人。

您网站的设计是否基于您的用户已经知道如何使用其他网站?

盲人。

这是一本难书,您所读的大部分内容都不适合比赛!!
首先要消除我们所有其他的访问问题,因为视障者或不能使用鼠标的人比捆绑人多得多。

接下来了解您的目标,例如,如果您的站点是酒店预订网站,则最好提供收费电话号码进行预订,然后仅使酒店信息可用。

大多数盲人发现很难使用他们以前从未使用过的任何交互式网站,但是该网站的设计很好。

那么,您应该提供无网络选项吗?(电话?拜访他们以帮助填写表格的人吗?)

首先,可以在没有任何图像的情况下使用您的网站吗?(Alt文本是执行此操作的一种方式)

鉴于语音软件是从上到下阅读网站的,您的网站可以这样理解吗?

要使具有复杂导航功能的网站易于被绑定人使用是很难的,而且绑定人也无法知道页面的一部分已被JavaScript更新并需要重新读取。

更改项目的颜色以更改状态也不是一个好选择。

学习如何使网站适合绑定人的唯一方法是查看绑定人如何在某些网站上使用屏幕阅读器。这些标准中没有一个是足够好的,它们只是告诉您不应该做的事情,而仅遵循这些标准是不够的(除非您像新闻报纸网站那样仅被提供静态文本)。


1
我喜欢这个答案的第一句话!(当然还有其他句子)
Tim Post



2

我发现马克·皮尔格里姆(Mark Pilgrim)的可免费下载的书籍《深入了解专业知识》是该主题的有用参考点。它是从2002年开始的,但仍然非常相关。诸如“使用正常降级”之类的建议不会过时。




1

#1答案很简单:编写有效的,语义正确的HTML / CSS!上面的所有建议都是好的。这是我几年前写的清单,显示了您应该在所有站点上检查的几件事:https : //forge.iowa.gov/wiki/index.php/Web_Checklist。假定您在FF上具有Web Developer工具栏,但这是免费的并且容易获得。

我感觉到一些简单的事情可以带来真正的改变:

对于表格,请确保使用LABEL标签。它为单选按钮等提供了更大的可单击区域,并且还为屏幕阅读器将它们绑在一起。

我觉得通常被滥用的另一件事是h1,h2,h3 ...标签。如果使用得当,它们可以帮助某人轻松浏览您的页面。如果我们只是随意设置样式并使用它们,那么这对屏幕阅读器和其他无鼠标I / O设备会产生很大的误导。

允许没有您所有漂亮的CSS和图像的情况下浏览页面的人跳过过去的重复代码进入内容也很不错。通常使用隐藏在CSS中的SKIP链接来实现此目的。例如,<a href="#skipnav" class="noshow">Skip past navigation to content.</a>允许跳过冗长的导航。

正如Tony所说,最好的测试之一是剥离页面上的所有花哨功能,看看它是否仍然有意义。


关于ALT标签...每个图像都应有ALT标签。如果图像是内容,则它在ALT标记中应该有描述性的内容(如果只是装饰),请使用空引号alt=""表示诸如JAWS之类的屏幕阅读器可以通过它们。
ph33nyx 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.