Изменение метки aria на основе привязки стиля css

Question

У меня есть флажок, чтобы иметь арию-метку, но я не уверен, как изменить этот текст арии, чтобы отразить, установлен флажок или нет. Пользователь. Можно ли управлять текстом aria-label в той же функции для рендеринга css?

Функция для проверки и сняв флажок:

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

Вы могли бы сделать что-то вроде этого, если вы хотите изменить атрибут, основанный на стоимости флажка. 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()); 
}) 

Пример: http://jsfiddle.net/GSvnh/5129/

Answer 2

Вы могли бы, но это звучит, как вы делаете это более сложным, чем он должен быть. Вместо того, чтобы вручную устанавливать арию-метку, вы можете использовать собственный API типа ввода checkbox. Если ваш HTML является фактическим вводом флажка, как:

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

тогда, когда он помечал, он должен автоматически получить «проверил» атрибут, который должен быть экранные дикторы в состоянии поднять на. Если это не удается, вы можете использовать aria-checked для дополнения.

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

Если вы не используете обычную input type="checkbox" разметку по какой-либо причине, вы можете добавить role="checkbox" к разметке, чтобы помочь браузеру рассматривать его как таковой.

Бонус: вы можете даже использовать нативный поведение проверки для обработки вашего CSS, в некоторых случаях, через что-то вроде этого:

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