Why ARIA

Custom checkboxes

<div tabindex="0" class="checkbox" checked role="checkbox" aria-checked="true">
    ::before
        "    
            Tim-Tams
            "
    ::after
</div>
<div tabindex="0" class="checkbox" role="checkbox" aria-checked="false">
    ::before
        "    
            Mint slice
            "
    ::after
</div>

Native checkboxes

<div>
    <label>
        <input type="checkbox" checked>
        "    
            Tim-Tams
            "
    </label>
</div>

• [x] Receive promotional offers

<!-- custom checkbox -->
<div role="checkbox" aria-checked="true">
    Receive promotional offers
</div>

checkbox

name: "Receive promotional offers"

state: checked

ARIA 1.0 spec:https://www.w3.org/TR/wai-aria/

ARIA 1.1 spec:https://www.w3.org/TR/wai-aria-1.1/

You canplay with this example yourself, if you want!