디스플레이 : 없음 대 가시성 : 숨겨진 대 텍스트 안정 : 9999 스크린 리더가 각각 어떻게 행동합니까?

Question

스크린 리더 사용자 의이 세 가지의 차이점은 무엇입니까?

Answer 1

나타내다: http://css-discuss.incutio.com/?page=ScreenERDerVisibility

디스플레이 : 없음 : 보거나 듣지 않을 것입니다. *
가시성 : 숨겨진 : 보거나 듣지 않을 것입니다. *
텍스트 안정 : 9999 : 보지 못하지만들을 것입니다.

• 스크린 리더의 대부분은 '말하기'가 아닙니다. 디스플레이 : 없음 그리고 가시성 : 숨겨진 그러나 스크린 리더는 거의 없습니다 pwwebspeak 그리고 Htreader도 이것을 읽을 것입니다.

Answer 2

목록에서 이것에 대한 좋은 설명이 있습니다. http://www.alistapart.com/articles/fir/제품에 따라 다릅니다.

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 3

스크린 리더가 이러한 속성을 어떻게 해석하는지에 대한 매우 좋은 요약이 있습니다. webaim.

간단히 말해서, visibility: hidden 그리고 display:none 다른 사람들과 마찬가지로 스크린 리더의 텍스트를 숨 깁니다. 다른 모든 방법은 스크린 리더에게 '보이도록'됩니다.

Answer 4

거기 있습니다 많은 기술 콘텐츠를 시각적으로 숨기지 만 스크린 리더가 사용할 수 있도록합니다.

H5BP 기술은 FF, WebKit, Opera 및 IE6+에서 작동합니다.

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

Answer 5

Chrome이 AutoShow/Autofill 입력 상자가 아닌지 확인하기 위해 Complete Answere가 여기에 있습니다. 내 웹 페이지 (신규 사용자)에서 전화 필드 및 암호 Fioeld가 캐시 된 데이터로 자동 채워졌습니다. 이것을 제거하기 위해, 나는 두 개의 더미 필드를 만들어서 그들에게 사용자에게 보이지 않는 수업을 주었다. jQuery 함수는 분수 후 이들을 보여주고 숨 깁니다.

jQuery 기능을 보여주고 숨기는 기능 :

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

수업:

.fake-autofill-fields
{ 

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

입력 필드 :

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