2

更新 2:再次编辑以更清楚地关注残疾游客

单独应用 ARIA 地标角色是一项重大的可访问性改进,还是一项收效甚微的折中措施?网站是否可以做其他相对简单的事情来显着提高可访问性?

  • 我所说的可访问性是指残障人士的可用性,例如视力障碍、使用鼠标困难等。
  • 简单来说,我的意思是对网站主要模板上的页面结构进行大规模更改,而不是对每个页面进行手动调整。

例如,应用 ARIA 标志性角色的一个步骤对于许多网站来说都是可行的,只需更新他们的博客或内容管理软件模板。整整九码来注释每个小部件的交互状态要困难得多,除非底层平台已经这样做了。

以下是网站可以采取的一些可能步骤,所有这些步骤都是相对容易实现的:

  • 将所有内容放在 HTML5 语义容器标签中,特别是文章、旁边、导航、部分、图、无花果标题、页脚、页眉和主
  • 将 ARIA 地标角色分配给内容容器和 HTML 标题
  • 将 aria-labelledby 和 aria- describeby 属性分配给适当的内容容器
  • 为内容容器设置标题属性(不太理想,因为它被所有人看到)

其中哪些值得做?综上所述,它们是否会对残疾人的无障碍环境产生真正的影响?还有其他简单的东西可以提高可访问性吗?

(我特别不是在谈论表单或交互性,那是另一个话题。我也不是在谈论确保 HTML 和图像颜色具有良好的对比度,不是因为它不重要,而是因为必须在案例中完成- 逐个基本,而不是在全局模板中。)

4

4 回答 4

3

您将获得最大的可访问性影响,重点是强大的键盘导航和周到的 DOM 结构,包括清晰的标题轮廓和带有 HTML 和 ARIA 的语义部分。键盘导航是屏幕阅读器用户和许多行动不便的人的主要导航模式,因此您的网站中的任何操作或工作流程都需要一个基础。

请务必使用 HTML5 分段元素。除了使您的标记和 CSS 规则更优雅之外,它还为屏幕阅读器更清晰地定义了页面结构,并使页面导航更容易。许多元素的语义已经在 NVDA、JAWS 和 VoiceOver 中得到支持——尽管不一致。

ARIA 地标在这 3 个屏幕阅读器中也有很好的支持,特别是作为跳过冗余标题内容的一种方式。role='main'在包含元素上使用您的主要内容。

aria-describedby并且aria-labelledby对于复杂的形式和模态很有用。不过,在依赖这些属性之前,请专注于创建连贯的阅读顺序以及清楚地标记和分组表单元素。具体来说,使用for属性将<label>s 与其控件关联,使用<fieldset>s with<legend>对相关控件进行分组。

一般避免使用该title属性。无法通过键盘焦点显示其内容,因此对于不使用屏幕阅读器的纯键盘用户(更不用说移动设备)而言,它实际上是无用的。

根据您内容的范围,您需要比这些建议更进一步以获得强大的可访问性,但您在尝试首先解决容易获得的成果方面有正确的想法。它会走很长一段路。

于 2013-04-20T00:52:10.663 回答
3

通过将其标记为 *,它告诉我您正在制作的网站是为美国联邦政府或采用该标准的州提供的。第 508 节概述了残疾人可以理解的标准。一些机构制定了自己的清单,既可以扩展标准,也可以模仿标准;例如HHS 的清单。我建议您与该机构的第 508 节协调员联系,了解他们为确定 508 合规性所做的工作。但是,如果您希望政府机构使用您的产品,我建议您为其填写 VPAT

如果你想建立可访问的网站,一般来说,我建议遵循WCAG 2.0

单独应用 ARIA 地标角色是一项重大的可访问性改进,还是一项收效甚微的折中措施?

ARIA 在一定程度上有助于可访问性。ARIA 让您将页面的某些区域标记为热点。我建议你看看我的可访问性或我的关于 ARIA的答案

网站是否可以做其他相对简单的事情来显着提高可访问性?

有些事情很简单,我建议查看我上面发布的链接作为起点,然后询问有关实施的问题。WebAIM 也有一些关于可访问性的资源。


来自评论

我正在寻找一个网站可以采取的对用户有实际实际好处的行动,即使他们不能达到第 508 条要求的程度

我建议不要以这种心态继续前进。第 508 节的所有规定或 WCAG 的指导方针都有实际好处,问题是哪些适用于您的站点/应用程序。例如,如果您有一个带有一个标题行和/或一列标题的表格,则条款 (g) 将适用:

(g) 应为数据表确定行和列标题。

但是,如果您有一个更复杂的表 (g) 将不适用,而是 (h) 将是:

(h) 对于具有两个或多个逻辑级别的行或列标题的数据表,应使用标记来关联数据单元格和标题单元格。

然而,在 WCAG 中,没有这样的表格指南,它隐藏在1.3.1、信息和关系下,并在WCAG 2.0 技术 H51中有详细说明。我可以对 508 的每个条款或 WCAG 2.0 的指导方针提出相同的论点。

标题是迄今为止最常用的页内导航,大多数读者用户现在都知道或 ARIA 地标,但使用习惯却大不相同。

是的,HTML 标题是最广泛使用的导航方法,因为它们自 HTML 2.0(1995 年 11 月)以来一直存在。但是,对于使用屏幕阅读器和使用 Opera 网络浏览器的人来说,它们只是一个导航选项。Firefox 可能有一个附加组件,但没有查找。如果您要在您的网站/应用程序中实施标题(我推荐),请注意您使用的标题。它们应该形成某种层次结构,所以不要因为字体的外观而从 a 跳到<h1>an ;<h4>相反,使用<h2>, 并使用 CSS 重新设置样式。

这对于 ARIA 也是一样的。ARIA 导航仅适用于 JAWS、NVDA 和我相信 WindowEyes,但对于所有其他辅助技术,不适用。Firefox 有一个附加组件,用于 ARIA 地标的基本导航(我个人不喜欢它)。然而,在浏览器实现导航 ARIA 地标的内置方式之前,您不能只是将它们弹出并说您的网站现在可以完全访问。

*-保留有关第 508 节的部分以供参考,因为问题最初是用它标记的。

于 2013-04-17T14:08:09.530 回答
1

几个简单但有效的步骤:

确保非鼠标用户可以看到焦点所在的元素。许多 CSS 重置样式会删除浏览器的默认设置。虚线比颜色好

button:focus {
    outline: dotted 1px #000;
}

a:focus {
    outline: dotted 1px #000;
}

但如果使用颜色,则应满足颜色对比度要求。查看https://addons.mozilla.org/en-us/firefox/addon/juicy-studio-accessibility-too/

将“跳转到主上下文链接”作为页面上的第一个选项卡项。看看http://www.anz.com.au就是一个很好的例子。只需点击它。

请务必注意,屏幕阅读器用户可以仅使用标题(H1、H2 等)进行导航,因此这一点尤为重要。另请注意,当他们到达表单或表单元素时,他们还使用向下箭头来导航内容和选项卡。

希望这会有所帮助。

于 2013-05-20T02:59:41.893 回答
0

减少到达某个地方所需的点击量,这也与确保从您的主页轻松访问网站上最常用的功能密切相关。此外,请确保在整个网站的每个页面上都可以轻松找到您网站的相同“重要”用途。

您可能认为只需单击主页,然后从那里访问生命体征很容易,但用户往往真的不喜欢这种架构。虽然,那是针对主流普通用户的。如果您要迎合特定类型的用户,则需要调整整个架构。

分析是关键……祝你好运!

于 2013-04-17T04:22:28.357 回答