2013-06-21 1 views
0

사이트에 액세스 가능하게 만들고 키보드 포커스가 설정되어 있지 않으면 링크가 기본적으로 숨겨져 있습니다.이 경우 링크가 표시됩니다. 링크는 YouTube 동영상을지나 다른 콘텐츠로 건너 뜁니다. 필자가 데스크톱에서 잘 작동하지만 모바일 장치에서 Safari를 음성 액세스와 함께 사용하면 링크를 읽으면 포커스가 페이지 제목으로 돌아갑니다. 내가 지금 가지고있는 것은 :오프셋 텍스트를 읽은 후 음성 제목이 페이지로 돌아갑니다.

<div class="skip-link"> <a href="#skipvideo">Skip the Youtube Video</a></div> 

... 

<a class="hidden" id="skipvideo" name="skipvideo" tabindex="-1"></a> 

CSS의 :

.skip-link a,.skip-linkvideo{left:-10000px;position:absolute;color:#fff} 
.skip-link a:focus, .skip-link a:active{ 
    left:0px; 
    position:relative; 
    outline-style:solid; 
    height:22px; 
    padding:2px; 
} 

사람이 해설은이 작업을 수행하는 이유 아이디어가 있습니까?

+0

잘 모르겠지만'class = 'hidden''이 필요하지 않거나 필요하지 않아도됩니다. 어쩌면'aria-label = "{뭔가 유용한 것을 여기에 넣으십시오}"와 같은 것을 대상 링크에 추가하려고합니다. –

+0

다른 스크린 리더를 사용해 보셨습니까? 웹 페이지의 스크린 리더는 버그가있는 경향이 있으며, VoiceOver의 버그 일 수 있습니다. – comodoro

답변

1

정상적으로 초점을 맞춘 위치의 차이가 문제의 원인인지를 확인합니다.

절대 값에서 상대 값으로 변경하면 다른 요소가 충돌하여 VoiceOver가 해당 요소를 페이지 새로 고침으로 간주합니다.

관련 문제