Câu trả lời:
Thuộc tính HTML5 ARIA là những gì bạn đang tìm kiếm. Nó có thể được sử dụng trong mã của bạn ngay cả khi không có bootstrap.
Các ứng dụng Internet phong phú có thể truy cập (ARIA) xác định các cách để làm cho nội dung Web và các ứng dụng Web (đặc biệt là các ứng dụng được phát triển với Ajax và JavaScript) dễ tiếp cận hơn đối với người khuyết tật.
Để chính xác cho câu hỏi của bạn, đây là những gì thuộc tính của bạn được gọi là mô hình và trạng thái thuộc tính ARIA
aria-labelledby: Xác định phần tử (hoặc phần tử) gắn nhãn phần tử hiện tại.
aria-hidden (state): Cho biết rằng phần tử và tất cả các hậu duệ của nó không thể nhìn thấy hoặc có thể nhận thấy đối với bất kỳ người dùng nào được thực hiện bởi tác giả.
Người tiêu dùng chính của các tài sản này là các tác nhân người dùng như trình đọc màn hình cho người mù. Vì vậy, trong trường hợp với phương thức Bootstrap, phương thức divcó role="dialog". Khi trình đọc màn hình nhận thấy rằng divcó thể nhìn thấy có vai trò này, nó sẽ nói nhãn cho điều đó div.
Có rất nhiều cách để gắn nhãn mọi thứ (và một vài cách mới với ARIA), nhưng trong một số trường hợp, nên sử dụng một yếu tố hiện có làm nhãn (ngữ nghĩa) mà không cần sử dụng <label>thẻ HTML. Với các phương thức HTML, nhãn thường là một <h>tiêu đề. Vì vậy, trong trường hợp phương thức Bootstrap, bạn thêm aria-labelledby=[IDofModalHeader]và trình đọc màn hình sẽ nói tiêu đề đó khi phương thức xuất hiện.
Nói chung, một trình đọc màn hình sẽ chú ý bất cứ khi nào các phần tử DOM hiển thị hoặc vô hình, do đó, thuộc aria-hiddentính thường bị dư thừa và có thể bị bỏ qua trong hầu hết các trường hợp.
aria-hidden="true"sẽ ẩn các mục trang trí như biểu tượng glyphicon khỏi trình đọc màn hình, không có cách phát âm có ý nghĩa để không gây nhầm lẫn. Đó là một điều tốt đẹp làm vấn đề thực hành tốt.
ARIA không thay đổi chức năng, nó chỉ thay đổi các vai trò / thuộc tính được trình bày cho người dùng trình đọc màn hình. Thanh công cụ WAVE của WebAIM xác định vai trò ARIA trên trang.
Aria được sử dụng để cải thiện trải nghiệm người dùng của người dùng khiếm thị. Người dùng khiếm thị điều hướng mặc dù ứng dụng sử dụng phần mềm đọc màn hình như JAWS, NVDA, .. Trong khi điều hướng qua ứng dụng, phần mềm đọc màn hình sẽ thông báo nội dung cho người dùng. Có thể sử dụng Aria để thêm nội dung trong mã giúp người dùng trình đọc màn hình hiểu vai trò, trạng thái, nhãn và mục đích của điều khiển
Aria không thay đổi bất cứ điều gì trực quan. (Aria cũng sợ các nhà thiết kế).
aria-hidden:
thuộc tính ẩn aria được sử dụng để ẩn nội dung cho người dùng khiếm thị điều hướng qua ứng dụng bằng trình đọc màn hình (JAWS, NVDA, ...).
thuộc tính aria-hidden được sử dụng với các giá trị true, false.
Cách sử dụng:
<i class = "fa fa-books" aria-hidden = "true"></i>sử dụng aria-hidden = "true" trên <i>nội dung ẩn để người dùng trình đọc màn hình không có thay đổi trực quan trong ứng dụng.
nhãn aria
thuộc tính aria-nhãn được sử dụng để giao tiếp nhãn cho người dùng trình đọc màn hình. Thông thường trường tìm kiếm không có nhãn trực quan (nhờ các nhà thiết kế). aria-nhãn có thể được sử dụng để truyền đạt nhãn kiểm soát tới người dùng trình đọc màn hình
Cách sử dụng:
<input type = "edit" aria-label = "search" placeholder = "search">Không có thay đổi trực quan trong ứng dụng. Nhưng độc giả màn hình có thể hiểu mục đích của điều khiển
aria-labellingby
Cả aria-nhãn và aria-labellingby đều được sử dụng để truyền đạt nhãn. Nhưng aria-labellingby có thể được sử dụng để tham chiếu bất kỳ nhãn nào đã có trong trang trong khi nhãn aria được sử dụng để truyền đạt nhãn mà tôi không hiển thị trực quan
Cách tiếp cận 1:
<span id = "sd"> Search </span>
<input type = "text" aria-labelledby = "sd">
aria-labellingby cũng có thể được sử dụng để kết hợp hai nhãn cho người dùng trình đọc màn hình
Cách tiếp cận 2:
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">