Bootstrap điều khiển aria

Có một số ARIA1. 0 có thể được sử dụng để biểu thị mối quan hệ giữa các phần tử, khi các mối quan hệ đó không thể xác định dễ dàng từ DOM. Một thuộc tính như vậy là aria-controls

Thuộc tính aria-controls tạo mối quan hệ nhân quả. Nó xác định (các) phần tử được kiểm soát bởi phần tử hiện tại, khi mối quan hệ đó không được thể hiện trong DOM. Ví dụ: một button kiểm soát việc hiển thị thông tin có trong một div

Ngôn ngữ mãHTMLSao chép vào clipboard

<button onclick="showInfo();" aria-controls="I">Show info</button>
…
<div id="I">Information.</div>

Hai phần tử được phân tách trong DOM càng rộng rãi thì thuộc tính aria-controls càng trở nên hữu dụng. Hãy tưởng tượng hộp kiểm kiểm soát quá trình lọc kết quả tìm kiếm hoặc tab kiểm soát bảng điều khiển

Ngôn ngữ mãHTMLSao chép vào clipboard

<ul role="tablist">
  <li role="presentation"><a href="#" onclick="displayTab(1);" role="tab" aria-controls="panel1" aria-selected="true">Tab 1</a></li>
  <li role="presentation"><a href="#" onclick="displayTab(2);" role="tab" aria-selected="false">Tab 2</a></li>
  ...
</ul>

<div role="tabpanel" id="panel1">...</div>
<div role="tabpanel" id="panel2">…</div>

Khi Tác nhân người dùng (UA) hỗ trợ aria-controls, nó có thể chuyển tiêu điểm trực tiếp từ phần tử hiện tại sang phần tử mà nó kiểm soát. Cách khác là điều hướng qua tất cả nội dung can thiệp với hy vọng khám phá những gì có thể đã thay đổi ở những nơi khác trên trang. Vì lý do này, chỉ nên sử dụng aria-controls để trỏ đến thứ gì đó có sẵn trong DOM và có thể được điều hướng đến

Hỗ trợ UA cho aria-controls vẫn chưa nhất quán. Firefox và Internet Explorer đều hiển thị aria-controls thông qua API khả năng truy cập của họ (IAccessible2 và UIAutomation tương ứng). Tuy nhiên, hỗ trợ Công nghệ Hỗ trợ (AT) ít được khuyến khích hơn. Jaws (14+) hỗ trợ aria-controls, nhưng chỉ trong Firefox. Khi Jaws gặp thuộc tính aria-controls, nó sẽ thông báo “Sử dụng phím Jaws Alt và m để di chuyển đến phần tử được kiểm soát”. NVDA, VoiceOver và Window Eyes dường như không hỗ trợ nó trong bất kỳ trình duyệt nào

Mặc dù thực tế hỗ trợ giữa các trình duyệt và trình đọc màn hình có thể tốt hơn, nhưng thuộc tính aria-controls vẫn đáng sử dụng. Việc tạo các mối quan hệ trong DOM chắc chắn sẽ mạnh mẽ hơn nhưng không phải lúc nào cũng thực tế hoặc có thể đạt được. Sự hiện diện của aria-controls sẽ không làm hỏng Trải nghiệm người dùng (UX) đối với những người sử dụng UA không hỗ trợ nó, nhưng nó sẽ cải thiện đáng kể UX cho những người có sự kết hợp giữa trình duyệt/trình đọc màn hình.

aria điều khiển bootstrap là gì?

aria mở rộng trong bootstrap là gì?

Chuyển đổi dữ liệu bootstrap là gì?

Việc sử dụng sự sụp đổ trong bootstrap là gì?