onfocus="this.blur()" は視覚障害のあるウェブマスターに嫌われている

スクリーン リーダー ソフトウェアの操作ページについて話しているとき、彼はフロントエンドの学生たちに特に強調しました。彼が最も嫌っているのは、ページ リンクの onfocus="this.blur()" コードです。これはどこから来たのでしょうか。

（図1）

学生の皆さん、このコードは見覚えがありますか? はい、ご存知のとおり、このコードは、リンクにフォーカスが当たったときにリンクの周囲に表示される点線の枠を削除するためによく使用されます (上の図 1 を参照)。Google で検索すると、最初の数十ページはすべて点線の枠を削除するテクニックに関するものであることがわかります。しかし、私たちはこれまでこれについて考えたことがなかったかもしれません。このコード行は視覚障害のあるユーザーにとって大きな問題を引き起こしました。視覚障害のあるユーザーの Tab キー パスを中断し、Tab カーソルがページの次のコントローラー (リンク、フォーム フィールド、オブジェクト、イメージ マップなど) にフォーカスできなくなるのです。テストは次のとおりです。

Tab キーを押すと、最初のリンクと 2 番目のリンクは正常にフォーカスを取得できます。3 番目のリンクにタブで移動し続けると、悲劇が起こります。フォーカスは最初のリンクに戻り、4 番目のリンクにフォーカスできなくなります。これは、フォーカスが 3 番目のリンクにあるときに、onfocus="this.blur()" イベント処理によってフォーカスが強制的に失われ、フォーカスがドキュメントの先頭に戻るためです。 Tabキーを連続して押すと、フォーカスは最初の3つのリンク間で回転し、それらの背後にあるコンテンツにはTabキーを使用してアクセスできなくなります[1]。

（図2）

それで、もっと良い方法はあるのでしょうか?基本的に、onfocus="this.blur()" を追加すると、リンクがフォーカスを取得した後にリンクの周りの点線枠が削除されます (もちろん、Chrome、Safari、Opera のフォーカス効果は異なるため、ここではそう呼びます)。アウトラインに関する W3C の記事では、この点線のボックスは、現在のページのどの要素にフォーカスが置かれているかをユーザーに伝えるために使用されると説明されています。点線のボックスの存在は合理的だと思いますが、場合によっては、特定の「視覚的なクリーンさ」のニーズを避けられないことがあります (図 2 に示すように、点線のボックスは「製品」の背景とその下の赤いブロックを分離します)。次に、点線のボックスを削除するための一般的な方法をいくつかまとめます。

上記を踏まえて、リンクの点線枠を削除する推奨方法は、IE では hidefocus 属性を使用し、FF/chorme/opera/safari では outline:none を使用することです。今すぐ：
<a href="#" hidefocus="true" >リンク</a>
フォーカス {
アウトライン:なし;
}

Yang Yongquan 氏は、onfocus="this.blur()" のせいでタブがページ全体のコンテンツにアクセスできない場合、スクリーン リーダー ソフトウェアはページを読む前にこの属性を強制的にフィルタリングすると、どうしようもなく言いました。ただし、ユーザーが js で this.blur() を動的にトリガーした場合、スクリーン リーダー ソフトウェアはそれを抑制するための新しいトリックを考え出さなければなりません。これにより、スクリーン リーダー ソフトウェア開発の作業負荷が間違いなく増加します。視覚障碍のあるユーザーが当社の Web サイトをよりスムーズにアクセスできるようにするには、onfocus="this.blur()" の使用を避けるようにしてください。

注記

[1] Safariでは、デフォルトではTabキーを押してもリンクはフォーカスされませんが、フォームフィールドにフォーカスされます。この機能を有効にするには、環境設定の詳細で「Tabキーを押してWebページ上の各項目をハイライト表示する」をチェックします。 Opera は非常に特殊です。Shift キーを押しながら上、下、左、右の矢印キーを使用すると、ページを上、下、左、右にフォーカスできます。

[2] Operaでは、リンク（フォーカスまたはアクティブ状態）をクリックしても点線枠は表示されないため、Operaのリンクの点線枠の問題は無視できます。 Opera が Shift + 上、下、左、右キーを使用して作成したワイヤーフレームは、outline:none を使用して削除することはできませんが、Opera は outline 属性をサポートしています。

[3]hidefocus属性はIEのプライベート属性です。hidefocus属性にはtrueとfalseの2つの値がありますが、テスト結果によると、IE5-IE9では、値がtrueかfalseかに関係なく、hidefocus属性が追加されている限り、リンクの点線枠が消えます。