React-Bootstrap Popover不符合ADA

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

当我使用OverlayTrigger内酥料饼没有ID，它警告我的控制台：

警告：无法propType：该道具“身份证”是需要作出“酥料饼”访问使用用户辅助技术，如屏幕阅读

问题是，当我添加一个ID为酥料饼，然后我得到我的无障碍扫描以下错误：

布洛克en ARIA参考：元素具有与页面中其他元素的id属性值不匹配的aria-labelledby或aria-describedby值。

我猜这是因为具有该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>

来源

2016-01-04 knighter

一个好名单'我猜测它的发生是因为与该ID的元素不存在，直到按键clicked'我认为这是发生了什么。我检查了'button'和'popover'组件的呈现'html'，它们都具有相同的'aria-labelledby'和'id'的值。也许扩展没有考虑到创建的DOM？ – oobgam

我可以确认代码不符合规定。你可以仔细检查该代码是否验证通过：

在开发者控制台检查该元素（点击按钮前）
呈现的HTML复制到剪贴板
加载http://validator.nu并选择“文本框”选项
粘贴的标签<body></body>
点击之间你的HTML '验证'

如您所见，代码不会验证，因为正如oobgam所述，目标ID最初并不存在于DOM中。

有很多不同的方法来解决这个问题。一旦我明白你想要支持哪种设计模式，我可以提供更具体的建议。

你能否提供更多关于你为什么选择这个实现的信息？你如何看待台式机和移动用户与此交互，以及到底是什么？

的Quora有相关图案中的What's the difference between a modal, a popover and a popup?

来源

2016-09-26 03:34:30 dotherightthing

React-Bootstrap Popover不符合ADA

回答

相关问题