Reactjs React Bootstrap Popover不符合ADA
我正在使用中的Chrome工具栏检查React引导应用程序的ADA合规性 当我在OverlyTrigger中使用没有ID的Popover时，它会在控制台中警告我： 警告：propType失败：使用屏幕阅读器等辅助技术的用户需要使用prop“id”才能访问“Popover” 问题是，当我将ID添加到Popover时，我的可访问性扫描会出现以下错误： 断开的ARIA引用：元素的ARIA labelledby或ARIA describedby值与页面中另一个元素的id属性值不匹配 我猜这是因为具有该ID的元素在单击按钮之前不存在。我是否遗漏了什么，或者该元素是否不符合ADA？或者，这只是扫描的一个问题，我应该用一个更好的工具来证明我的站点是符合要求的吗 下面是演示该问题的示例站点的代码。我把它放在了一个示例中，但它对您没有多大好处，因为如果您在该示例中运行可访问性工具，它会给您带来JSFIDLE的错误，而不是相关代码的错误：Reactjs React Bootstrap Popover不符合ADA,reactjs,accessibility,react-bootstrap,Reactjs,Accessibility,React Bootstrap,我正在使用中的Chrome工具栏检查React引导应用程序的ADA合规性 当我在OverlyTrigger中使用没有ID的Popover时，它会在控制台中警告我： 警告：propType失败：使用屏幕阅读器等辅助技术的用户需要使用prop“id”才能访问“Popover” 问题是，当我将ID添加到Popover时，我的可访问性扫描会出现以下错误： 断开的ARIA引用：元素的ARIA labelledby或ARIA describedby值与页面中另一个元素的id属性值不匹配 我猜这是因为具有该I
<!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>
React Bootstrap Popover可访问性
var Button=ReactBootstrap.Button；
var OverlayTrigger=ReactBootstrap.OverlayTrigger；
var Popover=ReactBootstrap.Popover；
var Overlay=React.createClass({
render:function（）{
返回(
我可以确认代码不符合要求。您可以通过以下方式再次检查此代码是否有效：
在开发人员控制台中检查此元素（在单击按钮之前）
将呈现的HTML复制到剪贴板
加载并选择“Textfield”选项
在
标记之间粘贴HTML
单击“验证”
正如您将看到的，代码没有进行验证，因为正如oobgam所提到的，目标ID最初并不存在于DOM中
有许多不同的方法可以解决这个问题。一旦我了解了您试图以可理解的方式支持的设计模式，我可以提供更具体的建议
您能否提供更多关于为什么选择此实现的信息？您如何看待桌面和移动用户与此交互，以及为了什么目的
Quora在上有一个很好的相关模式列表，我猜它正在发生，因为具有该ID的元素在单击按钮之前不存在
我想这就是正在发生的事情。我检查了按钮
和popover
组件的呈现的html
，两者的值都相同belledbyid