reactjs – React-Bootstrap Popover不符合ADA

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

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

Warning: Failed propType: The prop ‘id’ is required to make ‘Popover’ accessible for users using assistive technologies such as screen readers

问题是,当我向Popover添加ID时,我在可访问性扫描中遇到以下错误：

Broken ARIA reference: An element has an aria-labelledby or aria-describedby value that does not match the id attribute value of another element in the page.

我猜它正在发生,因为具有该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在What’s the difference between a modal,a popover and a popup?有一个很好的相关模式列表

reactjs – React-Bootstrap Popover不符合ADA

相关文章