売り切れ
再入荷のお知らせ ``` ```css .pill { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #1f4d3f; color: #fff; font-weight: bold; text-decoration: none; } ``` ```js const notify = document.querySelector('.notify'); notify.addEventListener('click', (event) => { event.preventDefault(); document.getElementById('notify').showModal(); }); ``` 丸いボタンは `a` 要素なのでリンクになり、働きだけをスクリプトでボタンにしています。スクリーンリーダーはリンクと伝え、ボタンなら押せるはずのSpaceでは、ページがスクロールします。`href="javascript:void(0)"` のリンクや、アドレスは実在してもスクリプトが毎回移動を取り消すリンクも同じです。 ## 修正後：button要素を使う ```html売り切れ
``` ```css .pill { display: inline-block; padding: 10px 20px; border: 0; border-radius: 999px; background: #1f4d3f; color: #fff; font: inherit; font-weight: bold; cursor: pointer; } ``` ```js const notify = document.querySelector('.notify'); notify.addEventListener('click', () => { document.getElementById('notify').showModal(); }); ``` button要素はボタンとして読み上げられ、ブラウザーはEnterでもSpaceでもクリック処理を実行します。キー操作の処理は不要で、ページがスクロールすることもありません。`type="button"` を付けると、フォームの中に置いても、そのフォームを送信しません。CSSでブラウザー標準の枠線と灰色の背景を取り、フォントを指定すれば、丸いボタンの見た目は元のままです。 ## 修正後：リンクを残す場合のrole="button"とSpace ```html売り切れ
再入荷のお知らせ ``` ```css .pill { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #1f4d3f; color: #fff; font-weight: bold; text-decoration: none; } ``` ```js const notify = document.querySelector('.notify'); notify.addEventListener('click', (event) => { event.preventDefault(); document.getElementById('notify').showModal(); }); // ボタンと同じく、Spaceを離したときに押し、ページはスクロールさせない。 notify.addEventListener('keydown', (event) => { if (event.key === ' ') event.preventDefault(); }); notify.addEventListener('keyup', (event) => { if (event.key === ' ') notify.click(); }); ``` `role="button"` を付けたので、スクリーンリーダーはボタンと読み上げます。2つのキー処理は、HTML標準のボタンと同じくSpaceを離したときに押されるようにし、ページのスクロールも止めます。Enterでは、もともとリンクがクリックされます。テーマやプラグインが出力するリンクのように、属性やスクリプトは加えられても要素自体は変えられない場合の方法です。ブラウザーのメニューでは要素がリンクのまま扱われるため、「リンクを新しいタブで開く」を選んだりドラッグしたりすると、同じページが開きます。 ## 修正にならない応急処置 ```html 再入荷のお知らせ ``` `role="button"` を付けると、スクリーンリーダーは「ボタン」と読み上げるので、ロールの問題は直ります。しかし、ARIAが変えるのは読み上げだけです。ブラウザーにとってはリンクのままで、Spaceを押すとページがスクロールします。スクリーンリーダーの利用者はボタンだと伝えられるのに、どのボタンでも使えるはずのキーが効きません。上の2つ目の修正は、残りを手作業で補ったものです。HTML標準のボタンなら、その手間はいりません。 ## どの方法を選ぶか どちらの方法でも基準を満たします。button要素を使ってください。ロールも両方のキーもブラウザーが受け持つため、コードが少なく、失うものもありません。実在しないアドレスについて説明する必要もありません。`role="button"` とSpaceの処理を加えたリンクは、要素を変えられない場合に限って使い、テーマやプラグインを更新するたびにキー操作を確認し直してください。 ## 実装の判断 見た目とロールは揃えます。デザイン上必要なら、ボタンをリンクのような見た目にすることもできます。ただし、下線の付いた言葉はふつうリンクの見た目なので、目で見て操作する人には「どこかへ移動する」ように見えます。そのためAuthoring Practicesは、操作要素の働きに合わせて見た目を調整することを勧めています。丸いボタンやボタンの形なら、その場で何かをする要素だと誰にでも伝わります。 この問題は、共通のコンポーネントから始まることがよくあります。`href` を渡されたときだけ `a` を、それ以外は `button` を出力する `Button` コンポーネントなら、2つを分けられます。いつも `a` を出力するものや、フォーカスを当てるために `href="#"` を渡すものでは、すべての操作がリンクになります。ルーターのリンクコンポーネントを操作に使った場合も同じです。 かごに入れる、購読するなど、サーバー側で何かを変える操作も、操作内容をアドレスに含めたリンクではなく、ボタンにします。リンクは先読み、ブックマーク、共有の対象になり、もう一度開くと同じ操作が繰り返されてしまうからです。送信ボタンのあるフォームで送るか、ボタンのクリック処理からサーバーを呼び出してください。 押した後の動作は別の課題です。`showModal()` で開いたHTML標準の `dialog` は、フォーカスをフォームの中へ移し、閉じるとボタンへ戻します。ほかの方法で作るダイアログについては、[背後にフォーカスが残るモーダル](/ja/learn/modal-focus-management)を参照してください。 ## 修正の確認 1. スクリーンリーダーを使い、Tabで操作要素へ移動して、表示どおりの言葉と「ボタン」が読み上げられることを確認する。 2. Enterを押し、開いたフォームを閉じてから、Spaceを押す。どちらでもフォームが1回開き、ページがスクロールしないことを確認する。 3. スクリーンリーダーのボタン一覧を開き、操作要素がそこにあり、リンク一覧にはないことを確認する。 4. ページ上で、何かを開く、変える、送るほかの操作要素もすべて押し、それぞれ手順1から3を繰り返す。 OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のボタンやリンクのコンポーネントを変更した際は、再度確認します。 ## 制限 このガイドが扱うのは、ボタンの働きをするリンクです。逆に、別のページへ移動するだけのボタンは、ボタンとして読み上げられ、新しいタブで開くこともリンク一覧で見つけることもできません。同じトピックを反対側から見た問題で、今後のガイドで扱う予定です。ロールのないdivやspanにクリック処理を設定した場合は、[Tabキーで到達できないdivのボタン](/ja/learn/native-buttons)を参照してください。ページをその場で絞り込んだり並べ替えたりするリンクは、ページを更新するリンクのトピックで扱います。言葉のないボタンについては、[名前がないアイコンだけのボタン](/ja/learn/icon-buttons)を参照してください。対象とする支援技術で、操作全体を確認してください。 --- このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）