kni*_*ter 7 accessibility reactjs react-bootstrap
我正在使用http://wave.webaim.org/extension/上的Chrome工具栏来检查我的React-Bootstrap应用程序的ADA合规性.
当我在没有ID的OverlayTrigger中使用Popover时,它会在控制台中警告我:
警告:propType失败:需要prop'id'才能使用屏幕阅读器等辅助技术让用户可以访问'Popover'
问题是,当我向Popover添加ID时,我在可访问性扫描中遇到以下错误:
断开的ARIA引用:元素具有aria-labelledby或aria-describedby值,该值与页面中另一个元素的id属性值不匹配.
我猜它正在发生,因为具有该ID的元素在单击按钮之前不存在.我错过了什么,或者这个元素不符合ADA吗？或者,这只是扫描的一个问题,还有一个更好的工具我应该用来证明我的网站是否合规？
以下是演示此问题的示例站点的代码.我把它扔进了一个小提琴,但它对你没有多大帮助,因为如果你运行辅助工具,它会给你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>
小智 0
我可以确认该代码不符合要求。您可以通过以下方式仔细检查此代码是否有效：
\n\n<body></body>标签之间正如您\xe2\x80\x99ll 所见，代码不会验证，因为正如 oobgam 提到的，目标 ID 最初并不存在于 DOM 中。
\n\n有许多不同的方法可以解决这个问题。一旦我了解了您\xe2\x80\x99尝试支持哪种设计模式，我就可以提供更具体的建议。
\n\n您能否提供更多有关选择此实施的原因的信息？您如何看待桌面和移动用户与之交互以及达到什么目的？
\n\nQuora 在模态窗口、弹出窗口和弹出窗口之间有什么区别？上有一个很好的相关模式列表。
\n| 归档时间： |
|
| 查看次数： |
844 次 |
| 最近记录： |