Hãy dùng nút bấm

 (gomakethings.com)
10 điểm bởi GN⁺ 2025-11-02 | 7 bình luận | Chia sẻ qua WhatsApp
  • Trong giao diện web, dùng thay vì là lựa chọn đúng đắn hơn về cả khả năng truy cập lẫn chức năng
  • `` không được trình đọc màn hình nhận diện là phần tử tương tác, đồng thời cũng không phản hồi với tiêu điểm bàn phím hay thao tác nhấn Enter, Spacebar
  • Dù thêm thuộc tính [role="button"] hoặc [tabindex="0"], vẫn còn các vấn đề về thứ tự tiêu điểm và xử lý sự kiện bàn phím
  • Để khắc phục các vấn đề này, việc thêm nhiều event listener và câu lệnh điều kiện gây ra độ phức tạp không cần thiết
  • `` cung cấp sẵn khả năng truy cập, tiêu điểm và xử lý nhập từ bàn phím, nên đây là giải pháp đơn giản và tiêu chuẩn

Cách tiếp cận sai: tạo nút bằng ``

  • Trong cộng đồng người dùng React hay HTMX, có khá nhiều trường hợp triển khai tương tác như mở modal bằng dạng ``
    • Mã ví dụ: 
      Open Modal
  • Vấn đề của cách này
    • Trình đọc màn hình không nhận diện phần tử đó là phần tử tương tác
    • Không thể di chuyển tiêu điểm bằng bàn phím tới đó
    • Chỉ sự kiện click hoạt động, còn nhấn Enter hay Spacebar thì không phản hồi
    Quảng cáo

Giới hạn của các nỗ lực “sửa” khả năng truy cập

  • Thêm thuộc tính [role="button"] có thể giải quyết vấn đề nhận diện của trình đọc màn hình, nhưng vấn đề về khả năng nhận tiêu điểm và xử lý nhập từ bàn phím vẫn còn nguyên
  • Có thể thêm [tabindex="0"] để cho phép nhận tiêu điểm, nhưng có nguy cơ làm rối thứ tự tiêu điểm hoặc gây ra các lần chuyển không mong muốn
  • Muốn xử lý nhập từ bàn phím thì phải đăng ký sự kiện keydown ở phạm vi toàn cục (document), phát hiện phím Enter hoặc ' ' (space), rồi tìm phần tử đang được focus để thực thi 
    document.addEventListener('keydown', (event) => {
  if (event.key !== 'Enter' && event.key !== ' ') return;
  const notRealBtn = document.activeElement.closest('[onclick]');
  if (!notRealBtn) return;
  // 실행 코드
});
  • Kết quả là, bạn đang tái hiện một cách phức tạp những gì `` vốn đã cung cấp sẵn theo mặc định
Quảng cáo

Các tính năng mặc định mà `` cung cấp

  • Phần tử `` tự động hỗ trợ những điều sau
    • Vai trò ngầm định ([role="button"])
    • Khả năng nhận tiêu điểm tự động
    • Khi đang có tiêu điểm, nhấn Enter và Spacebar sẽ phát sinh sự kiện click
  • Nếu muốn triển khai cùng hành vi đó bằng , bạn sẽ cần **nhiều thuộc tính và script**, còn giải quyết được chỉ với một dòng 
    Open Modal

Kết luận: đơn giản là tốt nhất

  • `` là cách đơn giản nhất để vừa đáp ứng tiêu chuẩn khả năng truy cập vừa giảm lượng mã nguồn
  • Thay vì thêm xử lý sự kiện hay thuộc tính không cần thiết, dùng phần tử HTML tiêu chuẩn sẽ có lợi hơn về khả năng bảo trì và hiệu quả
  • Với thông điệp “càng lười thì càng nên dùng đúng phần tử”, bài viết nhấn mạnh tầm quan trọng của thói quen phát triển biết tránh độ phức tạp không cần thiết và tận dụng tính năng mặc định

Bài viết liên quan

7 bình luận

 
come2mecome 2025-11-04

Đây là một bài viết rất hay. Có thể tóm tắt ý chính của phần nội dung là: "hãy sử dụng các thẻ HTML một cách có ý nghĩa." Nếu cung cấp sự kiện click bằng thẻ div (hoặc các thẻ khác), thì theo tôi điều đó hoàn toàn không khác gì thời kỳ trước đây khi người ta dùng thẻ table để dựng layout.
 
carnoxen 2025-11-11

Tất nhiên nếu nhét các thuộc tính aria-* vào thì có thể sẽ rõ ràng hơn, nhưng thay vì phải khổ sở như thế thì thà cứ dùng đúng thẻ còn hơn lol
 
roxie 2025-11-06

Hoài niệm thật nhỉ haha
 
nemorize 2025-11-02

Hãy dùng button

background, border, outline, appearance, -webkit-appearance, cursor
Có quá nhiều stylesheet mặc định phải ghi đè T_T
 
rtyu1120 2025-11-03

Vì vậy mới có CSS Reset.
 
carnoxen 2025-11-02

Các trang web cơ quan công quyền ở nước mình dường như dùng `` rất nhiều...
 
GN⁺ 2025-11-02
Ý kiến Hacker News

  • Một trong những điều khiến tôi khó chịu là các website triển khai điều hướng bằng trình xử lý onclick Chỉ cần dùng thẻ `` thì mở tab mới, tích hợp với công cụ hỗ trợ tiếp cận, menu chuột phải và mọi thứ khác đều tự động hoạt động tốt Nếu là điều hướng thì nên dùng liên kết thay vì một nồi lẩu JavaScript

    • Trong vài năm gần đây, kiểu triển khai này ngày càng nhiều hơn Có lẽ do ảnh hưởng của framework hoặc do sự thờ ơ Dù vậy, cách truyền thống gần như luôn tốt hơn về mặt UX Tôi mong những ai cố thay thế thẻ `` sẽ gặp một chút bất tiện
    • Tôi nghĩ vấn đề là các lập trình viên bắt đầu với React đã lao ngay vào “những thứ thú vị” mà không học các khái niệm HTML cơ bản Những người này tạo ra các pattern sai, rồi các lập trình viên đi sau cứ thế làm theo Rất hiếm khi tôi thực sự phải trang trí một `` để nó trông như nút bấm
    • Nên loại bỏ cả cuộn trang dựa trên JS Tôi hay cuộn bằng nút giữa chuột, nhưng nhiều website làm hỏng chức năng này
    • Nghe chuyện này lại khiến tôi nhớ đến trình kiểm tra liên kết của Microsoft Office 365 Nhấp chuột trái thì hiện trang kiểm tra an toàn, còn nhấp chuột giữa thì đi thẳng luôn
    • Ngay cả trong dự án React tôi tham gia gần đây, toàn bộ điều hướng đều dùng onClick Ngay cả các phần tử về bản chất là liên kết cũng đều bị xử lý bằng click handler, thật khó hiểu

  • Hầu hết các nút nên khai báo rõ type="button" Giá trị mặc định là submit, nên nếu ở trong form thì nó sẽ tự động gửi Có lẽ một số lập trình viên không biết điều này nên mới dùng ``

    • Tôi nghĩ bài viết dài của OP đã bỏ sót thông tin cốt lõi này Nút với kiểu mặc định hoạt động kỳ quặc và đôi khi còn bỏ qua JS handler
    • Mặc định đó tương ứng với , còn thì khác
    • Tôi cũng tự mình trải qua rồi mới biết điều này
    • Dùng thì có thể tránh được vấn đề `type="submit"` vốn trống ngay từ đầu nên bạn chỉ thêm những chức năng cần thiết, và sau này cũng dễ chỉnh sửa Trong khi đó, để hiểu hành vi mặc định của `` thì phải đọc tài liệu Rốt cuộc đây là vấn đề lựa chọn giữa kiểm soát tường minh vs tính năng tích hợp sẵn

  • Sẽ hay hơn nếu bài viết mở rộng theo hướng “hãy dùng đúng phần tử HTML được tạo ra cho mục đích đó” Nhiều lập trình viên SPA không hiểu rõ ngữ nghĩa của các phần tử HTML nên cứ phải phát minh lại bánh xe

    • Giá mà các phần tử dễ style hơn một chút Ví dụ date picker mặc định quá xấu nên người ta lại thay bằng bản dựa trên JS
    • Câu “hãy dùng nguyên nền tảng” được nhắc nhiều trong frontend kể từ sau HTML5, nhưng vẫn chưa lan rộng khắp nơi
    • Thực tế là đa số lập trình viên hầu như không biết các phần tử HTML, và cứ muốn giải quyết mọi thứ bằng một cái DIV
    • Khoảng năm 2010, style nút bấm khác nhau giữa các trình duyệt nên phải tự làm lấy Đó là bối cảnh khiến các nút tùy biến xuất hiện

  • Bây giờ đã có cả một thế hệ phải bấm lung tung khắp màn hình để tìm vùng có thể click Mười năm trước có ai đó đã làm cho việc kéo liên kết quan trọng hơn chọn văn bản, nên giờ gần như không thể chọn chữ được nữa Có khi phải fork trình duyệt mới sửa được chuyện này

    • Tôi có thói quen kéo liên kết để mở trong tab nền Nếu giữ Alt (hoặc Option) thì có thể chọn văn bản bên trong liên kết
    • Việc trên iOS cố sao chép số điện thoại mà lại tự động gọi cũng gây khó chịu tương tự Đó thực sự là hành vi không mong muốn
    • Văn bản không thể chọn được thật điên tiết Dùng ứng dụng TextSniper trên macOS thì có thể chọn vùng và dùng OCR để sao chép chữ Nhờ đó mà Google Analytics cũng đỡ khó dùng hơn một chút
    • Tôi cũng thường xuyên thất bại khi cố chọn một phần văn bản trong liên kết Những vấn đề như vậy cần được nhắc đến thường xuyên hơn
    • Cũng có tiện ích mở rộng trình duyệt để chọn văn bản trong liên kết Trước đây là Select Like A Boss, giờ gọi là Drag-Select Link Text

  • Tôi từng mất khá lâu loay hoay vì lỗi kích thước flexbox do stylesheet mặc định của Chrome có button {align-items: flex-start} Dù vậy, tôi vẫn cố dùng đúng phần tử HTML khi có thể, nhưng trong các side project nhỏ thì đôi lúc `` lại tiện hơn

    • Thuộc tính appearance: none hữu ích để reset style nút bấm Tôi tạo class .unbuttonify để nó hoạt động như nút nhưng trông theo kiểu khác
    • Tôi muốn nhấn mạnh rằng lập trình viên frontend nên nắm vững kiến thức CSS cơ bản

  • Nên dùng phần tử đúng với mục đích ban đầu của nó bất cứ khi nào có thể

  • Tôi có hai điều không thích về nút bấm Một là kiểu gì cũng phải style lại cho nó, hai là cảnh báo không thể lồng nút vào nhau Trên thực tế, đây là tình huống gặp khá thường xuyên

  • LLM thường sinh ra những pattern sai như thế này Chúng hay phớt lờ tính năng mặc định của trình duyệt và triển khai theo cách phức tạp hơn mức cần thiết Tôi thường bảo Claude đơn giản hóa kiểu code như vậy Ngay cả trong TypeScript, chúng cũng có xu hướng làm cách xử lý lỗi trở nên kỳ quặc

    • LLM rất giỏi viết code, nhưng lại thiếu cảm quan kỹ nghệ phần mềm
    • Do đặc tính dự đoán token, LLM thường chọn các pattern phức tạp thường xuyên hơn

  • Tôi cố gắng mặc định dùng nút bấm bất cứ khi nào có thể Tuy nhiên, nếu về bản chất nó phải hoạt động như liên kết thì tôi dùng thẻ ``

    • Tôi thường phân biệt: URL thay đổi thì là liên kết, không đổi thì là nút bấm
    • Nếu đó là một “siêu liên kết dùng để di chuyển trong web app” thì đó là thẻ ``

  • Tôi từng thắc mắc vì sao lại có ý kiến dùng ``

    • Có lẽ vì `` thuận tiện hơn cho các kiểu tùy biến hình thức kỳ quặc Thế là nó vừa không giống nút bấm, vừa không hoạt động như nút bấm
    • Ví dụ, các site như TV Tropes gấp/mở danh sách dài theo dạng “thư mục”, và từng triển khai việc này bằng ``
    • Lý do phổ biến nhất là ngại ghi đè style nút mặc định