css stilinin bağlanmasına dayalı aria etiketinin değiştirilmesi

Question

Bir aria etiketine sahip olduğum bir onay kutum var ama onay kutusunun işaretli olup olmadığını belirtmek için bu aria etiket metnini nasıl değiştireceğimi bilmiyorum. Kullanıcı. Aria etiketli metni css'yi oluşturmak için aynı işlevde kontrol etmek mümkün mü? kontrol ve işaretlerini kaldırarak kutusu için

İşlev: Eğer onay kutusu değerine dayalı niteliğini değiştirmek isterseniz

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

Böyle bir şey yapabilirdi. 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()); 
}) 

Örnek: http://jsfiddle.net/GSvnh/5129/

Answer 2

Yapabilirsin

ama olması gerekenden daha bu daha karmaşık yapıyoruz gibi geliyor. Bir aria etiketi manuel olarak ayarlamak yerine, checkbox giriş türünün yerel API'sini kullanabilirsiniz. Html gibi gerçek bir onay kutusu girişi ise:

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

kapalı kontrol ne zaman sonra, otomatik olarak ekran okuyucular üzerinde pick up gerekir "işaretli" özelliğini, almalısınız. Bu başarısız olursa, ek olarak aria-checked kullanabilirsiniz.

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

Sebebi ne olursa olsun, normal input type="checkbox" işaretlemeyi kullanmıyorsanız, tarayıcı gibi davranmak yardım etmek İşaretlemenize için role="checkbox" ekleyebilir.

Bonus: hatta böyle bir şey aracılığıyla, bazı durumlarda, sizin css işlemek için yerli çek davranışını kullanabilirsiniz:

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