웹 접근성을 준수하는 코드 작성하기는 현재 총 5편의 시리즈로 구성되어 있습니다.

1. 웹 접근성을 준수하는 코드 작성하기 #1 - 서론
2. 웹 접근성을 준수하는 코드 작성하기 #2 - Tab UI Script
3. 웹 접근성을 준수하는 코드 작성하기 #번외편 - 대체 텍스트 적용기 (현재글)
4. 웹 접근성을 준수하는 코드 작성하기 #3 - Accordion UI Script
5. 웹 접근성을 준수하는 코드 작성하기 #4 - Popup Script
6. 웹 접근성을 준수하는 코드 작성하기 #5 - Swiper.js 사용 시 웹 접근성 준수 하기

들어가며

이번 편은 잠깐 번외로 대체 텍스트(숨긴 텍스트)에 관한 얘기를 해보려고 한다.
많이들 대체 텍스트(숨긴 텍스트)를 써야 한다고는 알고 있지만, 아직도 제대로 쓰지 못하는 경우가 종종 보이는 것 같아 이 글을 시작하게 되었다.

대체 텍스트(숨긴 텍스트)는 어떨 때 사용할까?

• 화면상에는 나타나지 않지만 구조상 숨겨진 제목을 넣어줘야 하는 경우
• 디자인상 아이콘을 사용하면서 적절한 대체 텍스트(숨긴 텍스트)를 제공해줘야 하는 경우

대체 텍스트(숨긴 텍스트)를 처리하는 방식

1. display:none, visibility: hidden

.hidden {
  display: none;
}

.hidden {
  visibility: hidden;
}

이 방법은 접근성에 대해서 전혀 모르는 사람들이 사용하는 방법일 것 같다.
display: none은 정보를 보지 않겠다는 의미이기 때문에 스크린 리더기 역시 해당 내용을 읽어 주지 않는다. 다시 말해 쓴 의미가 전혀 없다는 것이다. visibility: hidden 역시 같은 의미로 스크린 리더기가 읽어 주지 않는다.

2. text-indent

.hidden {
  text-indent: -9999px;
}

text-indent를 -로 줘서 텍스트를 화면 밖으로 보내는 방법은 내가 처음 대체 텍스트(숨긴 텍스트)를 적용하는 방법으로 배운 방법이다. 그리고 아직도 많이들 사용되는 방식인 것 같다.
하지만 재작년쯤 웹 접근성 관련 교육을 듣게 되면서 알게 되었는데, text-indent를 이용한 방법은 화면 초점 역시 화면 밖으로 나가는 현상이 생겨서 초점에 문제가 생긴다는 것을 알게 되었다.
그래서 요즘은 이 방법을 사용하지 않고 있다.

3. H5BP에서 채택한 방법

.hidden {
  position: absolute;
  overflow: hidden;
  height: 1px;
  width: 1px;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  word-break: initial;
  word-wrap: initial;
}

위 방법은 내가 재작년 웹 접근성 관련 교육을 받으면서 배운 것으로 H5BP에서 채택한 방법이라고 한다. 해당 코드로 대체 텍스트(숨긴 텍스트) 사용 시 초점 오류 없이 해당 텍스트를 잘 읽어준다.
하지만 이번에 포스팅을 준비하면서 찾다 보니 해당 방법도 문제가 생기는 부분이 있다고 한다.

position: absolute로 처리 할 경우 해당 요소를 block formatting context로 변경되기 때문에 스크린 리더기로 읽을 경우 div 요소로 묶은 것처럼 끊어서 읽어준다는 것이다.
그래서 이 방법은 타이틀 같이 끊어서 읽어줘도 상관 없을 때는 괜찮지만, inline 요소로 문장 중간에 대체 텍스트(숨긴 텍스트)가 들어가야 할 경우에는 아래와 같이 수정해서 쓰는 것을 추천한다.

.hidden {
  position: relative;
  z-index: -1;
  display: inline-block;
  overflow: hidden;
  height: 1px;
  width: 1px;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  word-break: initial;
  word-wrap: initial;
}

마치며

그냥 대체 되는 텍스트를 적당히 숨겨서 넣어주기만 하면 될 것 같았던 대체 텍스트(숨긴 텍스트)를 제대로 처리하고, 스크린 리더기가 읽어주는 방식 또한 position에 따라 block 요소, inline 요소로 달리 읽어 준다는 것을 알게 되어서 유용했던 시간이었다.

참고문서

• mulder21c 블로그