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 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
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
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.