Chào anh em!

Tiếp nối chuỗi bài mổ xẻ các thuộc tính HTML từ type cho đến placeholder, hôm nay chúng ta sẽ bước sang một vùng đất mới, cao cấp hơn và cực kỳ quan trọng trong các hệ thống web hiện đại: Thuộc tính role.

Nhiều anh em lập trình viên khi nhìn thấy role="button" hay role="dialog" trong code của người khác thường tỏ ra hoài nghi: "Ủa, cái thẻ <div> sinh ra là cái <div>, gắn thêm cái role vào thì nó biến thành cái khác chắc?".

Câu trả lời ngắn gọn là: Về mặt hiển thị hình ảnh trên màn hình thì không, nhưng về mặt "nhận thức" của máy móc và người khuyết tật thì CÓ! Hãy cùng tìm hiểu xem thuộc tính này quyền năng đến mức nào nhé.

1. role thực chất là gì? (ARIA là gì?)

Thuộc tính role là một phần cốt lõi của chuẩn ARIA (Accessible Rich Internet Applications) do W3C định nghĩa. Nó thuộc họ các thuộc tính aria-* được sinh ra để giải quyết một bài toán lớn của Web: Accessibility (Tính trợ năng).

Không phải ai truy cập vào trang web của bạn cũng dùng mắt để nhìn và dùng chuột để click. Những người khiếm thị phải sử dụng các phần mềm Screen Reader (Trình đọc màn hình) để nghe máy tính đọc nội dung trang web lên.

Vấn đề nằm ở chỗ:

• Nếu bạn dùng đúng thẻ ngữ nghĩa của HTML5 (như <button>, <nav>, <header>, <dialog>), trình đọc màn hình sẽ thông minh nhận diện được ngay: "À, đây là một cái nút bấm".
• Nhưng nếu vì lý do thiết kế giao diện phức tạp, bạn dùng một thẻ <div> hoặc <span> rồi gắn sự kiện onclick vào để làm nút bấm, trình đọc màn hình sẽ ngu ngơ đọc lên là: "Khối văn bản (Div)". Người dùng khiếm thị sẽ chẳng thể biết đó là thứ có thể bấm được.

Và đó là lúc role xuất hiện để "lừa" (hoặc cứu rỗi) trình đọc màn hình.

2. Sức mạnh của role: Biến hình thẻ HTML

Bằng cách khai báo thuộc tính role, bạn đang dán một tấm biển định danh cho phần tử HTML, nói cho trình đọc màn hình và các công nghệ hỗ trợ biết bản chất thực sự của nó là gì, bất kể nó được viết bằng thẻ gì.

Ví dụ kinh điển về "Nút bấm giả cầy":

<!-- Trông bên ngoài là một thẻ div bình thường -->
<div class="super-button" role="button" tabindex="0" onclick="submitForm()">
    Gửi dữ liệu
</div>

Khi một người khiếm thị lướt qua đoạn code này:

• Nhờ có role="button", trình đọc màn hình sẽ phát ra âm thanh và đọc lớn lên: "Gửi dữ liệu, nút bấm (Button)".
• Thuộc tính tabindex="0" giúp người dùng có thể dùng phím Tab để di chuyển focus vào cái <div> đó.
• Người dùng chỉ cần ấn phím Enter hoặc Space là trigger được sự kiện onclick giống hệt như một nút <button> thực thụ.

3. Các giá trị role phổ biến nhất trong thực tế

W3C định nghĩa hàng chục loại role khác nhau, nhưng trong công việc Frontend hàng ngày, anh em sẽ thường xuyên bắt gặp các nhóm giá trị sau:

Nhóm cấu trúc (Document Structure):

• role="navigation": Định nghĩa đây là khu vực chứa các đường dẫn điều hướng (Menu, Sidebar).
• role="main": Chỉ định đây là vùng chứa nội dung chính của trang.
• role="banner": Thường dùng cho phần Header đầu trang.
• role="contentinfo": Dùng cho phần Footer cuối trang.

Nhóm tương tác (Widgets):

• role="button": Biến một thẻ bất kỳ thành nút bấm.
• role="dialog": Khai báo đây là một hộp thoại Popup hoặc Modal.
• role="tablist", role="tab", role="tabpanel": Bộ ba hoàn hảo để xây dựng các component Tabs chuyển đổi nội dung mà không dùng thẻ <a> truyền thống.
• role="alert": Dùng cho các khung thông báo lỗi/thành công khẩn cấp, ép trình đọc màn hình phải đọc ngay lập tức cho người dùng nghe khi nó xuất hiện.

4. Quy tắc sống còn: "Đừng lạm dụng thẻ div"

Dù role rất mạnh mẽ trong việc cứu trợ các component phức tạp, nhưng có một nguyên tắc tối thượng trong giới lập trình Web hiện đại: Đừng bao giờ dùng div + role nếu HTML5 đã có sẵn thẻ ngữ nghĩa tương ứng!

• Sai lầm: Viết <div role="button">Click me</div>
• Chuẩn mực: Viết <button type="button">Click me</button>

Tại sao lại như vậy? Vì các thẻ native (như <button>, <input>, <a>) mặc định đã được tích hợp sẵn khả năng xử lý bàn phím (phím Enter, Space), trạng thái Focus, và tương thích hoàn hảo với mọi thiết bị di động mà không cần bạn phải viết thêm một đống code JavaScript hoặc CSS rườm rà. role sinh ra để dành cho những custom component phức tạp (như dropdown đa cấp, slider kéo thả, tree view) mà các thẻ HTML gốc không đáp ứng nổi.

Lời kết

Thuộc tính role chính là cầu nối đưa ứng dụng web của bạn đến gần hơn với tất cả mọi người, kể cả những người có khiếm khuyết về thể chất. Trong các tiêu chuẩn đánh giá chất lượng website quốc tế (như chuẩn WCAG), việc sử dụng đúng role và các thuộc tính ARIA là một bắt buộc pháp lý ở nhiều quốc gia.

Lần tới, khi tự tay chế tạo ra một custom UI component độc lạ bằng <div>, đừng quên "phù phép" cho nó một cái role thích hợp nhé!