jQuery
WAI-ARIA
aria-hidden

jQueryのshow・hideメソッドに、aria-hidden属性の設定を追加する方法

More than 1 year has passed since last update.

スクリーンリーダーについて

display:noneした要素の場合、多くのスクリーンリーダーでは読まれる対象にならないみたいですが、JAWSでは表示がされていなくても読まれてしまうようです。

見えていない要素が読まれてしまうというのは、意図していないところですし、なによりも、目でブラウザを見ている人と耳でブラウザを聞いている人の間に、情報の差が出てしまうことはアクセシブルではないと考えます。

スクリーンリーダーで読まれない要素

スクリーンリーダーで読まれない要素にするためには、aria-hidden属性をtrueに設定すれば、読まれないようになります。

jQueryのshow・hideメソッドの拡張

表示を消す処理をjQuery等で行っている場合、そのメソッドを実行する度にaria-hidden属性を変更することができれば、毎回意識せずに設定することが可能になります。

プラグインを作成するような手順でoverrideすれば良いのですが、ただoverrideするのにも抵抗がありますので、既存のメソッドを何か違うメソッドに参照させ、overrideする時に、そのメソッドをラッピングする形を取ってみました。

sample code
/*
$.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);
};

参考になればと思います。
(懸念点やもっと良い方法などありましたら教示ください。)


指摘をいただきました。
初期投稿時に書いたコードではチェーンメソッドに対応ができていなかったので、コードを追記しました。