Question

我们正在努力使我们的响应式网站之一更易于访问，但我们正在努力争取ARIA，因为它似乎违背了将设计元素与HTML分离的核心原则。

例如，如果元素隐藏在咏叹调中，则会将其指示为aria-hidden =“true”。但是，大多数可见性由媒体查询决定，具体取决于屏幕大小等。

在其他情况下，元素根据媒体查询完全不同。因此，在某些尺寸下，aria-haspopup =“true”是合适的，而在其他分辨率下，导航始终可见。

我是否遗漏了某些内容，或者我们是否依旧使用此标准进行字体标记？我们是否应该使用javascript添加/删除咏叹调标签？

Answer 1

实际上肯尼斯，你的问题很有意义，而且，是的 - 响应式网站的工具并不理想。我没有给你答案，但我要说的是太久不能发表评论......

考虑以下示例：您的应用程序有一个菜单按钮，使用短滑动动画打开侧抽屉。没有考虑因素，您的工作很简单（假设抽屉位于左侧，宽度为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'（您丢失了媒体查询魔法）。

总结一下，你是对的。肯定有改进的余地。考虑到将一些东西从JS移开以保持60fps平稳的一般转变，这一点尤其如此。

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，您可以将:hidden选择器与自定义CSS类一起使用来动态设置aria-hidden属性：

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

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

如何在响应式网站上实施ARIA

2 个答案:

选项1

选项2