Difference between revisions of "ARIA Pressed State"
Jump to navigation
Jump to search
| (10 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="width:3em; border:solid;" aria- | + | 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> | + | } |
| − | + | </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:aria-pressed]] | [[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
