Nhóm phát triển tại Medium đã thảo luận về một số hoạt động xấu làm phá vỡ khả năng tiếp cận. Trong một ví dụ, họ cho rằng điều đó opacity
không được hỗ trợ tốt bởi trình đọc màn hình và vì vậy nếu chúng ta muốn ẩn một phần tử trong quá trình chuyển đổi thì chúng ta cũng nên sử dụng visibility
thuộc tính:
.m-fadeOut ( visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; ) .m-fadeIn ( visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; )
Hãy nhớ độ mờ và khả năng hiển thị vẫn để lại một phần tử trong luồng tài liệu. Nếu bạn cần xóa nó khỏi dòng chảy, thì còn nhiều việc phải làm. Trên thực tế, đây là một cách để nghĩ về chúng…
có thể làm cho mọi thứ trở nên vô hình | có thể làm cho mọi thứ không thể nhấp vào được | xóa khỏi luồng tài liệu | có thể được chuyển đổi | có thể được đảo ngược trên trẻ em | |
---|---|---|---|---|---|
sự mờ đục | ya | Không | Không | Đúng | Không |
hiển thị | ya | ya | Không | Đúng | Đúng |
trưng bày | ya | ya | ya | Không | Không |
sự kiện con trỏ | Không | ya | Không | Không | Không |
Nếu bạn cần thay đổi giá trị hiển thị của một phần tử sau khi mờ dần, điều đó khó hơn. Không thực sự khả thi trong CSS vì display
không thể chuyển đổi. Snook đã viết về điều này, bao gồm một số JavaScript để trợ giúp.