[웹접근성] 의미를 가지고 있는 아이콘에 대체 텍스트 표현하기

마크업을 진행하다보면 아이콘을 CSS로 그리거나, 이미지로 표현하는 경우가 있다.

중요한 의미를 담고 있는 아이콘일 경우, 스크린리더 사용자들을 위해 아이콘의 대체 텍스트를 넣어주는 것은 중요하다.

그렇다면 대체 텍스트를 어떻게 넣어주는 것이 좋을까?

 

1.  <span>태그 안에 대체 텍스트를 넣어주기

[HTML]

<i class="icon_arrow">
  <span class="blind">더보기</span>
</i>

[CSS]

.icon_arrow {
  ...
}

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

 

첫 번째는 <span>태그를 만들어 그 안에 대체 텍스트를 표현한 후, 텍스트 숨김을 처리하는 스타일을 넣는 방식이다.

주로 blind 클래스와 같은 스타일을 넣어서 텍스트 숨김을 표현한다.

스타일로 텍스트를 감출 때 중요한 점은 display: none / visibility: hidden / font-size: 0 은 쓰면 안된다는 점이다.
이 스타일을 쓰게 되면 모두 스크린리더에서 읽히지 않는다.

 

2.  aria-label로 대체 텍스트를 넣어주기

/* 1. CSS로 아이콘을 표현한 경우 */
<i class="icon_arrow" role="img" aria-label="더보기">
</i>

/* 2. svg로 아이콘을 표현한 경우 */
<svg role="img" aria-label="더보기" ...>
...
</svg>

두 번째는 aria-label를 사용해서 대체 텍스트를 넣어주는 방식이다.

단, 이 방식을 사용할 경우 태그 자체가 의미를 담고 있지 않다면(ex. <button> 태그 등) 단순히 aria-label만 쓴다면 스크린 리더에서 읽히지 않는다. 따라서 태그가 의미를 가지기 위해 <i> 태그가 아이콘 이미지 역할을 나타내주는 role="img" 속성을 반드시 같이 넣어주어야 한다.

<button type="button" aria-label="더보기">
  /* 아이콘 이미지 */
  ...
</button>

위처럼 만약 <button> 태그 안에 아이콘 이미지가 들어가고, 이 아이콘의 대체 텍스트를 button태그 안에서 표현하려고 한다면,

aria-label 속성만 써줘도 된다.

 

작업시 상황에 맞춰서 두 방법을 쓰고 있지만, 나는 대부분 2번 aria-label 방식을 사용하여 대체 텍스트를 적용하고 있다.

<span>태그를 추가해야하는 1번보다 하나라도 더 DOM을 줄일 수 있는 2번이 더 좋은 방법이라고 생각이 들기 때문이다.