--- title: 'ARIA: checkbox ロール' slug: Web/Accessibility/ARIA/Roles/checkbox_role tags: - ARIA - Accessibility - NeedsContent - Role translation_of: Web/Accessibility/ARIA/Roles/checkbox_role original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role ---

チェックボックス (checkbox) ロールは、チェック可能なインタラクティブなコントロールに使用します。 role="checkbox" を含む要素には、チェックボックスの状態を支援技術に公開するための aria-checked 属性も含める必要があります。

<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label">
</span> <label id="chk1-label">Remember my preferences</label>

ARIA の第一のルールは、ネイティブな HTML の要素や属性に必要としている意味論と振る舞いがある場合、要素を転用して ARIA を追加する代わりにネイティブなものを使用することです。 次のように、代わりに <input type="checkbox"> のネイティブな HTML チェックボックスを使用してください。 これは、必要なすべての機能をネイティブに提供します。

<input type="checkbox" id="chk1-label">
<label for="chk1-label">Remember my preferences</label>

説明

ネイティブな HTML チェックボックスのフォームコントロールは、2つのチェックされた (checked) 状態（「チェックされた」または「チェックされていない」）のみを持つことができ、不確定な (indeterminate) 状態は JavaScript を介して設定可能です。 同様に、role="checkbox" を持つ要素は、aria-checked 属性を介して、true、false、または mixed の3つの状態を公開できます。

チェックボックスはインタラクティブなコントロールであるため、フォーカス可能でキーボードからアクセスできる必要があります。 ロールがフォーカス不可能な要素に適用される場合は、tabindex 属性を使用してこれを変更します。 チェックボックスをアクティブ化するために必要なキーボードショートカットは、Space キーです。

開発者は、チェックボックスがアクティブ化されたときに、aria-checked 属性の値を動的に変更する必要があります。

関連する WAI-ARIA のロール、ステート、プロパティ

aria-checked

aria-checked の値は、チェックボックスの状態を定義します。 この属性には、次の3つの値のいずれかがあります。

true
    チェックボックスがチェックされています
false
    チェックボックスがチェックされていません
mixed
    チェックボックスが部分的にチェックされているか、不確定です

tabindex="0"
支援技術のユーザーが Tab で移動してすぐに読み始めることができるように、フォーカス可能にするために使用します。

キーボードインタラクション

キー 機能
Space チェックボックスをアクティブ化します

必要な JavaScript

必要なイベントハンドラー

onclick
マウスクリックを処理して、aria-checked 属性の値を変更することでチェックボックスの状態を変更し、チェックボックスの外観を変更することで、視力のあるユーザーにチェックされているかどうかを見せます。
onKeyPress
ユーザーが Space キーを押した場合を処理して、aria-checked 属性の値を変更することでチェックボックスの状態を変更し、チェックボックスの外観を変更することで、視力のあるユーザーにチェックされているかどうかを見せます。

例

次の例では、CSS と JavaScript を使用して単純なチェックボックス要素を作成し、要素がチェックされているかどうかの状態を処理します。

HTML

<span role="checkbox" id="chkPref" aria-checked="false" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"
   tabindex="0" aria-labelledby="chk1-label"></span>
<label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()">Remember my preferences</label>

CSS

[role="checkbox"] {
    padding:5px;
}

[aria-checked="true"]::before {
    content: "[x]";
}

[aria-checked="false"]::before {
    content: "[ ]";
}

JavaScript

function changeCheckbox(event) {
    let item = document.getElementById('chkPref');
    switch(item.getAttribute('aria-checked')) {
        case "true":
            item.setAttribute('aria-checked', "false");
            break;
        case "false":
            item.setAttribute('aria-checked', "true");
            break;
    }
}

{{EmbedLiveSample("Examples", 230, 250)}}

アクセシビリティの懸念

チェックボックス (checkbox) ロールが要素に追加された場合、ユーザーエージェントは次のことを行う必要があります。

支援技術製品は次のことを行う必要があります。

注: 支援技術がこの手法をどのように扱うべきかについては、意見が異なる場合があります。 上記の情報はそれらの意見の1つであり、したがって規範的ではありません。

ベストプラクティス

ARIA の第一のルールは、ネイティブな HTML の要素や属性に必要としている意味論と振る舞いがある場合、要素を転用して ARIA のロール、ステート、またはプロパティを追加してアクセス可能にする代わりに、ネイティブなものを使用することです。 そのため、JavaScript と ARIA でチェックボックスの機能を再作成するのではなく、フォームコントロールを使用してネイティブな HTML チェックボックスを使用することをお勧めします。

関連情報