음성은 내 웹 페이지에서 보이스 오버 기능을 지원하고있는 페이지

Question

에 추한 외모보다 높이를 복용하고 난 뭔가 이상한 나타났습니다. 요소 주위에 보이는 윤곽선은 텍스트의 길이 때문에 많은 높이를 사용합니다. 당신이 음성을 통해 윤곽이 더 높이를 복용 볼 것이다 당신을 요소 (클래스 = a11y)를 통해

https://codepen.io/anon/pen/oGxWoW

<span class="outer-box"> 
    <span class="a11y">Last page updated.</span> 
    2 mins ago 
</span> 

.outer-box { 
    margin: 10px; 
    padding: 5px; 
} 

.a11y { 
    position: absolute !important; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    clip: rect(1px, 1px, 1px, 1px); 
} 

당신이 맥 + 음성 오버를 사용하는 경우

.

높이를 조절할 수있는 방법이 있으면 알려 드리고 싶습니다.

미리 감사드립니다.

Answer 1

이것은 시각적으로 숨겨진 텍스트로 접근성을 개선하지 못하는 예입니다. "Last page updated"는 모든 사람들이 "2 분 전"이라는 텍스트의 의미를 이해하는 데 중요하지만, 숨기면 스크린 리더를 사용하여 미성년자에게 도움이됩니다.

음성 해설은 눈에 보이는 시각적 초점의 최소 크기를 정의합니다.

최상의 해결 방법은 텍스트를 표시하는 것입니다. 이것은 모두를 도울 것입니다.