Khả năng truy cập / Ẩn CSS thân thiện với SEO - Thủ thuật CSS

Anonim
.screen-reader-text ( position: absolute; top: -9999px; left: -9999px; )

Lớp này có thể xóa một mục khỏi trang, đưa mục đó ra khỏi dòng và không gây ra hiện tượng cuộn tràn.

Nó tốt hơn display: none;hoặc thậm chí visibility: hidden;khi mục tiêu là ẩn phần tử một cách trực quan nhưng vẫn để cho trình đọc màn hình có thể truy cập được.

Snook có một hướng dẫn về một lớp mạnh mẽ hơn có tính đến nhiều tình huống hơn.

.element-invisible ( position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); )

WordPress sử dụng một lớp thậm chí còn mạnh mẽ hơn có tính đến việc hiển thị phần tử nếu nó có trọng tâm.

.screen-reader-text ( border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; ) .screen-reader-text:focus ( background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ )