Đừng dùng thẻ div cho clicking nữa !!!

Ken

1 years 5 min read

Việc sử dụng onclick trên thẻ div không gây ra lỗi gì cả, nhưng cách này là một bad practice đối với các thiết bị screen reader và Accessibility metric của browser.

Hãy tưởng tượng bạn là một người dùng đang tương tác với trang web bằng bàn phím, bàn hoàn toàn không thể dùng phím Enter hoặc Space để kích hoạt click của element đó. Khá là khó chịu đúng không ?

Trong trường hợp bạn phải dùng thẻ div và để xử lý vấn đề này thì làm như thế nào nhỉ ?

Đây là ví dụ mình dùng thẻ div với id là button

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div id="button" tabindex="0">Click</div>
    <script src="src/script.js"></script>
  </body>
</html>

Trong trường hợp này mình phải dùng thêm thuộc tính tabindex để user focus bằng bàn phím thông qua phím Tab

Và đây là script của mình để handle vấn đề trên

const button = document.querySelector("#button");

function handleClick() {
  console.log("clicked");
}

button.addEventListener("click", handleClick)    

button.addEventListener("keydown", function(e) {
  if(e.code === 'Enter' || e.code === 'Space') {
    handleClick();
  }
})

Nếu mình đổi sang thẻ button thì sao ???

<button id="button">Click</button>

const button = document.querySelector("#button");

function handleClick() {
  console.log("clicked");
}

button.addEventListener("click", handleClick);

Ngắn gọn hơn rất nhiều đúng không !!!

Với những thẻ như a và button browser đã support cơ chế tương tác thông qua bàn phím nên mình không cần phải gắn thêm event keydown và thuộc tính tabindex nữa.

Cảm ơn các bạn đã đọc bài viết.