Ändern Aria-Label basierend auf der Bindung von CSS-Stil

Question

Ich habe ein Kontrollkästchen, dass ich eine Aria-Label für habe, aber ich bin mir nicht sicher, wie diese Aria-Label-Text zu reflektieren, ob das Kontrollkästchen aktiviert ist oder nicht für der Benutzer. Ist es möglich, den Aria-Label-Text in der gleichen Funktion zum Rendern des CSS zu steuern?

Funktion zum Überprüfen und Entfernen des Häkchens Box:

checkbox = ko.pureComputed(function() { 
    var checked = checked(), 
     uncheck = uncheck(), 
     checkedIcon = 'icon_check', 
     uncheckedIcon = 'no_check', 

       if (checked) { 
        //Can i add in here what the aria-label text should be? 
        return checkedIcon; 
       } 

       if (uncheck) { 
        return uncheckedIcon; 
       } 
      }); 

Answer 1

Sie könnten etwas tun, wenn Sie die auf Check-Box-Wert basiert Attribut ändern möchten. HTML:

<input type="checkbox" data-bind="checked:Mycheckbox,attr:{'aria-label':MyAriaLabel}" > 

VM:

$(function() { 
    var MainViewModel = function() { 
    var self = this; 
    self.MyAriaLabel = ko.observable('aria-lebel'); 
    self.Mycheckbox = ko.observable(); 

    self.Mycheckbox.subscribe(function(newVal){ 
     self.MyAriaLabel(newVal?'Something' : 'Something else'); 
    }) 
    } 
    ko.applyBindings(new MainViewModel()); 
}) 

Beispiel: http://jsfiddle.net/GSvnh/5129/

Answer 2

Sie könnten, aber es klingt wie Sie machen dies komplexer als es sein muss. Anstatt ein Aria-Label manuell festzulegen, können Sie die native API des Eingabetyps checkbox verwenden. Wenn Ihr html eine tatsächliche Option eingegeben wird, wie:

<input id="check1" name="field-name" type="checkbox"> 

dann, wenn es abgehakt ist, sollte es automatisch die „geprüft“ Attribut erhalten, die Screenreadern sollte abholen können. Wenn das fehlschlägt, können Sie aria-checked verwenden, um es zu ergänzen.

var isChecked = element.getAttribute('checked') 
    element.setAttribute('aria-checked', isChecked) 

Wenn Sie sich nicht normal input type="checkbox" Markup für welchen Gründen auch immer, können Sie role="checkbox" zu Ihrem Markup hinzufügen, der Browser sie als solche behandeln zu helfen.

Bonus: Sie können sogar die native Kontrolle Verhalten verwenden, um Ihre CSS zu handhaben, in einigen Fällen, über so etwas wie dieses:

[type="checkbox"] { background-image: url('uncheckedIcon.png'); } 
[type="checkbox"]:checked { background-image: url('checkedIcon.png'); }