【autoforcus属性】要素に自動で焦点を当てる。「HTML・属性・初心者向け」- ノブレコ

autoforcusとは

autoforcusは、ページを開いたときに、自動で指定した要素にフォーカスした状態になる属性です。

ちなみに、「フォーカス」とは、焦点を当てる、また集中するといった意味があります。

この属性を指定した場合、ページが表示された時、自動でテキストボックスなどの入力欄が選択された状態となり表示されます。

HTML Living Standard以前では、フォーム部品向けの属性となっていましたが、HTML LSからグローバル属性として定義されるようになりました。

【使用目的】

ページが開かれた時、autoforcus属性が指定された要素に自動でフォーカスを移動したい場合に使用します。

その他の使用目的としては、javascriptを使って任意のHTMLにフォーカスした時などが挙げられます。

例えば、autoforcus属性を<dialog>要素や、その子孫要素で使用するケースなどが考えられます。

※この属性を指定できる要素は、同一ページ内で一つだけとなります。そして複数の要素に同時に指定すると構文エラーを発生させることになり、最初の要素にフォーカスが当たるなどのエラーが出るので気を付けましょう。

【使用上の注意点】

① HTML文書や<dialog>要素内で、複数の要素にautoforcus属性を指定することはできません。

複数の要素にautoforcus属性を指定した場合、構文エラーとなり最初の要素にフォーカスが当たるなどの症状が発生します。

② フォーカスを使用する必要があるか検討する。

autoforcus属性を指定すると、指定した要素に強制的にフォーカスが移動することになります。

通常はページの先頭（最上部）からスクリーンリーダーは読み上げをしますが、aotoforcus属性を指定した要素がページ内に存在すると、その要素にフォーカスされて読み上げが始まってしまいます。

ページの読み上げにも時間がかかり、ユーザーがページを閲覧している際にも、突然予想外のフォーカスされた要素に移動するので、混乱を招くことがあります、なので使用は適材適所でアクセシビリティ上の問題も考慮して使用することが望ましいです。

※ この属性を有効活用できるは、ログインフォームや検索フォームしか存在しないページなど、入力欄以外のコンテンツがほとんどないような場合です。入力欄以外に読みべきコンテンツがある場合は、この属性の利用が本当に必要かどうかを考えて使用の検討をする必要があります。

③ 特別多用する属性ではない。

以下の理由から下手に使用する必要はありません。

まだ使用環境によっては挙動がまばらで、ユーザビリティやアクセシビリティの観点からも、この属性の使い方によってはページ操作や他の機能を阻害する恐れがあります。

【指定できる要素】

aotoforcus属性は、グローバル属性のため、全てのHTML要素に指定することができます。

ですが、指定したHTML要素との組み合わせ次第では、属性の効果が発揮されないことがあるので注意してください。

実用例

■autoforcusの使用例

★aotoforcus属性の記述例

autoforcus属性とtabindex属性を組み合わせた例。

まとめ

この記事では、autoforcus属性についての解説を致しました。

この属性は自動でフォーカスを移動させたい場合に使用する属性で、使い方はそこまで難しいものではありません。

ですが、使用するにあたってアクセシビリティ上での注意点がありますので、そのことを踏まえて適切に使用することが必要になるかもしれません。

入力欄だけのコンテンツで成り立つページであれば、この属性を使うことはほぼ必須といえるかもしれません。

流動的なフォーカスでユーザーが気持ちの良い操作ができるよう心がけて使いたい属性です。

この記事が少しでも皆さんのお役に立てれば幸いです。

最後まで読んでいただき、ありがとうございました。またなん(●'◡'●)