CSSスタイルのバインディングに基づいてaria-labelを変更する

Question

私はaria-labelを持っているというチェックボックスを持っていますが、このaria-labelのテキストをどのように変更してチェックを入れるかどうかを反映していませんユーザー。 cssをレンダリングするために、同じ関数内のaria-labelテキストを制御することは可能ですか？チェックとチェックを外すボックスの

機能：

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

あなたは可能性がありますが、あなたはそれがために持っているよりも、これはより複雑になっているように聞こえます。アリアラベルを手動で設定するのではなく、入力タイプcheckboxのネイティブAPIを使用できます。あなたの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'); }