React-Bootstrap Popover not ADA compliant

我正在使用Chrome工具栏http://wave.webaim.org/extension/检查我的React Bootstrap应用程序的ADA合规性。

当我在没有ID的OverlayTrigger中使用Popover时，它会在控制台中警告我：

警告：失败的道具类型：需要道具"id"才能让使用辅助技术（如屏幕阅读器）的用户访问"Popover"

问题是，当我将ID添加到Popover时，我在可访问性扫描中会出现以下错误：

断开的ARIA引用：一个元素的ARIA由值标记或由值描述，该值与页面中其他元素的id属性值不匹配。

我猜发生这种情况是因为具有该ID的元素在单击按钮之前不存在。我是遗漏了什么，还是这个元素不符合ADA？或者，这只是扫描的问题，我应该用一个更好的工具来证明我的网站是合规的吗？

以下是演示该问题的示例站点的代码。我已经把它放在Fiddle中，但它对你没有多大好处，因为如果你在上面运行可访问性工具，它会给你JSFiddle的错误，而不是相关代码的错误：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>React-Bootstrap Popover Accessibility</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.5/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.js"></script>
  <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
  <div id="container"></div>
  <script type="text/babel">
    var Button = ReactBootstrap.Button;
    var OverlayTrigger = ReactBootstrap.OverlayTrigger;
    var Popover = ReactBootstrap.Popover;
    var Overlay = React.createClass({
      render: function() {
        return (
          <OverlayTrigger trigger="click" placement="right" overlay={
              <Popover title="Popover" id="popover-id">Here's the contents of the popover</Popover>
            }>
            <Button bsStyle="primary">Click to see Popover</Button>
          </OverlayTrigger>
        );
      }
    });
    ReactDOM.render(
      <Overlay />,
      document.getElementById('container')
    );
  </script>
</body>
</html>

我可以确认代码不符合要求。您可以通过以下方式仔细检查此代码是否有效：

在开发人员控制台中检查此元素（在单击按钮之前）
将渲染的HTML复制到剪贴板
正在加载http://validator.nu并选择"文本字段"选项
在<body></body>标签之间粘贴HTML
单击"验证"

正如您将看到的，代码不会进行验证，因为正如oobgam所提到的，目标ID最初并不存在于DOM中。

有许多不同的方法可以解决这个问题。一旦我了解了你试图以可访问的方式支持哪种设计模式，我就可以提供更具体的建议。

你能提供更多关于你为什么选择这个实现的信息吗？你如何看待桌面和移动用户与此交互，以及交互的目的是什么？

Quora有一个很好的相关模式列表。模态、popover和popup之间有什么区别？

相关内容

最新更新

热门标签：