Ich verwende die Chrome-Symbolleiste von http://wave.webaim.org/extension/, um die ADA-Konformität meiner React-Bootstrap-App zu überprüfen.React-Bootstrap-Popover nicht ADA-kompatibel
Wenn ich einen Popover innerhalb eines OverlayTrigger ohne ID verwenden, warnt er mich in der Konsole:
Warnung: Fehler PropType: Die Stütze ‚id‘ erforderlich ‚Popover‘ für Benutzer zugänglich zu machen mit Hilfstechnologien wie Bildschirmleser
Problem ist, wenn ich eine ID zum Popover hinzufügen, bekomme ich folgende Fehlermeldung auf meiner Zugänglichkeit Scan dann:
Brok ARIA-Referenz: Ein Element hat einen aria-labeledby- oder aria-describedby-Wert, der nicht mit dem ID-Attributwert eines anderen Elements auf der Seite übereinstimmt.
Ich vermute es passiert, weil das Element mit dieser ID nicht existiert, bis die Schaltfläche geklickt wird. Fehle ich etwas oder ist dieses Element nicht ADA-konform? Oder ist das nur ein Problem mit dem Scan, und es gibt ein besseres Tool, das ich verwenden sollte, um zu beweisen, dass meine Site kompatibel ist?
Hier ist der Code für eine Beispielwebsite, die das Problem veranschaulicht. Ich habe es in einem Fiddle geworfen, aber es wird nicht viel Gutes, denn wenn man die Zugänglichkeit Werkzeug auf das ausführen, wird es Sie JSFiddle die Fehler eher als die, die für den jeweiligen Code geben:
<!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>
'Ich vermute, dass es passiert, weil das Element mit dieser ID nicht, bis die Taste nicht vorhanden ist clicked' ich denke, dass ist das, was passiert. Ich habe das gerenderte 'html' der' button'- und 'popover'-Komponenten überprüft, beide haben den gleichen Wert von' aria-labelledby' und 'id'. Vielleicht berücksichtigt die Erweiterung das erstellte DOM nicht? – oobgam