Difference between revisions of "ARIA Relevant property"

From Level Access Web Labs
Jump to navigation Jump to search
 
(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: