웹 접근성을 고려하며 HTML 요소 숨기기

접근성

'네이버 접근성'에서 인용한 정보 접근성의 정의는 다음과 같다.

 

정보 접근성은 모든 사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는
모든 정보에 동등하게 접근하고 이용할 수 있도록 보장해 주는 것입니다. - 네이버 접근성

 

HTML5에서 정의된 표준 HTML element를 적절히 활용하고, element attribute에 알맞은 aria 관련 속성을 삽입하면 웹 접근성을 상당부분 확보할 수 있지만, 그럼에도 불구하고 사용자에게 추가적인 정보제공이 필요한 경우가 있다. 또는 디자인을 변경하지 않으면서 접근성을 확보해야 하는 경우도 있을 것이다.

 

실제 예시

아래 코드는 '네이버 뉴스'의 메인 콘텐츠 영역의 코드이다.

 

네이버 뉴스 메인 콘텐츠 영역 (출처: 네이버 뉴스)

h3 element의 텍스트가 '콘텐츠'라고 기재되어 있고, class명은 blind가 적용되어 있다.

 

 

하지만 위 코드와 다르게 브라우저에 표시되는 메인 콘텐츠 영역에서 '콘텐츠'라는 텍스트는 찾아볼 수 없다. 어떻게 된 일일까?

네이버 뉴스 메인 콘텐츠 영역 (출처: 네이버 뉴스)

h3 element에 display: none이 적용된 것일까?

개발자 도구에서 해당 element를 조회한 결과 display none이 아니고, 1*1px 만큼의 위치를 차지하고 있는 것으로 보인다.

개발자 도구에서 조회한 h3 element

 

그렇다면 왜 이러한 h3 element를 삽입했을까? 그리고 왜 display 속성은 none이 아닐까?

 

바로 '콘텐츠'라는 콘텐츠와, 클래스명 'blind'를 가진 h3 element가 웹 접근성을 고려한 추가적인 텍스트 정보이기 때문이다.

 

웹에 게시된 정보를 시각적으로 수용할 수 없거나, 수용하기 어려운 경우 사용자는 스크린리더를 활용해 웹에 접근한다. 따라서 일반 사용자가 직관적으로 이해할 수 있는 시각적 정보라고 해도, 추가적인 정보가 부족하다면 스크린리더를 사용하는 사용자가 이해하기 어려울 수 있고, 그들의 서비스 이용에 큰 제약이 생길 수 있다.

 

따라서 위 h3 element와 같이 해당 구획에 제목을 제공해 스크린리더 사용자도 이를 이해할 수 있게 해야 하는 것이다. 

 

이러한 추가 텍스트 정보는 구획의 제목 뿐만 아니라 수량, 정보 유형에 대한 설명 등 시각적 정보 외에 추가적인 정보가 필요한 경우 모두 활용될 수 있다.

 

 

CSS로 요소 숨기기

CSS를 활용해 HTML요소를 숨기는 방법은 여러가지가 있다. 

1. display: none

2. text-indent

등 여러가지 방법으로 요소를 숨길 수 있는데,

 

위 방법의 문제는 접근성을 확보할 수 없다는 것이다. display: none의 경우 스크린리더도 이를 무시하고, text-indent값 조정의 경우 스크린리더의 초점이 의도하지 않은 곳을 향할 수 있다.

 

따라서 접근성을 확보하며 텍스트를 숨기기 위해서는 다음과 같은 방법을 활용한다.

 

(네이버 방식)

.blind {
  position: absolute;
  overflow: hidden;
  clip: rect(0,0,0,0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

1. position: absolute ->  레이아웃에 영향을 주지 않도록 한다.
2. overflow: hidden -> 요소의 크기를 벗어나는 콘텐츠를 숨긴다.
3. clip: rect(0,0,0,0) -> 요소가 화면에 보이는 영역을 0으로 지정한다.
4. width, height: 1px -> 넓이와 높이 값을 최소(1px)로 하여, 스크린리더가 인식할 수 있도록 한다.
5. margin: -1px-> 요소의 크기 만큼 역마진을 주어, 요소가 차지하는 공간을 제거한다.

 

그러나 mdn 문서에서 clip 속성을 찾아보면 다음과 같은 문구가 기재되어 있다.

 

Note: Where possible, authors are encouraged to use the newer clip-path property instead.

가능하다면 clip 속성 대신, 더 새로운 속성인 clip-path를 사용하는 것이 좋다는 뜻이다.

 

따라서 하위 호환을 위해 clip 속성을 유지하되, clip-path를 추가하면 다음과 같다.

 

.sr-only {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

 

사전에 이와 같이 CSS 속성값을 정의하고, 접근성을 고려해 화면에서 숨기고 싶은 요소에 클래스를 삽입하면 웹 페이지의 레이아웃을 유지하면서도 스크린리더 사용자가 웹에 게시된 정보를 적절히 수용할 수 있을 것이다.

 

참고자료

https://accessibility.naver.com/

네이버 접근성 페이지

https://nuli.navercorp.com/

NULI

https://news.naver.com/

네이버 뉴스