* 들어가기 전에: alt 속성은 <img> 태그에 작성된 이미지에 대한 설명으로, 스크린리더와 같은 보조기술에서 접근성 정보로 인식하게 됩니다.

 

alt가 없는 이미지는 시각장애인에게 필요없는 내용이므로 무시하게 하는 것이 접근성을 지키는 것일까요?

  1. 필요 유무는 누가 판단하나요?

  2. alt가 없다고 이미지 내용을 전혀 확인할 수 없는 것일까요?

 

웹 또는 앱에서 사용되는 이미지는 정보성의 유무에 따라 정보 이미지와 장식 이미지로 구분할 수 있습니다.

  1. 정보 이미지: 이미지 단독으로 구체적인 의미를 표현하고 있거나, 인접한 내용과 결합하여 고유의 의미를 갖게되는 이미지

  2. 장식 이미지: 컨텐츠의 수려한 표현을 위해 사용되는 것으로, 단독으로도 인접한 내용과의 관계에서도 정보적인 의미가 없는 이미지

 

먼저, 장식 이미지라고 판단할 수 있는 간단한 예제를 작성해 보겠습니다.

 

  <li> <img src="circle.png"> 아이템 1 </li>

  <li> <img src="circle.png"> 아이템 2 </li>

  .

  .

  .

  <li> <img src="circle.png"> 아이템 100 </li>

 

"아이텝 1", "아이템 2" ... "아이템 100" 은 접근성으로 인식해야하는 중요한 내용일 수 있지만, "circle.png" 의 경우는 아이템의 가독성을 위한 장식 이미지 입니다.

위의 예제를 스크린리더에서는 다음과 같이 읽어주게 됩니다.

 

  circle.png 아이템 1

  circle.png 아이템 2

  circle.png 아이템 3

  .

  .

  .

  circle.png 아이템 100

 

끔찍하지요?

최신의 브라우저들에서는 더욱 심합니다.

 

  설명을 가져오려면 컨텍스트 메뉴를 호출하세요. 아이템 1

  설명을 가져오려면 컨텍스트 메뉴를 호출하세요. 아이템 2

  설명을 가져오려면 컨텍스트 메뉴를 호출하세요. 아이템 3

  .

  .

  .

  설명을 가져오려면 컨텍스트 메뉴를 호출하세요. 아이템 100

 

이럴 경우 이 이미지들은 장식 이미지이므로 접근성에서 읽어줄 필요가 없다고 알려주는 alt="" 속성은 유용합니다.

 

  <li> <img alt="" src="circle.png"> 아이템 1 </li>

  <li> <img alt="" src="circle.png"> 아이템 100 </li>

 

그러면 위의 예제와 유사하지만 장식 이미지로 판단하면 안되는 상황을 보겠습니다.

 

  <li> <img src="circle.png"> 아이템 1 </li>

  <li> <img src="select.png"> 아이템 2 </li>

  <li> <img src="circle.png"> 아이템 3 </li>

  .

  .

  .

  <li> <img src="select.png"> 아이템 100 </li>

 

처음 예제와 마찬가지로 아이템 앞에 "circle.png" 를 사용하였지만, 아이템 2와 아이템 100에는 "select.png"를 사용하여 전체 항목들 중에서 아이템 2와 아이템 100이 선택 상태임을 알려주고 있는 정보 이미지 입니다.

이런 이미지들을 alt="" 로 처리하게 되면 해당 아이템들의 선택 유무를 확인할 수 있는 정보성을 잃게 됩니다.

따라서, "circle.png"는 alt="" 처럼 작성해도 무관하지만, "select.png" 에는 alt="선택" 또는 alt="선택됨" 처럼 설명하면 좋습니다.

 

  <li> <img alt="" src="circle.png"> 아이템 1 </li>

  <li> <img alt="선택" src="select.png"> 아이템 2 </li>

 

다음은 흔히 볼 수 있는 경우로 아래와 같은 이미지와 내용이 있습니다.

 

  <img src="product.png"> 맛있는 OOO, 오늘만 특가, 9,900원

 

이미지도 있고, 상품 이름과 가격 모두 있습니다.

상품 이름과 가격 정보가 있으니 "product.png" 는 읽어주지 않아도 좋을까요?

  1. 구글, 에지 등 최신 브라우저에서는 접긍성 정보로 보여지는 이미지에 AI가 자동으로 인식한 이미지 설명을 가져와 읽어주고 있습니다.

몇가지 예를 들면

 

  텍스트가 Xvision 으로 보입니다. 이미지

  전자계산기처럼 보입니다. 이미지

 

  2. 자동 이미지 설명 뿐만 아니더라도, alt가 없는 이미지들도 텍타일 디스플레이라는 가로세로로 수십개의 점들로 이루어진 보조기기를 이용하여 해당 이미지를 촉각적으로도 확인할 수 있습니다.

  3. 센스리더와 같은 스크린리더에서는 이미 스크린리더 사용자가 웹 탐색중에 이미지 정보만 찾아 이동하거나, 이미지정보들을 읽거나 읽지 않게 하는 단축키 기능을 제공하고 있으므로, 이미지 정보의 필요 유무는 실제 접근성 정보를 사용하는 당사자가 판단해야 합니다.

 

정리하면,

  1. alt="" 속성 사용은 정말로 장식 이미지라고 판단되는 상황에서만 제한적으로 사용하도록 해야 합니다.

  2. 스크린리더 기능, AI이미지설명 및 촉각 점자기기 등 이미지를 인식할 수 있도록 보조하는 기술들이 발전하고 있으므로, alt 가 없는 이미지가 불필요한 정보라고 판단해서는 안됩니다.

 

이상입니다.