Difference between revisions of "ARIA Pressed State"

From Level Access Web Labs
Jump to navigation Jump to search
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
Each control can be toggled to pressed or not pressed.
 +
 
<html>
 
<html>
<p>With button element</p>
+
<head>
<button aria-pressed="true"> Bold </button>
+
<script type="text/javascript">
<p>Div element with aria-pressed</p>
+
  function toggle(eID) {
<div style="border:solid;" aria-press="true"> Italics </div>
+
    var attr = document.getElementById(eID).getAttribute('aria-pressed');
<p>Anchor element with aria-pressed</p>
+
    document.getElementById(eID).setAttribute('aria-pressed', (attr=='true') ? 'false' : 'true' );
<a style="border:solid;" href="#"> Underline </a>
+
  }
<h2> Dynamic example </h2>
+
</script>
 +
</head>
 +
<body>
 +
  <p>With button element</p>
 +
  <div>
 +
    <button id="b1" onclick="toggle('b1');" aria-pressed="true"> Bold
 +
    </button>
 +
  </div>
 +
 
 +
  <div>
 +
    <button aria-label="bold button my aria-label" id="b2" onclick="toggle('b2');" aria-pressed="true"> Bold (with aria-label) </button>
 +
  </div>
 +
 
 +
  <p id="p1">Some label</p>
 +
  <button aria-labelledby="p1" id="b2" onclick="toggle('b2');" aria-pressed="true"> Bold (with aria-labelledby) </button>
 +
  <p>Div element with aria-pressed and role button</p>
 +
 
 +
  <div role="button" onclick="toggle('d1');" id="d1" style="width:3em; border:solid;" aria-pressed="true" tabindex="0"> Italics </div>
 +
 
 +
  <p>Anchor element with aria-pressed and role button</p>
 +
 
 +
  <a role="button" onclick="toggle('a1');" id="a1" style="border:solid;" href="#" aria-pressed="true"> Underline </a>
 +
 
 +
</body>
 
</html>
 
</html>
 
[[Category:ARIA]]
 
[[Category:ARIA]]
[[Category:Attributes]]
+
[[Category:aria-pressed]]

Latest revision as of 17:14, 21 October 2015

Each control can be toggled to pressed or not pressed.

With button element

Some label

Div element with aria-pressed and role button

Italics

Anchor element with aria-pressed and role button

Underline