如何在响应站点上实现ARIA

Question

我们正在努力让我们的一个响应式网站更容易访问，但我们正在努力理解ARIA，因为它似乎违背了将设计元素从HTML中分离出来的核心原则。

例如，如果某个元素隐藏在aria中，则可以将其指示为aria- hidden ="true“。然而，大多数可见性是由媒体查询决定的，取决于屏幕大小等。

在其他情况下，元素基于媒体查询的工作方式完全不同。因此，在某些大小下，aria-haspopup="true“将是合适的，而在其他分辨率上，导航始终是可见的。

我是不是遗漏了什么，或者我们是不是又在使用这个标准的字体标签了？我们是否应该适当地使用javascript添加/删除aria标记？

Answer 1

实际上，Kenneth，你的问题很有意义，是的，响应式网站的工具并不理想。我没有给你一个答案，但我要说的话太长了，不能作为评论……

考虑以下示例:您的应用程序有一个菜单按钮，它使用一个简短的滑动动画打开侧面抽屉。无需考虑a11y，您的工作就很简单(假设抽屉在左侧，宽度为250px)：

@media ... (min-width: 1000px)
#drawer {
  left: 0;
}

@media ... (max-width: 999px)
#drawer {
  left: -250px;
}
#drawer.opened {
  left: 0;
}

(不是精确的语法，为滑动动画添加你自己的魔法)

要使其可访问，您必须执行以下操作之一：

选项1

不要使用aria-hidden='true'。通常，使用visibility:hidden或display:none隐藏抽屉就足够了。当然，现在您需要等待滑出动画的结束来隐藏抽屉(否则您将丢失动画)。

选项2

使用aria-hidden='true'。当切换大小时，你必须捕捉窗口大小调整和添加/删除aria-hidden='true' (你失去了媒体查询的魔力)。

总而言之，你是对的。当然还有改进的空间。考虑到为了保持60fps的流畅而将东西从JS上移走的一般转变，这一点尤其正确。

Answer 2

您必须使用window.matchMedia函数

例如：

var mm = window.matchMedia("(min-width: 600px)");

mm.addListener(updateAriaHidden);
updateAriaHidden(mm);

var updateAriaHidden= function (obj) {
    if (obj.matches) {
        // set aria-hidden true/false when width >= 600px
    }
    else {
        // set aria-hidden true/false when width < 600px
    }
}

例如，使用jQuery，您可以使用带有自定义CSS类的:hidden选择器来动态设置aria-hidden属性：

$(".toggleable:hidden').attr('aria-hidden', true);
$(".toggleable:visible').attr('aria-hidden', false);

使用自定义类可以轻松地匹配将根据媒体查询而更改的元素