[SW개발] 코멘토 직무부트캠프: 웹 접근성- 제2주차

 

제2주차 소회

제2주차에서는 업무(과제)를 진행한다. 제2주차에서 내가 받은 것은 IR 기법 사례를 조사해오는 것이었다. 좋은 예제 혹은 나쁜 예제를 세 가지 진행하는 것이었다. 내가 고른 것은 좋은 예제의 3가지가 되었다.

 

IR이란

IR은 Image Replacement의 준말로, 디자인적으로는 보이지 않지만 스크린리더 등 보조 기술을 위해 정보를 전달하는 텍스트를 넣는 기법을 의미한다. 이런 기법을 사용하는 이유는 스크린리더를 사용하지 않는 사람과 스크린리더를 사용하는 사람의 정보 격차를 줄이면서도, 동시에 미감을 올리기 위한 방식이다. 예를 들어서 다음과 같은 화면을 보자.

 

무신사 상품의 화면. 화면에는 스크린리더가 읽지 못하는 아이콘이나 이미지가 잔뜩 있다.

 

무신사를 예로 들어서 이미지나 아이콘의 경우 스크린 리더가 읽지 못한다. 이미지야 alt 처리를 통하여 읽을 수 있다지만, svg를 그대로 사용하거나, 기타 텍스트 아이콘을 사용할 경우에는 alt가 지원되지 않는다. 이 때문에 이를 읽어줄 수 있는 텍스트 지원이 필요하다. 예를 들어 이 상태에서 별점의 별에 대해 스크린리더가 그냥 읽을 경우 4.0 이렇게만 표시될 것이다. 하지만 그렇다고 별점 4.0점을 그대로 쓴다면 굳이 이렇게 시각적인 디자인을 할 필요가 없어진다. 스크린리더를 사용하지 않는 사람들 입장에서는 별점 4.0점이라는 정보는 별 아이콘과 4.0만으로도 충분히 전달되기 때문이다. 그걸 수정하면 오히려 미감이 떨어지고, 지저분해진다.

 

이런 부분을 메우기 위해서 나타난 게 IR 기법이다. 간단하게 디자인적으로는 보이지 않는 클래스를 만들어 스크린리더만이 읽을 수 있게 한다. 스크린리더에게 저 별점 부분을 읽게 하려면 다음과 같은 코드를 사용하게 된다.

 

<span class="sr-only">별점</span> 4.0 <span class="sr-only"></span>

 

여기서 중요한 건, 이 class에는 다음과 같은 코드는 들어가서는 안 된다. display:none;과  visibility:hidden; 이다. 둘다 스크린리더가 읽을 수 없도록 되어 있으므로, IR 기법에서는 해당 코드 사용은 하지 않는 것이 좋다. 그러므로 권장되는 형태는 다음과 같다.

 

.sr-only {
  position: absolute;       /* 레이아웃 흐름에서 제외 */
  width: 1px;               /* 스크린 리더 인식을 위한 최소 크기 */
  height: 1px;              /* 스크린 리더 인식을 위한 최소 크기 */
  margin: -1px;             /* 부모 요소 영역 밖으로 밀어내기 */
  overflow: hidden;         /* 넘치는 부분 숨김 */
  clip-path: inset(50%);    /* 최신 브라우저용 요소 잘라내기 */
  clip: rect(0, 0, 0, 0);   /* 구형 브라우저 호환용 잘라내기 */
}

 

클래스 명의 경우 서비스마다 다르지만 visually-hidden과  sr-only 가 자주 사용된다.

 

 

잘된 IR의 예제

먼저 나는 Naver의 IR을 찾았는데, Naver의 IR 클래스 이름은 blind로서 다음과 같이 처리되어 있다.

 

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

 

위에서 보인 sr-only  클래스와 유사하다. 그 외에도 NAVER는 스크린리더 전용 바로가기를 두어 사용자의 편의성까지 더하고 있다.

 

다음으로는 gitHub였는데 IR 클래스 이름은 sr-only이며, 해당 클래스 안에 텍스트를 넣어 무슨 섹션인지 등에 대해서 자세히 설명해주고 있다.

 

gitHub의 IR 기법의 예제. 각 섹션에 대해서 IR 기법을 통해서 설명하고 있다.

 

마지막으로는 MDN인데, MDN은 웹 개발을 위한 문서 저장소 답게 다른 사이트와 차별화된 IR을 가지고 있는데, 바로 개발과 관련된 업데이트 내용을 메뉴의 IR에서 알려주고 있다는 점이 독특하다.

 

MDN의 IR 기법의 예제. IR을 통하여 지원이 중단되었음을 알려 스크린리더 사용자가 중단된 개발 내용에 대한 문서를 들어갈 수고를 줄여준다.

 

이렇게 세 가지 예제를 찾아 제출하게 되었다. 2주차의 업무에 대한 피드백은 3주차 세션에서 이어지기 때문에 피드백을 받지는 못했다. 나는 제출하면서 다음과 같은 질문을 드렸었다. 이에 대한 답변은 다음에 이어진다.

 

조사를 하면서 궁금한 지점이 생겨서 질문드립니다.
sr-only 등 IR 기법을 사용한 태그의 부모에 display:none이 있는 경우가 존재합니다.
일반적으로 스크린리더에서는 display:none을 읽지 못하는 것으로 알고 있습니다.
관련된 상호 작용을 하면 부모의 display가 드러남에 따라 IR 클래스들도 드러나지만, 이 경우 스크린리더에서 어떻게 인지할 수 있는지가 궁금합니다. 모달 등에서의 사용일 경우 모달을 여는 버튼과 모달 자체가 떨어져 있다면, 바로 다음으로 tab이 넘어가 스크린리더가 사용할 수 있게 되는지 등에 대해서 여쭤보고 싶습니다.

첨부했던 잘된 사례들에서도 비슷한 기법들이 보여 이런 기법들이 어떻게 웹 접근성을 보장할 수 있는지 그 동작과정이 궁금합니다.

그리고 이전에는 IR을 사용했지만, aria-label을 사용하는 기관들도 꽤 많아지고 있는 것 같은데요. 개발자 입장에서가 아니라 이용자 입장에서도 aria-label이 IR보다 선호될 수 있는지가 궁금합니다.

 

이걸로 2주차도 종료되었다.