Responsive design 如何在响应站点上实施ARIA

我们正在努力使我们的一个响应性网站更容易访问，但我们正在努力让我们的头脑围绕着ARIA，因为它似乎违背了将设计元素与HTML分离的核心原则

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

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

---

是我遗漏了什么，还是我们在用这个标准重新定义字体标签？我们是否应该适当地使用javascript添加/删除aria标记

事实上Kenneth，你的问题很有道理，而且，是的，为响应性站点提供的工具并不理想。我没有答案给你，但我要说的太长了，不能作为评论

考虑以下示例： 您的应用程序有一个菜单按钮，可以使用一个简短的滑动动画打开侧面抽屉。没有任何考虑，您的工作很简单（假设抽屉在左边，宽度为250px）：

（不是精确的语法，请为滑动动画添加您自己的向导）

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

选择1 不要使用

aria hidden='true'

。通常，使用

可见性：hidden

或

显示：none

隐藏抽屉就足够了。当然，现在您需要等待滑出动画结束时隐藏抽屉（或您自己） 丢失动画）

选择2 使用

aria hidden='true'

。切换大小时，您必须捕获窗口大小调整和添加/删除

aria hidden='true'

（您将失去媒体查询的魔力）

---

总而言之，你是对的。肯定还有改进的余地。这一点尤其正确，考虑到将内容移出JS以保持60帧/秒的流畅性的一般转变。

您必须使用

窗口。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
    }
}

---

通过使用自定义类，可以很容易地匹配将根据您的媒体查询而更改的元素。

“WAI-ARIA（Web易访问性计划-可访问的富Internet应用程序）是万维网联盟（W3C）发布的一项技术规范它规定了如何提高网页的可访问性，特别是使用Ajax、HTML、JavaScript和相关技术开发的动态内容和用户界面组件”（Wikipedia）——因此它非常关注动态应用程序，在适当的位置/时间通过JS设置这些属性似乎并不奇怪，你同意吗？它的主要目的之一是确保在“非线性流”中的可访问性，例如页面或应用程序引入的JavaScipt交互。由于f.e.动态显示内容，超出了文档的正常“顺序”（如果屏幕阅读器读取了没有此类JS交互的正常网页），因此引入了可访问性问题，特别是对于不以可视方式使用媒体的用户，使用JS动态设置这些属性非常有意义。这很公平。这似乎有点不自然，但我可以处理这个问题。

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
    }
}

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