6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-05-23

#スクリーンリーダーについて
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);
};

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


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

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?