Các nhà thiết kế web chưa quen với HTML có thể bắt gặp một tập hợp các thuộc tính không quen thuộc. Được bắt đầu bằng từ ARIA, các thuộc tính này xuất hiện khắp nơi trên web, nhưng mục đích của chúng có thể là một bí ẩn đối với người dùng mới.
Các thuộc tính ARIA phục vụ một mục đích quan trọng trong khả năng truy cập trang web của bạn. Chúng mô tả cả nội dung của một phần tử nhất định và cách mà một phần tử liên quan đến một trang hoặc các phần tử khác xung quanh nó.
Việc thêm các thuộc tính cực kỳ quan trọng này vào trang web của bạn sẽ giúp đảm bảo rằng tất cả khách truy cập đều có được trải nghiệm giống nhau, bất kể họ đang sử dụng công nghệ gì.
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, đặc biệt là các ứng dụng giàu JavaScript, không phải lúc nào cũng rõ ràng ngay lập tức dựa trên cú pháp vai trò của các phần tử riêng lẻ.
Khó khăn trong việc phân biệt vai trò có thể là một vấn đề khi người dùng xem trang web bằng các 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ủa bạn có thể không điều hướng được một trang web khi sử dụng các công cụ trợ năng.
Mặc dù cách ưa thích để bạn giải quyết vấn đề này là sử dụng các phần tử ngữ nghĩa phù hợp trong HTML5, nhưng điều này không phải lúc nào cũng thực tế hoặc khả thi. Đây là lúc các thuộc tính ARIA trên các phần tử HTML xuất hiện. Các thuộc tính này giúp xác định vai trò và thuộc tính của phần tử của bạn theo cách mà các công cụ trợ năng có khả năng xử lý.
Tại sao các thuộc tính ARIA lại quan trọng?
Nói tóm lại, các thuộc tính ARIA giúp người dùng khuyết tật có thể sử dụng trang web của bạn. Các vai trò và thuộc tính này xác định thông tin bổ sung về các yếu tố khác nhau trên trang web của bạn mà có thể không có sẵn.
Có rất nhiều thuộc tính ARIA mà bạn có thể chỉ định. Bạn nên sử dụng chúng ở bất cứ đâu cần ngữ cảnh bổ sung để cho phép tài liệu có ý nghĩa theo cách không trực quan.
Ví dụ: hãy xem xét một trang web có điều hướng chính bao gồm một
- phần tử được bọc trong một
<div class="nav">
<ul>
<li>Home</li>
<li>Shop</li>
<li>About</li>
</ul>
</div>
Bạn có thể sử dụng các thuộc tính ARIA để giúp người dùng điều hướng. Thêm thuộc tính vai trò và nhãn aria vào
- phần tử 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>
Mặc dù trong hầu hết các trường hợp, bạn nên sử dụng các yếu tố thích hợp, nhưng điều này có thể không phải lúc nào cũng khả thi trong các giới hạn của công việc bạn đang làm. Ví dụ: nếu trang web của bạn yêu cầu sử dụng thanh tiến trình, nhưng bạn muốn có một thiết kế mà thanh tiêu chuẩn không cho phép.
Trong trường hợp này, bạn có thể tạo một bộ phần tử tùy chỉnh để hiển thị thanh tiến trình của mình. Tuy nhiên, đối với trình đọc màn hình, các yếu tố này sẽ giống như một mớ hỗn độn; nó sẽ không thể cung cấp thông tin hữu ích cho khách truy cập trang web của bạn.
Bằng cách đặt vai trò của trình bao bọc thành thanh tiến trìnhvà thêm aria-valuenow, aria-valueminVà aria-valuemax thuộc tính cho trình bao bọc, bạn vẫn có thể chỉ ra tiến trình.
Trong kỷ nguyên hiện đại, việc xây dựng các trang web có thể truy cập là quan trọng hơn bao giờ hết. Có một số thư viện thành phần React được xây dựng có tính đến khả năng truy cập.
Việc có một trang web có thể truy cập không chỉ giúp xếp hạng tìm kiếm của bạn cho một số công cụ tìm kiếm chính mà còn đảm bảo rằng bạn không loại bỏ một nhóm người dùng tiềm năng khỏi cơ sở người dùng của mình.
Việc thêm các thuộc tính ARIA thích hợp vào trang web của bạn sẽ giúp đảm bảo rằng bạn trình bày thông tin cho tất cả người dùng. Kết quả cuối cùng sẽ là một trang web chào đón tất cả khán giả và trình bày càng gần với trải nghiệm giống nhau càng tốt cho mọi người.
Tôi nên sử dụng thuộc tính ARIA nào?
Có rất nhiều thuộc tính khác nhau mà bạn nên tận dụng trên trang web của mình. Nói chung, các thuộc tính này thuộc hai loại khác nhau. Đầu tiên là các thuộc tính widget thường mô tả một phần tử tương tác tùy chỉnh.
Danh mục khác bạn cần lưu ý là thuộc tính mối quan hệ. Đây là những thuộc tính chuyển tiếp thông tin tới các công nghệ hỗ trợ về cách một phần tử cụ thể liên quan đến phần còn lại của trang web hoặc các phần tử khác.
Khi cần xem xét bạn nên đưa vào thuộc tính ARIA nào, câu trả lời đơn giản là càng nhiều càng tốt. Bất kỳ nơi nào mà phần tử bạn đang sử dụng không mô tả vai trò mà phần tử đó đáp ứng, bạn nên sử dụng thuộc tính vai trò.
Nếu bạn có một trường có nhãn, thì trường đó phải có aria-labeledby thuộc tính. Miễn là các thuộc tính bạn đang sử dụng có ý nghĩa, bạn chỉ làm cho trang web của mình dễ truy cập hơn bằng cách thêm chúng.
Thuộc tính tiện ích
Thuộc tính widget là danh mục lớn hơn nhiều. Nó chứa hầu hết các thuộc tính ARIA mà bạn sẽ cần thêm vào một trang tiêu chuẩn. Trong ví dụ trước về thanh tiến trình tùy chỉnh, aria-valuenow, aria-valuemin và aria-valuemax đều là các thuộc tính tiện ích con. Chúng mô tả trạng thái hoặc các trạng thái có thể có của phần tử mà chúng đang bật.
Có rất nhiều thuộc tính khác nhau mà bạn có thể sử dụng để mô tả trạng thái của một phần tử. Một trong những phổ biến nhất là aria-nhãn. Thuộc tính này áp dụng một nhãn cho thành phần mà bạn đặt nhãn đó. Nhãn này chỉ hiển thị đối với các công nghệ hỗ trợ.
Một cặp thuộc tính ARIA phổ biến khác thuộc loại này là aria-ẩn Và aria bị vô hiệu hóa. Chúng có thể truyền đạt trạng thái hiện tại của một phần tử và liệu trình đọc màn hình có nên đọc nó cho người dùng hay không. Điều này hữu ích cho nhiều loại thiết bị khác nhau có trình đọc màn hình riêng.
Thuộc tính quan hệ
Không giống như các thuộc tính tiện ích, các thuộc tính mối quan hệ cung cấp các chỉ dẫn công nghệ hỗ trợ về mối quan hệ và việc sử dụng một phần tử với các phần tử khác xung quanh nó. Phổ biến nhất trong số này là thuộc tính vai trò. Vai trò chỉ định mục đích mà một phần tử phục vụ trong một trang web.
Nếu bạn đặt vai trò gán cho dẫn đườngnó sẽ ngay lập tức được xác định là trình bao bọc điều hướng.
Một số thuộc tính quan hệ xác định cách một phần tử liên quan đến các phần tử khác xung quanh nó. Các aria-labeledby chẳng hạn, thuộc tính cho biết phần tử nào đóng vai trò là nhãn cho phần tử này. Điều này có thể hữu ích khi sử dụng các bố cục có ý nghĩa trực quan nhưng có nhãn cho các điều khiển biểu mẫu cụ thể sau chúng trong luồng tài liệu.
Mặc dù có ít thuộc tính mối quan hệ hơn thuộc tính widget, nhưng những thuộc tính này thường có tầm quan trọng lớn hơn. Chúng thường có thể mô tả luồng và kiểm soát tài liệu, đồng thời cung cấp thêm chi tiết về cách người dùng có thể điều hướng trang web của bạn.
Các thuộc tính này có tầm quan trọng đặc biệt khi bạn thiết kế các biểu mẫu và mục điều hướng trên trang web của mình.
Tại sao việc đưa các thuộc tính ARIA vào HTML của bạn lại quan trọng đến vậy
Thuộc tính ARIA phục vụ mục đích đơn giản và cần thiết trên trang web của bạn. Chúng phục vụ để đảm bảo rằng tất cả người dùng đều có thể truy cập trang web, bất kể việc sử dụng phần mềm trợ năng. Đối với người dùng khuyết tật, việc có các thuộc tính này trên trang web của bạn có thể giúp trang web có thể sử dụng được.
Phương pháp ưa thích để làm việc với công nghệ hỗ trợ là sử dụng các yếu tố ngữ nghĩa thích hợp. Tuy nhiên, khi không thể làm như vậy, các thuộc tính của ARIA giúp nó có thể hoạt động tự do mà người dùng của bạn không bị mất nội dung.