Accessibility Attributes (ARIA)

Accessibility Attributes (ARIA) là gì?

Accessibility Attributes (ARIA) — viết tắt của Accessible Rich Internet Applications — là tập hợp các thuộc tính HTML giúp cải thiện khả năng truy cập cho người dùng sử dụng công nghệ hỗ trợ như phần mềm đọc màn hình (screen reader), bàn phím điều hướng, hoặc thiết bị nhập liệu thay thế. ARIA không thay đổi cách hiển thị trang, mà bổ sung thông tin ngữ nghĩa và trạng thái cho các phần tử không có vai trò (role), trạng thái (state) hay thuộc tính (property) rõ ràng trong HTML chuẩn.

Ví dụ: một nút được tạo bằng <div> thay vì <button> sẽ thiếu ngữ nghĩa tương tác — ARIA giúp khai báo rõ đây là nút (<div role="button">) và mô tả chức năng của nó (<div role="button" aria-label="Đóng cửa sổ">).

Tại sao quan trọng trong SEO?

ARIA không phải yếu tố xếp hạng trực tiếp trên Google hay Bing, nhưng ảnh hưởng gián tiếp và mạnh mẽ đến On-Page SEO qua ba kênh chính:

• Cải thiện trải nghiệm người dùng (UX): Trang dễ truy cập hơn giữ chân người dùng lâu hơn, giảm tỷ lệ thoát — tín hiệu chất lượng mà công cụ tìm kiếm đánh giá cao;
• Hỗ trợ điều hướng bằng bàn phím và công nghệ hỗ trợ: Người dùng tìm kiếm bằng giọng nói hoặc duyệt web bằng bàn phím thường có hành vi tìm kiếm rõ ràng hơn — tăng khả năng chuyển đổi;
• Tăng độ tin cậy và uy tín thương hiệu: Trang tuân thủ tiêu chuẩn WCAG (Web Content Accessibility Guidelines) thường được đánh giá cao hơn về chất lượng nội dung và kỹ thuật — yếu tố góp phần vào E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness).

Lưu ý: Google xác nhận họ không dùng ARIA làm tín hiệu xếp hạng độc lập, nhưng khuyến khích triển khai để đảm bảo trang hoạt động đúng với mọi người — bao gồm cả bot tìm kiếm khi phân tích cấu trúc nội dung.

Cách hoạt động

ARIA hoạt động dựa trên ba thành phần cốt lõi:

1. Roles (vai trò): Xác định loại thành phần (ví dụ: role="navigation", role="alert"). Có thể là role tĩnh (đặt một lần) hoặc động (thay đổi theo trạng thái);
2. States and Properties (trạng thái và thuộc tính): Mô tả trạng thái hiện tại (aria-expanded="true") hoặc đặc điểm không thay đổi (aria-required="true");
3. Landmark and Name/Description: Dùng aria-label, aria-labelledby, aria-describedby để cung cấp tên hoặc mô tả rõ ràng cho phần tử.

Screen reader đọc các thuộc tính này theo thứ tự ưu tiên: đầu tiên là nội dung hiển thị, sau đó là aria-label, rồi đến aria-labelledby. Nếu tất cả đều vắng mặt, phần tử có thể bị bỏ qua hoặc đọc sai.

Hướng dẫn thực hiện

Để triển khai ARIA đúng cách, tuân thủ 5 bước sau:

1. Ưu tiên HTML chuẩn trước: Dùng <button>, <nav>, <main>, <section> thay vì <div role="button"> nếu có thể — HTML5 đã hỗ trợ đầy đủ ngữ nghĩa;
2. Chỉ thêm ARIA khi cần thiết: Không đặt role="button" lên <button> — gây xung đột và lỗi đọc;
3. Dùng aria-label khi không có nhãn hiển thị: Ví dụ nút biểu tượng (🔍, ✕) cần mô tả ngắn gọn: <button aria-label="Tìm kiếm"></button>;
4. Không ẩn nội dung hữu ích bằng aria-hidden="true": Chỉ áp dụng cho phần tử thuần trang trí (icon không mang thông tin, background SVG). Nếu ẩn phần tử chứa liên kết hoặc văn bản quan trọng, screen reader sẽ bỏ qua — ảnh hưởng đến khả năng khám phá nội dung;
5. Kiểm tra bằng công cụ: Dùng Lighthouse (tab Accessibility), axe DevTools, hoặc NVDA/JAWS để kiểm tra phát âm và điều hướng thực tế.

Lỗi thường gặp

Lỗi	Hệ quả	Cách khắc phục
aria-hidden="true" trên phần tử cha chứa nội dung tương tác	Screen reader bỏ qua toàn bộ nút, liên kết, form con — người dùng không thể tương tác	Loại bỏ aria-hidden hoặc áp dụng riêng cho từng phần tử trang trí
Dùng role="button" nhưng không xử lý phím Space/Enter	Người dùng bàn phím không kích hoạt được hành động	Thêm sự kiện keydown bắt phím Enter và Space, hoặc dùng thẻ <button> thật
aria-label trùng lặp hoặc mơ hồ (ví dụ: "Nút", "Click đây")	Người dùng không hiểu chức năng — tăng tỷ lệ thoát	Viết mô tả rõ ràng, ngắn gọn, phản ánh hành động: "Mở menu chính", "Gửi biểu mẫu liên hệ"

Ví dụ thực tế

Ví dụ 1 – Nút đóng modal:

<button type="button" aria-label="Đóng cửa sổ thông báo">
  <span aria-hidden="true">×</span>
</button>

→ aria-hidden="true" chỉ áp dụng cho ký tự × (trang trí), còn aria-label cung cấp ngữ nghĩa đầy đủ cho screen reader.

Ví dụ 2 – Menu điều hướng mở rộng:

<button 
  aria-expanded="false" 
  aria-controls="main-menu" 
  aria-label="Mở menu điều hướng"
>
  Menu
</button>
<nav id="main-menu" aria-hidden="true">
  <ul>...</ul>
</nav>

Khi nhấn nút, JavaScript thay đổi aria-expanded="true" và aria-hidden="false" — screen reader biết trạng thái và đọc nội dung mới.

Câu hỏi thường gặp

ARIA có giúp trang xếp hạng cao hơn không?

Không trực tiếp. Google không dùng ARIA làm tín hiệu xếp hạng, nhưng trang có khả năng truy cập tốt thường có chỉ số UX tốt hơn (thời gian ở lại, tỷ lệ tương tác) — những yếu tố gián tiếp ảnh hưởng đến thứ hạng.

Có nên dùng ARIA cho mọi trang web?

Có, nếu trang có thành phần tương tác phức tạp (tab, accordion, carousel, form động) hoặc phục vụ đối tượng người dùng đa dạng. Với trang tĩnh đơn giản, HTML chuẩn thường đã đủ — không cần thêm ARIA thừa.

ARIA có ảnh hưởng đến tốc độ tải trang không?

Không đáng kể. ARIA là thuộc tính HTML thuần, không yêu cầu tải script hay tài nguyên ngoài. Tuy nhiên, việc xử lý trạng thái động (ví dụ: thay đổi aria-expanded) cần JavaScript tối ưu — nếu code nặng sẽ ảnh hưởng tốc độ, nhưng đây là vấn đề của JS, không phải ARIA.