디스플레이 : 없음 대 가시성 : 숨겨진 대 텍스트 안정 : 9999 스크린 리더가 각각 어떻게 행동합니까?
-
20-09-2019 - |
문제
스크린 리더 사용자 의이 세 가지의 차이점은 무엇입니까?
해결책
나타내다: http://css-discuss.incutio.com/?page=ScreenERDerVisibility
디스플레이 : 없음 : 보거나 듣지 않을 것입니다. *
가시성 : 숨겨진 : 보거나 듣지 않을 것입니다. *
텍스트 안정 : 9999 : 보지 못하지만들을 것입니다.
- 스크린 리더의 대부분은 '말하기'가 아닙니다. 디스플레이 : 없음 그리고 가시성 : 숨겨진 그러나 스크린 리더는 거의 없습니다 pwwebspeak 그리고 Htreader도 이것을 읽을 것입니다.
다른 팁
목록에서 이것에 대한 좋은 설명이 있습니다. 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
스크린 리더가 이러한 속성을 어떻게 해석하는지에 대한 매우 좋은 요약이 있습니다. webaim.
간단히 말해서, visibility: hidden
그리고 display:none
다른 사람들과 마찬가지로 스크린 리더의 텍스트를 숨 깁니다. 다른 모든 방법은 스크린 리더에게 '보이도록'됩니다.
거기 있습니다 많은 기술 콘텐츠를 시각적으로 숨기지 만 스크린 리더가 사용할 수 있도록합니다.
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;
}
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"/>