#スクリーンリーダーについて
display:noneした要素の場合、多くのスクリーンリーダーでは読まれる対象にならないみたいですが、JAWSでは表示がされていなくても読まれてしまうようです。
見えていない要素が読まれてしまうというのは、意図していないところですし、なによりも、目でブラウザを見ている人と耳でブラウザを聞いている人の間に、情報の差が出てしまうことはアクセシブルではないと考えます。
##スクリーンリーダーで読まれない要素
スクリーンリーダーで読まれない要素にするためには、aria-hidden属性をtrueに設定すれば、読まれないようになります。
#jQueryのshow・hideメソッドの拡張
表示を消す処理をjQuery等で行っている場合、そのメソッドを実行する度にaria-hidden属性を変更することができれば、毎回意識せずに設定することが可能になります。
プラグインを作成するような手順でoverrideすれば良いのですが、ただoverrideするのにも抵抗がありますので、既存のメソッドを何か違うメソッドに参照させ、overrideする時に、そのメソッドをラッピングする形を取ってみました。
/*
$.fn.addAriaHidden = function() {
$(this).attr('aria-hidden', 'true');
};
$.fn.removeAriaHidden = function() {
$(this).removeAttr('aria-hidden');
};
$.fn.hideOrigin = $.fn.hide;
$.fn.showOrigin = $.fn.show;
$.fn.hide = function () {
$(this).hideOrigin().addAriaHidden();
};
$.fn.show = function () {
$(this).showOrigin().removeAriaHidden();
};
*/
/////初期投稿時に書いた上記コードではチェーンメソッドに対応ができていない
/////以下はチェーンメソッドに対応した書き方
$.fn.addAriaHidden = function () {
$(this).attr('aria-hidden', 'true');
};
$.fn.removeAriaHidden = function () {
$(this).removeAttr('aria-hidden');
};
$.fn.hideOrigin = $.fn.hide;
$.fn.showOrigin = $.fn.show;
$.fn.hide = function () {
$(this).addAriaHidden();
return $.fn.hideOrigin.apply(this, arguments);
};
$.fn.show = function () {
$(this).removeAriaHidden();
return $.fn.showOrigin.apply(this, arguments);
};
参考になればと思います。
(懸念点やもっと良い方法などありましたら教示ください。)
指摘をいただきました。
初期投稿時に書いたコードではチェーンメソッドに対応ができていなかったので、コードを追記しました。