React-Bootstrap uygulamasının ADA uyumluluğunu kontrol etmek için Chrome araç çubuğunu http://wave.webaim.org/extension/'dan kullanıyorum.React-Bootstrap Popover değil ADA uyumlu
Ben Bir kimliği olmayan OverlayTrigger içinde popover kullandığınızda, konsolda beni uyarıyor:
Uyarı: Başarısız PropType: prop 'id' 'Popover' erişilebilir kullanan kullanıcılar için yapmak için gereklidir ekran okuyucuları gibi yardımcı teknolojileri
sorun popover bir kimlik eklemem zaman, o zaman benim erişilebilirlik taramasında aşağıdaki hatayı alıyorum şöyledir:
Brok tr ARIA referansı: Bir öğenin, sayfada başka bir öğenin id niteliği değeriyle eşleşmeyen aria-labelledby veya aria-basedby değeri vardır.
Bunun olup bittiğini tahmin ediyorum, çünkü düğüme basılana kadar bu kimliğe sahip öğe mevcut değil. Bir şey eksik mi, yoksa bu öğe ADA uyumlu değil mi? Ya da, bu sadece tarama ile ilgili bir sorundur ve sitemin uyumlu olduğunu kanıtlamak için kullanmam gereken daha iyi bir araç var mı?
Sorunu gösteren örnek bir sitenin kodu. Bir Fiddle bunu atılmış, ancak bu erişilebilirlik aracı çalıştırırsanız, size alakalı kodu için JSFiddle en hatalarını ziyade olanları verecektir çünkü sen çok faydası olmaz:
<!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>
de ilgili desen iyi bir listesi vardır 'Ben bu kimliğe sahip eleman düğmesinin kadar var olmadığı için bunu yapıyorlar tahmin ediyorum ben neler olduğunu düşünüyorum clicked' olduğunu. "Button" ve "popover" bileşenlerinin oluşturulmuş "html" öğelerini kontrol ettim, her ikisi de "aria-labelledby" ve "id" değerlerine sahip. Belki de uzantı oluşturulan DOM'ı dikkate almıyor mu? – oobgam