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

回答

相關問題