Tôi đã nhìn thấy thuộc tính aria trong khi làm việc với Vật liệu góc. Ai đó có thể giải thích cho tôi, tiền tố aria có nghĩa là gì? nhưng quan trọng nhất là những gì tôi đang cố gắng hiểu là sự khác biệt giữa aria-hiddenvà hiddenthuộc tính.

ARIA (Ứng dụng Internet phong phú có thể truy cập) định nghĩa một cách để làm cho nội dung Web và ứng dụng Web dễ tiếp cận hơn đối với người khuyết tật.

Các hiddenthuộc tính là mới trong HTML5 và nói với các trình duyệt không hiển thị phần tử. Các aria-hiddenbất động sản nói với màn hình độc giả nếu họ nên bỏ qua yếu tố này. Hãy xem tài liệu w3 để biết thêm chi tiết:

https://www.w3.org/WAI/PF/aria/states_and_properIES#aria-hidden

Sử dụng các tiêu chuẩn này có thể giúp người khuyết tật sử dụng web dễ dàng hơn.

Thuộc tính ẩn là thuộc tính boolean (Đúng / Sai). Khi thuộc tính này được sử dụng trên một phần tử, nó sẽ loại bỏ tất cả sự liên quan đến phần tử đó. Khi người dùng xem trang html, các phần tử có thuộc tính ẩn sẽ không hiển thị.

Thí dụ:

    <p hidden>You can't see this</p>

Các thuộc tính ẩn của Aria chỉ ra rằng phần tử và TẤT CẢ con cháu của nó vẫn hiển thị trong trình duyệt, nhưng sẽ vô hình đối với các công cụ trợ năng, chẳng hạn như trình đọc màn hình.

Thí dụ:

    <p aria-hidden="true">You can't see this</p>

Hãy nhìn vào điều này . Nó sẽ trả lời tất cả các câu hỏi của bạn.

Lưu ý: ARIA là viết tắt của Ứng dụng Internet phong phú có thể truy cập

Nguồn: Tập đoàn Paciello

Sự khác biệt về ngữ nghĩa

Theo HTML 5.2 :

Khi được chỉ định trên một phần tử, [ hiddenthuộc tính] chỉ ra rằng phần tử đó chưa hoặc không còn liên quan trực tiếp đến trạng thái hiện tại của trang hoặc nó đang được sử dụng để khai báo nội dung được sử dụng lại bởi các phần khác của trang như trái ngược với việc được người dùng truy cập trực tiếp.

Các ví dụ bao gồm danh sách tab trong đó một số bảng không được hiển thị hoặc màn hình đăng nhập sẽ biến mất sau khi người dùng đăng nhập. Tôi muốn gọi những thứ này có nghĩa là tạm thời, tức là chúng có liên quan dựa trên thời gian.

Mặt khác, ARIA 1.1 nói:

[ aria-hiddenTrạng thái] cho biết liệu một phần tử có được hiển thị với API khả năng truy cập hay không.

Nói cách khác, các phần tử aria-hidden="true"được loại bỏ khỏi cây khả năng truy cập , phần lớn công nghệ hỗ trợ tôn vinh và các phần tử aria-hidden="false"chắc chắn sẽ được tiếp xúc với cây. Các phần tử không có aria-hiddenthuộc tính ở trạng thái "không xác định (mặc định)", có nghĩa là các tác nhân người dùng sẽ hiển thị nó cho cây dựa trên kết xuất của nó. Ví dụ, một tác nhân người dùng có thể quyết định loại bỏ nó nếu màu văn bản của nó phù hợp với màu nền của nó.

Bây giờ hãy so sánh ngữ nghĩa. Nó thích hợp để sử dụng hidden, nhưng không aria-hidden , đối với một yếu tố chưa có liên quan tạm thời, nhưng điều đó có thể trở nên phù hợp trong tương lai (trong trường hợp đó bạn sẽ sử dụng các tập lệnh động để loại bỏ hiddenthuộc tính). Ngược lại, nó phù hợp để sử dụng aria-hidden, nhưng không hidden, trên một yếu tố luôn có liên quan, nhưng với điều đó bạn không muốn làm lộn xộn API khả năng truy cập; những yếu tố như vậy có thể bao gồm sự tinh tế về hình ảnh trực quan, như các biểu tượng và / hoặc hình ảnh không cần thiết cho người dùng để tiêu thụ.

Hiệu quả khác biệt

Các ngữ nghĩa có tác dụng dự đoán trong trình duyệt / tác nhân người dùng. Lý do tôi phân biệt là hành vi tác nhân người dùng được khuyến nghị , nhưng không bắt buộc bởi các thông số kỹ thuật.

Các hiddenthuộc tính nên che giấu một phần tử từ tất cả các bài thuyết trình, bao gồm máy in và trình đọc màn hình (giả sử các thiết bị tôn vinh HTML thông số kỹ thuật). Nếu bạn muốn xóa một phần tử khỏi cây khả năng truy cập cũng như phương tiện trực quan, hiddensẽ thực hiện thủ thuật. Tuy nhiên, không sử dụng hidden chỉ vì bạn muốn hiệu ứng này. Hãy tự hỏi mình nếu hiddenđúng về mặt ngữ nghĩa trước tiên (xem ở trên). Nếu hiddenkhông đúng về mặt ngữ nghĩa, nhưng bạn vẫn muốn ẩn phần tử một cách trực quan, bạn có thể sử dụng các kỹ thuật khác như CSS.

Các thành phần aria-hidden="true"không được tiếp xúc với cây khả năng truy cập, vì vậy, ví dụ, trình đọc màn hình sẽ không công bố chúng. Kỹ thuật này nên được sử dụng cẩn thận, vì nó sẽ cung cấp trải nghiệm khác nhau cho những người dùng khác nhau: các tác nhân người dùng có thể truy cập sẽ không công bố / kết xuất chúng, nhưng chúng vẫn được hiển thị trên các tác nhân trực quan. Đây có thể là một điều tốt khi được thực hiện chính xác, nhưng nó có khả năng bị lạm dụng.

Sự khác biệt về cú pháp

Cuối cùng, có một sự khác biệt về cú pháp giữa hai thuộc tính.

hiddenlà một thuộc tính boolean , có nghĩa là nếu thuộc tính có mặt thì đó là true, bất kể giá trị nào nó có thể có và nếu thuộc tính vắng mặt thì đó là sai. Đối với trường hợp thực, cách thực hành tốt nhất là không sử dụng giá trị nào cả ( <div hidden>...</div>) hoặc giá trị chuỗi rỗng ( <div hidden="">...</div>). Tôi không khuyến nghị hidden="true"vì ai đó đọc / cập nhật mã của bạn có thể suy ra hidden="false"sẽ có tác dụng ngược lại, điều này đơn giản là không chính xác.

aria-hidden, ngược lại, là một thuộc tính liệt kê , cho phép một trong những danh sách hữu hạn của các giá trị. Nếu aria-hiddenthuộc tính có mặt, giá trị của nó phải là "true"hoặc "false". Nếu bạn muốn trạng thái "không xác định (mặc định)", hãy loại bỏ hoàn toàn thuộc tính.

Đọc thêm: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content

thiết lập aria-hidden thành false và bật nó trên Element.show () làm việc cho tôi.

ví dụ

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

và khi trốn trở lại

$(span).attr('aria-hidden', 'true');
$(span).hide();