[HTML5] Why ARIA?

For some reason, you build a custom checkbox component, if without ARIA in mind, basiclly this site is unusable for screen reader.

DEMO site.

In the example, screen reader only read the label of the checkbox, but doesn't tell it is a checkbox and the value of it.

<div tabindex="0" class="checkbox">
        Mint slices
      </div>

The way to fix it by tell the role is checkbox and set aria-checked to its value:

<div tabindex="0" class="checkbox" tabindex="0" role="checkbox" aria-checked="true">
        Tim-Tams
      </div>

 

But really it we can use the native html element, just use the native element.