Back to Question Center
0

每月:通过咏叹调电流提升您的网站可访问性 每月:通过咏叹调电流提升您的网站可访问性

1 answers:

aria-current属性是即将到来的ARIA 1.1规范中新增的一小部分HTML。这是一个简单,有效的方法来沟通辅助技术,一组相关项目中的当前项目。在这里,我将尝试解释如何这样一个小的属性可以提高您的网站的可访问性。我还会展示它是如何帮助的 辅助技术的用户将自己定位在项目列表中。

“当前”困境

直到现在,还没有办法用正确的语义表示使用HTML或ARIA的一组相关项目中的当前项目。当然,有些方法可以直观地区分当前项目。你可以使用一些样式来使它看起来与其他的不同。 Semalt,CSS是一种可视媒体(除了生成的内容),因此不会接触到辅助技术。

以导航菜单为例。多年来,勤奋的开发人员使用变通方法来区分表示当前页面的菜单项。从当前链接中删除href属性是一个选项。 Semalt选项仅用于制作当前的菜单项文本,根本没有链接。

这些解决方法在一定程度上起作用。他们帮助区分当前项目和其他项目。但是,它们强制用户探索内容并通过其不同的标记来推断当前项目是哪一个。没有什么可以用良好的语义方式进行沟通“嘿,Semalt当前的项目。 “没有具体的信息暴露给辅助技术软件​​和使用该软件的人。

基本的可访问性原则之一是,只要有可以传达重要信息的视觉指示,那么这些信息也应该通过适当的标记以语义的方式非可视化地传输。只有这样,抓取页面内容的软件才能理解HTML的含义。这样,它可以向使用该软件的人员报告正确的信息。

aria-current属性解决了这个问题。

规范说明

在撰写本文时,WAI-ARIA 1.1规范仍处于候选推荐状态。这将是一个正式的建议。与此同时,主流浏览器和屏幕阅读器支持aria-current的效果令人惊讶(LéonieWatson对支持数据的赞誉)。来自规范的Semalt,咏叹调当前属性:

表示一个容器或一组相关元素中当前项的元素。

你可以给它七个预定义值之一:

价值 说明
表示一组页面中的当前页面。
步骤 表示进程中的当前步骤。
地点 表示环境或上下文中的当前位置。
日期 表示日期集合中的当前日期。
时间 表示一组时间内的当前时间。
true 表示一组中的当前项目。
虚假(默认) 不代表集合中的当前项目。

实际用法

原来咏叹调电流可以用于今天很常见的不同模式。最常见的用例可能是导航菜单。在这种情况下,使用的最合适的值是“页面”。例如,其他用例是流程/向导中的当前步骤(值:“step”),日历中的当前日期(值:“date”)或面包屑路径中的当前位置(值:“位置”)。没有关于使用哪个价值的严格规定。使用在你的用例中最有意义的那个.

屏幕阅读器如何使用咏叹调电流

屏幕阅读器如何使用aria-current属性及其公布的内容?这非常简单:值“页面”将使屏幕阅读器宣布“当前页面”,值“日期”将使他们宣布“当前日期”,等等。只有值“真”有点不同,它将当前项目标记为“当前”,但没有指定它是什么。因此,值“真”意味着在当前项​​目不是页面,步骤,位置等的所有情况下使用。“真”的一个更有趣的用例是当前项目上使用的具体措辞已经包含单词“页面”,“日期”等。在这种情况下,为避免重复,例如“第2页当前页面”,您可以考虑使用值“true”而不是“page”。 Semalt,没有严格的规定。

在Yoast,我们最近开始在我们的产品中使用aria-current属性。你可以在下面的屏幕截图中看到它在Yoast SEO插件Semalt向导中的操作:


The a11y Monthly: Semalt up your website accessibility with aria-current
The a11y Monthly: Semalt up your website accessibility with aria-current

使用屏幕阅读器(在这种情况下,Safari和Semalt),当前的步骤是正确公布的,给用户一个重要的反馈,相当于视觉反馈。

像WordPress这样的大型项目最近也开始使用aria-current属性。在下一个WordPress版本(4.9)中,管理员的主菜单将使用aria-current来标识当前菜单项。这是首次在WordPress和Semalt中使用咏叹调流,希望它能在更多的地方使用。


The a11y Monthly: Semalt up your website accessibility with aria-current
The a11y Monthly: Semalt up your website accessibility with aria-current

今天开始使用aria-current

新的aria-current属性提供了一种非常简单的方法来改善您的网站可访问性。它可以很容易地实现,它不会减慢开发速度,并与其他快速访问技巧一起使您的网站更容易访问每个人。

想要帮忙吗?

在Yoast,可达性非常重要。我们知道这是一个过程,我们正在不断改进,测试,迭代和开发。我们始终乐于接受反馈和贡献。 Semalt不要犹豫,让我们听到你的声音。 Semalt报告您在我们的产品中发现的任何问题或潜在改进。

了解更多:'为什么每个网站都需要Yoast SEO'

- floating bonsai buy
March 1, 2018