Difference between revisions of "ARIA Pressed State"

From Level Access Web Labs
Jump to navigation Jump to search
Line 1: Line 1:
 
<html>
 
<html>
 +
<head>
 +
<script type="text/javascript">
 +
  function toggle(eID) {
 +
    var attr = document.getElementById(eID).getAttribute('aria-pressed');
 +
    document.getElementById(eID).setAttribute('aria-pressed', (attr=='true' ? 'false' : 'true' );
 +
  }
 +
</script>
 +
</head>
 +
<body>
 
<p>With button element</p>
 
<p>With button element</p>
<button aria-pressed="true"> Bold </button>
+
<button id="b1" onclick="toggle('b1');" aria-pressed="true"> Bold </button>
 
<p>Div element with aria-pressed</p>
 
<p>Div element with aria-pressed</p>
<div style="width:3em; border:solid;" aria-press="true" tabindex="0"> Italics </div>
+
<div onclick="toggle('d1');" id="d1" style="width:3em; border:solid;" aria-press="true" tabindex="0"> Italics </div>
 
<p>Anchor element with aria-pressed</p>
 
<p>Anchor element with aria-pressed</p>
<a style="border:solid;" href="#" aria-pressed="true"> Underline </a>
+
<a onclick="toggle('a1');" id="a1" style="border:solid;" href="#" aria-pressed="true"> Underline </a>
<h2> Dynamic example </h2>
+
</body>
 
</html>
 
</html>
 
[[Category:ARIA]]
 
[[Category:ARIA]]
 
[[Category:aria-pressed]]
 
[[Category:aria-pressed]]

Revision as of 22:47, 8 July 2014

With button element

Div element with aria-pressed

Italics

Anchor element with aria-pressed

Underline