The clickable div

Put focus in the demo and press Tab. In the broken state there is nothing to land on.

Example

Semantic HTML sticker pack — $4

Add to cart

Cart: 0

Markup

Edit the HTML. The example above is live in this page, so Tab and a screen reader read it the same way they would on any other site.

HTML for the example

<div class="lab-card">
  <p class="lab-price">Semantic HTML sticker pack — $4</p>
  <div class="lab-btn lab-btn--fake" data-action="cart">Add to cart</div>
  <p class="lab-out">Cart: <output data-cart>0</output></p>
</div>

<div class="lab-card">
  <p class="lab-price">Semantic HTML sticker pack — $4</p>
  <div class="lab-btn lab-btn--fake" data-action="cart">Add to cart</div>
  <p class="lab-out">Cart: <output data-cart>0</output></p>
</div>