Difference between revisions of "ARIA Relevant property"
Jump to navigation
Jump to search
m (Jon Avila moved page Aria-relevant ARIA Property to ARIA Relevant property) |
|||
| (15 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
* aria-relevant uses a list of space separated possible values: removals, additions, text, or a single "all". | * aria-relevant uses a list of space separated possible values: removals, additions, text, or a single "all". | ||
| + | ==Removals== | ||
<html> | <html> | ||
| − | <div>Buddy List</div> | + | <head> |
| − | <div style="width:5em; border:thin solid;"> | + | <script type="text/javascript"> |
| − | <div>Bill</div> | + | function removals() { |
| − | <div>Jack</div> | + | var bl = document.getElementById('bl'); |
| − | <div>Peaches</div> | + | if (bl.firstChild) |
| + | var n = bl.removeChild(bl.firstChild); | ||
| + | if (n.nodeType == 3) | ||
| + | if (bl.firstChild) | ||
| + | bl.removeChild(bl.firstChild); | ||
| + | } | ||
| + | </script> | ||
| + | </head> | ||
| + | <div><b>Buddy List:</b></div> | ||
| + | <div aria-live="polite" aria-relevant="removals" id="bl" style="padding: .5em; width:5em; border:thin solid;"> | ||
| + | <div id="d1">Bill</div> | ||
| + | <div id="d2">Jack</div> | ||
| + | <div id="d3">Peaches</div> | ||
</div> | </div> | ||
<button onclick="removals();"> Test Removals </button> | <button onclick="removals();"> Test Removals </button> | ||
</html> | </html> | ||
| + | |||
| + | ==Additions== | ||
| + | [[Category:ARIA]] | ||
| + | <html> | ||
| + | <head> | ||
| + | <script type="text/javascript"> | ||
| + | var i = 1; | ||
| + | function additions() { | ||
| + | var bl_a = document.getElementById('bl_a'); | ||
| + | var d = document.createElement('div'); | ||
| + | d.textContent = "Friend" + i; | ||
| + | i++; | ||
| + | bl_a.appendChild(d); | ||
| + | } | ||
| + | </script> | ||
| + | </head> | ||
| + | <div><b>Buddy List:</b></div> | ||
| + | <div aria-live="polite" aria-relevant="additions" id="bl_a" style="padding: .5em; width:5em; border:thin solid;"> | ||
| + | <div id="e1">Bill</div> | ||
| + | <div id="e2">Jack</div> | ||
| + | <div id="e3">Peaches</div> | ||
| + | </div> | ||
| + | <button onclick="additions();"> Test Additions </button> | ||
| + | </html> | ||
| + | |||
| + | ==Text== | ||
| + | |||
| + | <html> | ||
| + | <head> | ||
| + | <script type="text/javascript"> | ||
| + | function text() { | ||
| + | var bl_b = document.getElementById('bl_b'); | ||
| + | d = new Date(); | ||
| + | bl_b.textContent = d.toTimeString(); | ||
| + | } | ||
| + | </script> | ||
| + | </head> | ||
| + | <div><b>Time:</b></div> | ||
| + | <div aria-live="polite" aria-relevant="text" id="bl_b" style="padding: .5em; width:5em; border:thin solid;"> | ||
| + | </div> | ||
| + | <button onclick="text();"> Test Text </button> | ||
| + | </html> | ||
| + | |||
[[Category:ARIA]] | [[Category:ARIA]] | ||
Latest revision as of 01:13, 1 March 2015
- aria-relevant uses a list of space separated possible values: removals, additions, text, or a single "all".
Removals
Buddy List:
Bill
Jack
Peaches
Additions
Buddy List:
Bill
Jack
Peaches
Text
Time:
