Làm cách nào để bạn ẩn văn bản trong javascript?

Trong JavaScript, chúng ta có thể ẩn các phần tử bằng kiểu. hiển thị hoặc bằng cách sử dụng phong cách. hiển thị. Thuộc tính khả năng hiển thị trong JavaScript cũng được sử dụng để ẩn một phần tử. Sự khác biệt giữa phong cách. hiển thị và phong cách. khả năng hiển thị là khi sử dụng khả năng hiển thị. ẩn, thẻ không hiển thị, nhưng không gian được phân bổ. Sử dụng màn hình. không, thẻ cũng không hiển thị, nhưng không có khoảng trống được phân bổ trên trang

Trong HTML, chúng ta có thể sử dụng thuộc tính hidden để ẩn phần tử được chỉ định. Khi thuộc tính ẩn trong HTML được đặt thành đúng, phần tử bị ẩn hoặc khi giá trị sai, phần tử sẽ hiển thị

cú pháp

Cú pháp chung để ẩn một phần tử bằng kiểu. ẩn và phong cách. khả năng hiển thị được đưa ra như sau

Sử dụng phong cách. ẩn giấu

Sử dụng phong cách. hiển thị

Bây giờ, hãy cùng xem một số ví dụ để hiểu việc ẩn phần tử trong javascript

Ví dụ 1

Trong ví dụ này, chúng ta sẽ xem cách xóa phần tử bằng cách sử dụng kiểu của JavaScript. tài sản hiển thị. Ở đây, có một phần tử div và một phần tử đoạn văn bị ẩn khi nhấp vào nút HTML đã cho. Chúng ta phải nhấp vào nút 'Nhấp vào tôi. ' để xem hiệu ứng

Kiểm tra nó ngay bây giờ

đầu ra

Sau khi thực hiện, đầu ra sẽ là -

Khi nhấp vào nút, đầu ra sẽ là -

Ví dụ2

Trong ví dụ này, chúng ta sẽ xem cách ẩn các phần tử bằng cách sử dụng kiểu của JavaScript. thuộc tính hiển thị. Ở đây, phần tử div và phần tử đoạn văn bị ẩn nhưng không gian của chúng vẫn được phân bổ

Chúng ta phải nhấp vào nút 'Nhấp vào tôi. ' để xem hiệu ứng

Kiểm tra nó ngay bây giờ

đầu ra

Sau khi thực thi đoạn mã trên, đầu ra là -

Khi nhấp vào nút, đầu ra sẽ là -

Ví dụ3

Trong ví dụ này, chúng tôi đang sử dụng cả hai phong cách. hiển thị và phong cách. các thuộc tính JavaScript khả năng hiển thị để thấy sự khác biệt giữa cả hai thuộc tính này. Ở đây, có một phần tử div và

phần tử tiêu đề mà chúng tôi đang áp dụng các thuộc tính. Chúng tôi đang ẩn phần tử div bằng cách áp dụng kiểu. thuộc tính hiển thị và ẩn thuộc tính

yếu tố bằng cách áp dụng phong cách. thuộc tính hiển thịChúng ta phải nhấp vào nút 'Nhấp vào tôi. ' để xem hiệu ứngKiểm tra nó ngay bây giờđầu raỞ đầu ra, chúng ta có thể thấy rằng phần tử div (trên đó chúng ta đã áp dụng kiểu. khả năng hiển thị) đang ẩn nhưng vẫn phân bổ không gian. Nhưng tiêu đề (trên đó chúng tôi đã áp dụng phong cách. display) đang ẩn và không phân bổ bất kỳ không gian nào Việc thêm văn bản, liên kết và các thành phần khác vào trang web mà bạn ẩn bằng CSS hoặc JavaScript là điều bình thường, nhưng điều này có thể dẫn đến các vấn đề về khả năng sử dụng cho trình đọc màn hình và các thiết bị khácMột người sử dụng trình đọc màn hình có thể gặp sự cố khi điều hướng trang web của bạn nếu nội dung bị bỏ qua. Người đó cũng có thể trở nên bực bội nếu nội dung bị lặp lại hoặc bối rối nếu nội dung không đúng chỗHai trình đọc màn hình phổ biến nhất là JAWS và NVDA. Trình đọc màn hình NVDA miễn phí, trong khi JAWS yêu cầu phải mua giấy phépHướng dẫn này thảo luận về các tình huống phổ biến mà bạn có thể muốn ẩn nội dung khỏi trình đọc màn hình hoặc chỉ hiển thị nội dung cho trình đọc màn hình. Hướng dẫn cũng sẽ chỉ ra các tình huống gây rắc rối và các tài nguyên bổ sung để tìm hiểu thêm về khả năng truy cậpCác tình huống phổ biến

Một trang web thường sẽ hiển thị logo nhiều lần để củng cố thương hiệu. Nhưng việc trình đọc màn hình thông báo tên công ty của bạn mỗi lần có thể trở nên khó chịu. Nó cũng sẽ làm chậm trình đọc màn hình của người dùng khi họ sử dụng nội dung của bạn. Biểu trưng và hình ảnh trang trí khác trên toàn bộ trang web có thể không tăng thêm giá trị cho người nghe nội dung trang web của bạn. Đây sẽ là những tình huống tuyệt vời để ẩn nội dung khỏi trình đọc màn hình

Trong trường hợp ngược lại, bạn có thể ẩn nội dung trực quan nhưng bạn muốn đảm bảo rằng trình đọc màn hình vẫn đọc được nội dung đó. Bạn có thể có hướng dẫn đặc biệt cho những người không có quyền truy cập trực quan. Để giải quyết vấn đề này, mọi trang web nên có liên kết neo "bỏ qua nội dung chính" cho phép người dùng bỏ qua việc nghe các phần ít quan trọng hơn trên trang của bạn

Một kịch bản bổ sung là ẩn nội dung với mọi người. Trang web của bạn có thể yêu cầu người dùng thực hiện một hành động trước khi bạn hiển thị nội dung. Nút mở rộng và thu gọn, nút đọc thêm hoặc bảng chuyển đổi nội dung phù hợp với cả tình huống này và tình huống trước đó, tùy thuộc vào lượng văn bản hiển thị hoặc mức độ quan trọng của văn bản đó

Các phương pháp ẩn khỏi Trình đọc màn hình

Để ẩn văn bản khỏi trình đọc màn hình và hiển thị văn bản đó một cách trực quan, hãy sử dụng thuộc tính ______1 và đặt thành true.

Visible text screen readers should ignore

Để ẩn văn bản khỏi trình đọc màn hình và ẩn văn bản đó một cách trực quan, hãy sử dụng thuộc tính ______3 .

Bạn cũng có thể sử dụng CSS để đặt display: none hoặc visibility: hidden to hide an element from screen readers and visually.

Để hiển thị một phần tử cho trình đọc màn hình và ẩn phần tử đó một cách trực quan, bạn cần sử dụng mẫu CSS để làm cho văn bản xuất hiện ngoài màn hình hoặc không vừa với vùng hiển thị một pixel. WebAim cung cấp hai giải pháp

Bẫy cần coi chừng

Nếu bạn sử dụng aria-describedby trong cùng phần tử với aria-hidden="true" the screen reader may read it.

Thuộc tính aria-hidden không hoạt động trên các thành phần có thể đặt tiêu điểm như đầu vào biểu mẫu, liên kết và nút.

Nếu bạn sử dụng aria-hidden trên một phần tử có các phần tử con, các phần tử con đó cũng sẽ bị ẩn.

1<div aria-hidden="true">
2    <p>This element will is hidden from screen readers.p>
3<div>

html

Sự kết luận

Dành thời gian và nỗ lực vào khả năng tiếp cận mang lại lợi ích cho mọi người. Khả năng truy cập giúp Tối ưu hóa Công cụ Tìm kiếm (SEO) và làm cho nội dung dễ truy cập hơn ngay cả đối với những người không sử dụng trình đọc màn hình

Để tìm hiểu thêm về khả năng truy cập, Pluralsight cung cấp khóa học "Bắt đầu" tuyệt vời và khóa học về Nguyên tắc truy cập web