我正在使用 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 并选择“Textfield”选项
- 将 HTML 粘贴到
<body></body>标记之间 - 点击“验证”
正如您将看到的，代码不会验证，因为正如 oobgam 提到的，目标 ID 最初并不存在于 DOM 中。
有许多不同的方法可以解决这个问题。一旦我了解您想要支持哪种设计模式，我就可以提供更具体的建议。
您能否提供更多有关选择此实现的原因的信息？您如何看待桌面和移动用户与之交互以及达到什么目的？
Quora 在 What's the difference between a modal, a popover and a popup? 处有一个很好的相关模式列表
关于reactjs - React-Bootstrap Popover 不符合 ADA 标准，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34600316/