次のコードブロックでアンカーまたはボタンを使用する必要がありますか？

bugfix> html > 投稿

私はWebアプリケーションを作成しており、次の例でボタンまたはアンカーを使用する方が意味的に正しいかどうかを判断しようとしています。

<ul id="parent-list">
    <li id="parent-1" class="parent-list-item" value="1">
        <ul class="child-list">
            <li value="OPTION1" class="">
                <a href="javascript:void(0);" class="no-style-a">OPTION1</a>
            </li>
            <li value="OPTION2" class="">
                <a href="javascript:void(0);" class="no-style-a">OPTION2</a>
            </li>
            <li value="OPTION3" class="selected-child-list-item">
                <a href="javascript:void(0);" class="no-style-a">OPTION3</a>
                <span class="selected-child-span">✓</span>
            </li>
        </ul>
    </li>
    <li id="parent-2" class="parent-list-item" value="2">
        <ul class="child-list">
            <li value="OPTION4" class="">
                <a href="javascript:void(0);" class="no-style-a">OPTION4</a>
            </li>
        </ul>
    </li>
    ...etc
</ul>

アンカーが押されるたびに、onClickハンドラーが呼び出され、対応するフィルターに一致するすべてのデータを取得するクエリがバックエンドに発行されます。クエリが返されると、フロントエンドが更新され、この新しい情報が表示されます。ページはリロードされず、フロントエンドは動的に更新されます（react/reduxを使用して状態の変更を処理します）。

ここでボタンの代わりにアンカーを使用する必要がある理由はありますか？

html

button

anchor

回答 3 件

  • どこにもリンクしていないため、リンクを使用しないでください。

    つまり、控えめなJavaScriptを作成している場合、JSが失敗したときのサーバー側フォールバックにリンクすることになります。その場合はリンクを使用する必要があります。

  • 説明に基づいて、ボタンを使用する必要があります。スクリーンリーダーユーザーは、「ボタン」を聞くと、何らかのアクションが実行されると考えます。 「リンク」を聞くと、何らかのナビゲーションが実行されます。ナビゲーションではなくアクションを実行しているようです。

    role="button" を使用する予定がある場合  あなたの <a> に  タグ、キーボードハンドラーを追加することを忘れないでください。ユーザーがリンクのSpaceキーを押してアクティブにできるようにするには、「ボタン」要素がSpaceキーとEnterキーの両方が機能することを意味します。可能であれば、ネイティブの <button> を使用してください  それはあなたのために処理されるからです。

  • the frontend is updated dynamically

    Is there any reason I should be using anchors instead of buttons here?

    フォーカスは別の場所に移動しますか？

    はい：リンクです

    いいえ：ボタンです

    JavaScriptを使用してページの変更をエミュレートする場合、はい、ユーザーがページの変更を認識するか、ページ内を移動する限り、アンカーを使用できます。

あなたの答え

関連記事