Thuộc tính Aria trong HTML là gì? Tầm quan trọng của Aria trong HTML

Dùng semantic markup sẽ giúp trang của bạn dễ truy cập hơn và thuộc tính Aria có thể giúp bạn làm việc này. Dưới đây là những điều bạn cần biết về thuộc tính Aria trong HTML.

Thuộc tính Aria đóng vai trò quan trọng trong khả năng truy cập của trang web. Chúng mô tả nội dung của một nhân tố được cung cấp và cách nhân tố đó liên quan tới một trang hoặc thành phần khác xung quanh nó.

Thêm những thuộc tính cực kỳ quan trọng này vào web sẽ đảm bảo tất cả khách truy cập có cùng trải nghiệm trên mọi thiết bị.

Thuộc tính Aria là gì?

Aria là từ viết tắt của Accessible Rich Internet Applications. Trong HTML hiện đại, đặt biệt ở ứng dụng “giàu” JavaScript, không phải lúc nào cũng rõ ràng cú pháp vai trò của từng thành phần.

Khó khăn trong việc phân biệt vai trò có thể là vấn đề khi người dùng xem trang bằng những công cụ trợ năng như trình đọc màn hình. Thiếu HTML ngữ nghĩa phù hợp, người dùng cuối có thể không điều hướng được trang khi dùng công cụ trợ năng.

Về cơ bản, thuộc tính aria trên HTML xác định vai trò và thuộc tính của thành phần theo cách mà công cụ trợ năng có thể xử lý.

Tầm quan trọng của thuộc tính aria trong HTML

Thuộc tính aria giúp người khuyết tật có thể dùng trang web của bạn. Vai trò và thuộc tính xác định thêm thông tin về các nhân tố khác nhau trên trang của bạn mà có thể chưa có sẵn.
HTML có thuộc tính aria phong phú. Bạn nên dùng chúng ở bất cứ nơi đâu khi muốn thêm ngữ cảnh cho tài liệu có ý nghĩa theo cách không trực quan.

Ví dụ, cân nhắc một trang có điều hướng chính bao gồm phần tử nằm trong <div>, thay vì <nav>:

<div class="nav">
    <ul>
        <li>Home</li>
        <li>Shop</li>
        <li>About</li>
    </ul>
</div>

Bạn có thể dùng thuộc tính aria giúp người dùng điều hướng. Thêm vai trò và aria-label vào <ul> cho phép trình đọc màn hình và các công nghệ hỗ trợ biết menu của bạn ở đâu.

<div class="nav">
    <ul role="navigation" aria-label="Main">
        <li>Home</li>
        <li>Shop</li>
        <li>About</li>
    </ul>
</div>

Trong hầu hết trường hợp, bạn nên dùng các nhân tố phù hợp, tuy nhiên, điều đó không phải lúc nào cũng khả thi trong giới hạn công việc bạn đang làm. Ví dụ, trang của bạn cần sử dụng thanh tiến trình nhưng bạn muốn một thiết kế mới lạ mà thanh chuẩn không cho phép.

Trong trường hợp này, bạn có thể tạo một nhóm các nhân tố tùy chỉnh để hiện thanh tiến trình. Với một trình đọc màn hình, chúng trông như một đống lộn xộn nên không thể truyền tải thông tin hữu ích cho khách truy cập của bạn.

Bằng cách đặt vai trò của wrapper thành progressbar và thêm aria-valuenow, aria-valuemin, aria-valuemax, bạn vẫn có thể chỉ báo tiến trình.

Không chỉ tăng khả năng truy cập web giúp bạn có thứ hạng cao trên một số công cụ tìm kiếm, nó còn đảm bảo bạn không bị giảm nhóm người dùng tiềm năng. Thêm thuộc tính aria vào trang giúp bạn đảm bảo thông tin được cung cấp tới tất cả người dùng.

Thuộc tính aria trong HTML có phù hợp với bạn?

Bạn có nhiều thuộc tính để sử dụng cho trang web. Nhìn chung, những thuộc tính này được chia thành 2 loại khác nhau. Đầu tiên là thuộc tính widget mô tả một nhân tố tương tác tùy chỉnh. Thứ hai là thuộc tính về mối quan hệ. Nó có tác dụng chuyển tiếp thông tin tới các công nghệ hỗ trợ về cách một thành phần cụ thể liên quan tới phần còn lại của trang hoặc nhân tố khác.

Khi đề cập tới thuộc tính aria mà bạn nên bao gồm, câu trả lời rất đơn giản là nhiều nhất có thể. Tại bất kỳ vị trí nhân tố mà bạn đang dùng không mô tả vai trò mà nó đáp ứng, bạn nên dùng thuộc tính role.

Nếu có trường chứa nhãn, nó nên có thuộc tính aria-labeledby bên trong. Miễn là thuộc tính bạn đang dùng có ý nghĩa, bạn chỉ cần thêm chúng để việc truy cập trang dễ dàng hơn.

Trên đây là những điều bạn cần biết về aria trong HTML. Hi vọng bài viết hữu ích với các bạn.