요소 숨김처리 (IR : Image Replacement)

출처 : https://www.boostcourse.org/web344/lecture/47663?isDesc=false 

웹 UI 개발

위 링크의 "Minsik"님 댓글 내용 

 

----

 

이번 내용과 관련하여 궁금한 점이 여러가지 있는데 물어볼 곳이 없어 stackoverflow에 물어봤습니다. 본 강의에서 설명해주신 내용을 보완하거나 충돌하는 것이 있어 링크를 공유하며, 내용을 한글로 바꿔 정리했습니다.

 

https://stackoverflow.com/questions/61896327/why-is-negative-margin-set-to-visually-hidden-text-for-screen-readers/61908104#61908104

 

1.  강의에서 설명해주셔서 width, height 가 0이 되면 안된다는 건 이해했지만, 저는 왜 사이즈를 1로 줄이는지 궁금했습니다. 어자피 `clip`해서 렌더링할 게 없고, absolute이면 block으로 설정되고 내부 콘텐츠가 반드시 있으므로 0이 아닌 width/height 값이 있을 거라고 생각했습니다.

각종 버그로 인해 clip 속성이 작동하지 않을 수 있다고 합니다. 그래서 안전하게 숨기기 위해서 다양한 방법을 중첩하여 visually-hidden class를 구성하는데요, 우선 width/height를 가장 작은 사이즈인 1px로 줄여 최대한 눈에 안보이게 하고, 음수 마진 등을 적용하여 텍스트를 off-screen 하려는 것입니다. 참고로 clip 속성 표기의 최신 버전은 `,`(쉼표)를 사용한 방식이라서 쉼표 사용하는 것, 사용하지 않는 것 둘 다 적는 것 같습니다.

 

2. (2020-6-1 수정)

일부 bug report를 보면, 음수 마진을 사용할 경우 `voiceover screen reader`를 사용하는 사용자에게 꼬인 순서로 내용을 읽어준다고 합니다. 음수 마진을 사용하지 않는 대안(링크 내 2번째 답변)을 사용해야 할 것 같습니다.

 

 

 

.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

 

3.  (2020-6-1 수정)

답변자 중 한 분이 blind 라는 표현이 외국에서 스크린 리더 사용자들에게 공격적인 표현일 수 있다고 visually-hidden, vh 등의 대체 클래스명을 제안했습니다. 제 생각에도 스크린 리더를 사용한다고 해서 모두가 맹인은 아니므로, 스크린 리더를 위해 시각적으로 숨겼다는 의미만 담는 게 좋아보입니다. (20.6.15 추가: 그렇다고 hidden만 쓰면 용어가 너무 광범위해서 스크린리더 목적을 위한 구체적 용어 지정이 필요하다고 리뷰를 받았습니다!)

 

----