웹접근성에 위배되지 않고 콘텐츠 숨겨보자(blind)
By Sera on
사람은 변한다. 어제, 1시간 전, 1초 전의 나와 지금의 나는 다르다. 스크린리더기와 코딩들 또한 마찬가지다. 왜이렇게 장황하게 설명하냐면 웹접근성에 맞게 블라인드 처리를 완/벽/하게 해낼 수 있는 방법은 아직 없기 때문이다.
1.스크린 리딩 시 화면에 없는 영역으로 판단해 스킵 당해버린다.
display:none, visibility:hidden, font-size:0, line-height:0, width:0; height:0, opacity:0;
2.화면에서 밀어버리면?
text-indent:-9999px
- link나 form의 경우 :focus 될 때 보이는 화면에 위치하지 않기 때문에 정확한 위치 판단이 되지 않고, 한글과 달리 오른쪽에서 왼쪽으로 적는 언어의 경우 문제가 된다(예: 아랍어)
- 보이는 화면상에 위치하지 않기 때문에, 없는 영역으로 판단하여 스킵하는 리더기도 있다.
position:absolute; top:-9999px
- 화면을 보면서 스크린리더를 이용하는 사용자가 적지 않다고 한다. 스크린리더가 순차적으로 웹을 읽다가 blind가 적용된 영역을 읽을 때 top: -9999px이 적용되면서 화면 스크롤이 갑자기 상단으로 이동하게된다(있었는데요 없었습니다).
화면에서 콘텐츠를 숨기고, 스크린 리더기가 원활하게 웹을 읽어주며, 화면의 스크롤이 움직이지 않게 해줄 수 있는 방법이 없을까?
아래의 코드를 사용하면 된다.
.blind {
clip-path: polygon(0 0, 0 0, 0 0); /*지정된 클리핑 범위(0)의 바깥 부분을 숨겨준다*/
width: 1px; /*최소 넓이*/
height: 1px; /*최소 높이*/
margin: -1px;
padding: 0;
border: 0;
overflow: hidden; /*콘텐츠를 안쪽 여백 상자에 맞춰 자른다*/
white-space: nowrap;
position: absolute; /*영역을 띄워서 거슬리지 않게 한다*/
}
아래의 내용을 숨겨보았다.
今正音之作
이제 훈민정음을 만드는 것은
初非智營而力索
처음부터 슬기로 마련하고, 애써서 찾은 것이 아니라
但因其聲音而極其理而已.
다만 그 (원래에 있는)성음(의 원리)을 바탕으로 이치를 다한 것 뿐이다.
理旣不二 則何得不與天地鬼神同其用也.
처음부터 이치는 둘이 아니니 어찌 천지 자연, (변화를 주관하는) 귀신과 그 사용을 같이 하지 않을 수 있겠는가?
正音二十八字 各象其形而制之.
훈민정음 스물 여덟자는 각각 그 모양을 본떠서 만들었다.
— 《훈민정음 해례》(訓民正音解例), 〈제자해〉(制字解)
Explore more like this
ARIA 속성을 알아보자
웹사이트는 기본적으로 키보드와 마우스를 사용하는 사용자를 위해 설계가 된다. 하지만 어떤 사용자는 사이트의 텍스트를 오디오나 점자로 변환하는 화면 판독기를 사용하기도 한다. 그뿐일까? 터치패드, 시선 추적 장치 등을 선호하는 사람들이 다양한...