display: none vs visibility: hidden vs text-indent: 9999 Trình đọc màn hình hoạt động như thế nào?

Question

Sự khác nhau giữa ba đối tượng này với người dùng trình đọc màn hình là gì?

Answer 1

tham khảo: http://css-discuss.incutio.com/?page=ScreenreaderVisibility

display: none: sẽ không được nhìn thấy và cũng không nghe. *
khả năng hiển thị: bị ẩn: sẽ không được nhìn thấy hoặc không nghe thấy. *
thụt lề văn bản: 9999: sẽ không hiển thị nhưng sẽ được nghe thấy.

• Hầu hết các trình đọc màn hình sẽ không 'nói chuyện' display: none và visibility: hidden, nhưng có một vài trình đọc màn hình như pwWebSpeak và HtReader mà sẽ đọc ngay cả những quá.

Answer 2

Có một bản tóm tắt rất tốt về cách trình đọc màn hình diễn giải các thuộc tính này tại WebAIM.

Tóm lại, visibility: hidden và display:none sẽ ẩn văn bản khỏi trình đọc màn hình giống như văn bản của người khác. Tất cả các phương pháp khác sẽ được hiển thị cho trình đọc màn hình.

Answer 3

Có giải thích tốt về điều này trong Danh sách ngoài. http://www.alistapart.com/articles/fir/ Nó phụ thuộc vào sản phẩm.

 
PRODUCT       DISPLAY: NONE  VISIBILITY: HIDDEN 
Hal version 5.20    Does not read  Reads 
IBM Home Page Reader 3.02  Does not read  Does not read 
Jaws (4.02, 4.50, 5.0 beta)  Reads    Reads 
OutSpoken 9      Does not read  Does not read 
Window-Eyes 4.2     Does not read  Does not read 

Answer 4

Có nội dung ẩn many techniques để ẩn nội dung trực quan nhưng có sẵn cho trình đọc màn hình.

Kỹ thuật H5BP hoạt động trong FF, Webkit, Opera và IE6 +

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

Answer 5

Hoàn Answere là ở đây để đảm bảo chrome doesnt hộp autoshow/tự động điền dữ liệu vào. Trên trang web của tôi (Người dùng mới), trường điện thoại và mật khẩu fioeld đã được tự động điền với dữ liệu được lưu trong bộ nhớ cache. Để loại bỏ điều này, tôi đã tạo hai trường giả và cho chúng một lớp khiến chúng vô hình đối với người dùng. Một hàm jquery để hiển thị và sau đó ẩn chúng sau một phần nhỏ.

Jquery chức năng để hiển thị & hide:

$().ready(function() { 
    $(".fake-autofill-fields").show(); 
    // some DOM manipulation/ajax here 
    window.setTimeout(function() { 
     $(".fake-autofill-fields").hide(); 
    }, 1000); 
}); 

Class:

.fake-autofill-fields 
{ 

    border: none; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

lĩnh vực đầu vào:

<input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/> 
<input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>