dialog要素のどこにフォーカスを当てればよいか考える

dialog要素を表示したときに、ブラウザのデフォルトの挙動でフォーカスが当たる場所が微妙なので考えてみる。

TL;DR

• dialog要素内でフォームコントロールを置くのは良くない
  • フォームを使う場合は別途ページを作る
• dialog要素は メッセージ + OK/Cancel 程度の確認ダイアログ用途に留める
  • 少量のメッセージであれば、そのままPrimaryボタン（閉じる）にフォーカスを当てる
  • 破壊的変更の確認ダイアログの場合は、Secondaryボタン（キャンセル）にフォーカスを当てる
• どうしてもdialog要素に大きなコンテンツを含める必要がある場合は、タイトルや最初の文章にフォーカスを当てる

dialog要素は用法用量を守って正しく使う

As with all HTML elements, it is not conforming to use the dialog element when attempting to represent another type of control. For example, context menus, tooltips, and popup listboxes are not dialog boxes, so abusing the dialog element to implement these patterns is incorrect. https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element

dialog要素をコンテキストメニューやツールチップなどに使ってはいけない。

dialog要素自体にtabindex属性を付与しない

<dialog> element as it is not interactive and does not receive focus https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#usage_notes

dialog要素はインタラクティブでないし、フォーカスを受け取らないために dialog要素にtabindex属性を付与してはならない。

autofocus属性はすぐにユーザーが操作するような場合に使う

The autofocus attribute should be added to the element the user is expected to interact with immediately upon opening a modal dialog. If no other element involves more immediate interaction, it is recommended to add autofocus to the close button inside the dialog, or the dialog itself if the user is expected to click/activate it to dismiss.

dialogを表示してすぐ操作すると思われる場所に autofocus属性 を付与する。すぐ操作する要素がなければ閉じるボタンにautofocus属性を付与する。（推奨）

autofocus属性にはアクセシビリティに関する懸念がある

Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers “teleport” their user to the form control without warning them beforehand. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_concerns

Automatically focusing on a control can cause the page to scroll on load.

スクロールが発生するほど長いコンテンツを持った dialog要素の場合、autofocusがあると読み込んだときにスクロールが発生する。（テレポートする）

The focus can also cause dynamic keyboards to display on some touch devices.

フォームコントロールにフォーカスが当たるとdialog要素を表示したタイミングでソフトウェアキーボードが表示される。

While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

スクリーンリーダーはフォーカスがあるコントロールのラベルを読み上げるため、ウィンドウサイズが小さいデバイスを使っているとコンテンツを見逃してしまう。

If content is large enough that focusing the first interactive element could cause the beginning of content to scroll out of view, it is advisable to add tabindex=“-1” to a static element at the top of the dialog, such as the dialog title or first paragraph, and initially focus that element. https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

大きなコンテンツを含む場合は、スクロールされて文章を見逃してしまう可能性があるため、ダイアログのタイトルや最初の文章にフォーカスを当てる。