data-* / hidden / tabindex

<!-- data-* custom data attributes -->
<div data-user-id="123" data-role="admin">...</div>

<!-- hidden hides an element -->
<p hidden>This paragraph is hidden.</p>

<!-- tabindex controls focus order -->
<div tabindex="0">Focusable element</div>
<input tabindex="1" type="text">
<input tabindex="-1" type="text"><!-- Skipped by Tab key -->

sample_data_hidden_tabindex.html

<!-- Embed data with data-* -->
<ul id="product-list">
  <li data-product-id="101" data-price="1500">Product A</li>
  <li data-product-id="102" data-price="2800">Product B</li>
</ul>

<!-- Hide a panel initially with hidden -->
<div id="detail-panel" hidden>
  <p>Detailed information is shown here.</p>
</div>

<button onclick="document.getElementById('detail-panel').hidden = false;">
  Show details
</button>

<!-- tabindex="0": make a div keyboard-focusable -->
<div tabindex="0"
     style="padding: 8px; border: 2px solid #ccc; display: inline-block;"
     onkeydown="if(event.key==='Enter'||event.key===' ') alert('Selected');">
  This element can receive focus via the Tab key
</div>

<!-- tabindex="-1": excluded from Tab, but focusable via JS -->
<div id="modal-close" tabindex="-1"
     style="padding: 8px; background: #eee;">
  Close button (skipped by Tab; focused programmatically with focus())
</div>
<button onclick="document.getElementById('modal-close').focus();">
  Focus the close button
</button>

sample_data_hidden_tabindex.js

// Read data-* attributes with JavaScript
var items = document.querySelectorAll('#product-list li');
items.forEach(function(item) {
  var id    = item.dataset.productId; // data-product-id → dataset.productId
  var price = item.dataset.price;
  console.log('ID: ' + id + ' Price: $' + price);
});

// Write a data-* attribute with JavaScript
var firstItem = document.querySelector('#product-list li');
firstItem.dataset.inStock = 'true'; // adds data-in-stock="true"

When the page loads, only the "Show details" button is visible. Clicking the button removes the hidden attribute and reveals the detail panel. The console outputs the ID and price of each product.

View sample page

The data-* attribute is commonly used to pass data between HTML and JavaScript. You access the values via the dataset property. Hyphenated attribute names (e.g., data-product-id) are automatically converted to camelCase (e.g., dataset.productId).

The hidden attribute has the same effect as display: none in CSS, but as an HTML attribute it lets you toggle visibility with just element.hidden = true/false in JavaScript. Note that if an element has a CSS rule such as display: flex, that rule may override hidden, so use it with care.

Use tabindex to improve accessibility. Avoid using positive integers to control focus order — doing so disrupts the natural DOM order and can confuse screen reader users. In most cases, tabindex="0" and tabindex="-1" are all you need.

Desktop

Chrome

62 and later ○

61 and earlier ×

Firefox

22 and later ○

21 and earlier ×

Safari

10 and later ○

9 and earlier ×

Edge

14 and later ○

IE

Not supported ×

Opera

49 and later ○

48 and earlier ×

Mobile

iOS Safari

10 and later ○

9 and earlier ×

Android Browser

62 and later ○

61 and earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

* Version data based on MDN.

data-* attributes are easy to read and write from JavaScript, making them very useful for linking DOM state management.

<!-- Embed data with data-* attributes -->
<ul id="product-list">
  <li data-product-id="101" data-price="2980" data-stock="5">
    Product A - $29.80
    <button class="add-to-cart">Add to Cart</button>
  </li>
  <li data-product-id="102" data-price="4500" data-stock="0">
    Product B - $45.00
    <button class="add-to-cart" disabled>Out of Stock</button>
  </li>
</ul>

<script>
  var buttons = document.querySelectorAll('.add-to-cart');
  buttons.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var item = btn.closest('li');
      // Access data-* attributes via the dataset property
      // data-product-id → dataset.productId (converted to camelCase)
      var id = item.dataset.productId;
      var price = parseInt(item.dataset.price, 10);
      var stock = parseInt(item.dataset.stock, 10);

      if (stock > 0) {
        console.log('Added to cart: ID=' + id + ', Price=' + price);
        // Update data-stock
        item.dataset.stock = stock - 1;
      }
    });
  });
</script>

tabindex controls the keyboard navigation order. Since it has a significant impact on accessibility, understanding the correct usage is important.

<!-- tabindex="0" makes a non-interactive element keyboard-accessible -->
<div tabindex="0" role="button" id="customBtn"
     style="padding: 8px 16px; background: #4488ff; color: white; cursor: pointer; border-radius: 4px;">
  Custom Button
</div>

<!-- tabindex="-1" to move focus to the first element in a modal -->
<div id="modal" role="dialog" aria-modal="true" aria-label="Confirmation Dialog">
  <h2 tabindex="-1" id="modal-heading">Are you sure you want to delete?</h2>
  <button>Yes</button>
  <button>No</button>
</div>

<script>
  // When the modal opens, move focus directly to the tabindex="-1" element
  function openModal() {
    var heading = document.getElementById('modal-heading');
    heading.focus(); // focusable because of tabindex="-1"
  }
</script>