Skip to content

Instantly share code, notes, and snippets.

@kloots

kloots/charts-live-region.html

Created March 14, 2012 21:59
Show Gist options
  • Save kloots/2039878 to your computer and use it in GitHub Desktop.
Save kloots/2039878 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Made Accessible Via ARIA Live Region
Raw
charts-live-region.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="author" content="Todd Kloots">
<style type="text/css">
.offscreen {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
</style>
</head>
<body>
<div id="char-container">
<div id="chart" role="img" aria-label="stock prices" aria-describedby="description" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
</div>
<div id="description" class="offscreen">Use the arrow keys to explore the chart.</div>
<div id="live-region" class="offscreen" role="status"></div>
</div>
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI().use("node", "event", function (Y) {
var chart = Y.one("#chart");
var liveRegion = Y.one("#live-region");
chart.on("key", function (e) {
liveRegion.setContent("You pressed: " + e.keyCode);
}, "down:37,38,39,40");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment