[shredder01]

Hallo,

ich experimentiere gerade mit WAI-ARIA herum und versuche mein SlideToggle-Script mit aria-expanded anzureichern.
Mein Toggle-Script sieht im Moment so aus:

var create_name = function(text) {
  // Convert text to lower case.
  var name = text.toLowerCase();
 
  // Remove leading and trailing spaces, and any non-alphanumeric
  // characters except for ampersands, spaces and dashes.
  name = name.replace(/^\s+|\s+$|[^a-z0-9&\s-]/g, '');
 
  // Replace '&' with 'and'.
  name = name.replace(/&/g, 'and');
 
  // Replaces spaces with dashes.
  name = name.replace(/\s/g, '-');
 
  // Squash any duplicate dashes.
  name = name.replace(/(-)+\1/g, "$1");
 
  return name;
};

var add_link = function() {
  // Convert the h3 element text into a value that
  // is safe to use in a name attribute.
  var name = create_name(jQuery(this).text());
 
  // Create a name attribute in the following div.additional
  // to act as a fragment anchor.
  jQuery(this).next('div.additional').attr('name', name);
 
  // Add a link to the h3 element to the
  // fragment anchor.  Use the h3 text to create the
  // link title attribute.
  jQuery(this).html(
    '<a href="#' + name + '" title="Anzeigen des ' +
    jQuery(this).text() + ' Textes">' +
    jQuery(this).html() + '</a>');
};


var remove_focus = function() {
  // Use the blur() method to remove focus.
  jQuery(this).blur();
};

jQuery(document).ready (function (){
   
  // Hide all div.additional elements that are not initially expanded.
  jQuery('.additional').hide();
 
  // Add a link to each h3.toggle element.
  jQuery('.toggle h3').each(add_link);
 
  jQuery('.toggle h3').each(function() {
   var button = jQuery(this);
   var buttonid = button.attr('id');
   var nextId = button.next().attr('id');
   button.attr({
                'aria-expanded': 'false',
                'aria-controls': nextId,
            role: 'button'
            });
   button.next().attr({
                  'aria-expanded': 'false',
                  'aria-labelledby': buttonid,
                  role: 'group'
                  });
   
   
  });
  // Add an event handler to all h3 inside of .toggle elements.
  jQuery('.toggle h3').toggle(
       function() {
       jQuery(this).attr('aria-expanded', 'true')
               .next('.additional')
               .show("slow")
               .attr('aria-expanded', 'true')
               .end()
               .addClass('schliessen')               
               .children().attr('title', 'Text '  +
      jQuery(this).text() + ' wieder verstecken');
      },
      function() {
        jQuery(this).attr('aria-expanded', 'false')
                 .next('.additional').hide("slow")
                 .attr('aria-expanded', 'false')
                 .end()
                 .removeClass('schliessen')                
                 .children().attr('title', 'Text '  +
          jQuery(this).text() + ' wieder anzeigen');
     }
   );
 
  // Remove the focus from the link tag when accessed with a mouse.
  jQuery('.toggle h3 a').mouseup(remove_focus);
});

und hier ist die Testseite Toggle-Test
Rein optisch, also wenn ich in Firebug verfolge was da abläuft, funktioniert alles wie gewünscht, aber NVDA liest mir die Änderungen einfach nicht vor.

Über diesen Beitrag Anreicherung meiner Webseite mit WAI-ARIA « F-LOG-GE habe ich ein Script gefunden, das funktioniert https://gist.github.com/329709 ... (hier eine Testseite mit diesem Script Toggle-Test)

Ich würde aber gerne herausbekommen warum es in meiner Umsetzung nicht funktioniert. Warum bemerkt NVDA bei meiner Version die Änderungen von aria-expanded nicht?

Danke!