IR기법 어떤걸 사용해야하나

❗ 해당 문서는 지속적으로 업데이트 될 예정입니다.
❗ 잘못된 정보나 오류가 있으면 댓글로 편하게 남겨주세요!🥰

👉 웹접근성과 IR기법

The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.

- Tim Berners - Lee , W3C Director and inventor of the World Wide Web

월드 와이드 웹의 창시자 팀 버너스 리의 말처럼, 웹의 힘은 모두가 어떠한 제약도 없이 평등하게 사용할 수 있을 때 발휘된다. 모든 사용자 신체적,환경적 조건에 관계없이 웹에 접근할 수 있도록 디자인하고 개발하는 것을 웹 접근성이라고 한다.

IR(image replacement)기법은 웹접근성을 준수하기 위한 방법 중 하나로서, 이미지를 볼 수 없는 사용자에게 대체 텍스트를 제공하는 방법이다. 보통 이를 위해 img태그의 alt 속성에 이미지에 대한 대체 텍스트를 입력한다.

그러나, 성능을 위해서 이미지 스프라이트 기법을 사용할 때가 많아, img태그를 사용하지 않을 때도 있다. 또한 img태그 alt 속성에 작성하기에는 내용이 너무 길 경우 텍스트 태그를 따로 분리해야할 때가 있다. 이런 경우 주의해야할 점은, 화면에서 해당 대체 텍스트를 숨기면서도, 스크린리더에 인식되어야한다는 점이다. 이 조건이 지켜지지 않으면 의미 없는 요소가 되어버린다.

보통 어떤 요소를 시각적으로 숨김처리하기 위해서 쓰는 방법으로는
visibility:hidden,display:none,overflow:hidden
대표적으로 이 세가지 방법을 사용한다.

이 세가지의 방법 중 overflow:hidden이 가장 적절하다고 할 수 있다.

▶ 네이버 : .blind
참고로 blind라는 클래스 명은 공격적일 수 있기 때문에 지양하는 것이 좋다.

   position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;

▶ 다음 : .screen_out

 overflow: hidden; 
 position: absolute; 
 width: 0; 
 height: 0; 
 line-height: 0; 
 text-indent: -9999px;

개발자 도구에서 해당 클래스 명을 검색해보면 어느 요소에서 사용되었는지 확인할 수 있다.

네이버와 다음에선 웹접근성을 위해 꼭 스크린리더가 읽어야하는 필요한 정보(로고, 메뉴, 검색창, 인기검색어 등)에는 클래스명을 지정해 overflow:hidden 속성을 통해 이미지 대체 텍스트를 제공하고 있다. 해당 속성은 스크린 리더도 읽을 수 있고 성능에도 문제를 일으키지 않아 많이 채택하는 방법이다. 하지만 해당 방법이 조건에 따라 부작용이 있을 수 있다고 하니 참고 글을 읽어보면 좋을 것 같다.

display:none은 브라우저가 해당 요소를 아예 인식하지 않고 보조 기기도 정보를 전달하지 않기 때문에, IR기법으로 사용되는데는 적절치 않다.

visibility:hidden은 가시성만 hidden이고 해당 영역은 자리를 차지하고 있다. 이 또한 스크린리더가 해당 정보를 사용자에게 전달하지 않는다.

깨달은 점

👉 overflow:hidden만 사용하는 방법이 진리라고 생각했는데, 이 방법도 최선은 아니라는 것이라는 걸 깨달았다. 또한 웹접근성과 IR기법에 대해 직접 찾아보며, 많은 개발자들이 더 나은 웹 환경 제공과 검색엔진을 위해 갖가지 방법들을 연구한다는 것을 깨달았다. 나도 웹의 보편성과 성능을 위한 부분들을 고려하며 문제들을 접근해나가는 개발자로 성장하고 싶다.

👉 웹을 배우면 배울 수록, 프론트는 시각적인 것을 고려하는 것에 그치는 것이 아니라는 것을 깨닫는다. 물론 지금 당장은 디테일적인 것을 고려하는 것이 중요하지만, 더 성장하게 된다면 건설적이고 구조적인 시각을 갖는 프론트엔드 개발자가 되는 것이 참 중요할 것 같다.

다음에 해보고 싶은 시도

👉 웹 접근성을 고려해 사이트를 구축하기
👉 더 나아가 실제 스크린 리더 사용자에게 사용자 경험을 조사해보는 경험을 해보고싶다

[추천 및 참고 글]

접근 가능한 숨김 텍스트

접근성과 사용성 엮어내기