Skip to content

Instantly share code, notes, and snippets.

@sacko87

sacko87/aria.html

Created May 11, 2014 18:54
Show Gist options
  • Save sacko87/72491e70134716f454ac to your computer and use it in GitHub Desktop.
Save sacko87/72491e70134716f454ac to your computer and use it in GitHub Desktop.
Download ZIP
A quick example of ARIA.
Raw
aria.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>WAI-ARIA Test</title>
</head>
<body>
<div role="application" tabindex="0">
<p id="i1" role="alert" aria-live="assertive">i am text.</p>
<ul role="navgation">
<li id="l1"
role="button"
aria-controls="i1"
aria-pressed="false"
class="ctrl"
tabindex="0"
title="Up">Up</li>
</ul>
</div>
<script type="text/javascript" src="../closure-library/closure/goog/base.js"></script>
<script type="text/javascript">
<!--
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.KeyCodes');
-->
</script>
<script type="text/javascript">
<!--
// get all molecule controllers
var ul = goog.dom.getElementsByTagNameAndClass("li", "ctrl");
for(i = 0; i < ul.length; i++) { // loop through ...
li = ul[i]; // local var
// add a keydown event to them (to accept commands)
goog.events.listen(li, goog.events.EventType.KEYDOWN, function(e) {
// only allow ...
switch(e.keyCode) {
// ... these keys to progress
case goog.events.KeyCodes.ENTER:
case goog.events.KeyCodes.SPACE:
// get the target element <p>
target = goog.dom.getElement(li.getAttribute("aria-controls"));
text = goog.dom.getTextContent(target);
text = text + ' i am text.';
// remove its contents
goog.dom.removeChildren(target);
// add the new text (this will be the new description
// it will also be within a new function (when i get to it)
goog.dom.appendChild(target, goog.dom.createTextNode(text));
default:
break;
}
});
}
-->
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment