🏪[IR]웹 접근성을 향상을 위한 적절한 대체텍스트 삽입 작업(feat. alt,aria-label)

❗사실, 슬편생 서비스 특성상(편의점 근무자를 위한 근무관리 서비스) 스크린리더기가 서비스 페이지를 어떻게 읽는지까지는 회사(특히 시간에 쫓겨 사는 스타트업!)에서 개발하는 상황이었다면 솔직히 크게 정성을 기울이지 않을 것 같다. 그러나 이것은 나의 공부를 위한 사이드 플젝이므로 이미지에 적절한 대체텍스트(alt attr)를 작성해주는 연습을 해보았다.

서비스 URL -> https://www.wise24life.site

🧐웹 접근성 왜 지켜야 하지?

세상에는 다양한 사람들이 존재한다. 누군가는 눈이 안보이거나, 귀가 안들리거나, 손발을 자유롭게 움직일 수 없는 등의 이유로 특별한 보조기구(스크린 리더기,점자 정보 단말기 등)를 동반하여 웹서비스를 사용하고자 한다. 다양한 범주의 사람들을 포괄하는 대형서비스, 예를 들어 검색 포털이나 금융서비스, 또는 전자정부서비스와 같은 서비스들은 삶을 영위하기 위한 필수 서비스 이므로 누구나 사용할 수 있게 만들어져야 한다.(법으로도 명시된 부분임) 이를 위한 방법들 중 하나가 웹 접근성 준수이다. 이 포스팅에서는 한국형 웹 접근성 지침인 KWCAC(Korean Web Content Accessibility Guidelines)에도 명시 되어있는 텍스트가 아닌 콘텐츠에 대하여 적절한 대체 텍스트를 기입 에 관한 부분을 다뤄볼 것이다.

추가적으로 웹 접근성 향상을 위해서는 신체적인 장애 여부와 관계없이 사용자의 네트워크 상태나 디바이스도 대응해줘야 한다.

📝적절한 대체 텍스트 제공 방법

이 포스팅에서는 이미지를 기준으로 하겠다.

❗팁) 스크린리더기를 설치해서, 적용한 대체텍스트와 더불어 웹 페이지가 어떻게 읽히는지 직접 들으면서 작업하도록 하자.

1. alt 속성

alt 속성을 통해 대체텍스트를 넣어준다.

<img src="/images/image.png" alt="이미지 설명">

(case1) 간단한 이미지 설명

위 강아지는 왜인지는 모르겠지만 몹시 화가 나있다. 이 사진을 설명하기 위해서 대체텍스트를 아래와 같이 적어줄수 있다.

<img src="/images/angry_dog.png" alt="몹시 화가 난 강아지">

(case2) 작성할 대체텍스트가 긴 이미지

<img src="/images/vote.png" alt="두근두근 첫 선거, 모두모두 첫 출발">

위 포스터처럼 포스터에 담긴 텍스트가 짧다면 위와 같이 적겠지만, 포스터 안에 "우리 모두 소중한 한표를 행사합시다!" 같은 문구가 추가 된다면 alt 속성안에 적을 텍스트가 많아진다. 이런 경우 아래와 같이 처리할 수 있다.

<div>
  <img src="/images/vote.png" alt="">
  <p class="blind">
     두근두근 첫 선거, 모두모두 첫 출발 우리 모두 소중한 한표를 행사합시다!
  </p>
</div>

여기서 p태그는 스크린리더기를 위한 것이므로, 페이지에 시각적으로 노출이 되어서는 안된다. 그렇다고 css 작성을 display:none 이나 visibility:hidden 로 처리하면 스크린리더가 읽어주지 않으므로 opacity를 0으로 처리하는 등의 방법으로 처리해야 한다.

(서비스에 적용하기)
DND에서 진행한 슬편생 프로젝트에 경우, 편의점에 등록한 유저 순서대로 userProfileCode를 부여해 이를 아래의 귀여운 이미지들과 매핑하여 유저 프로필 이미지로 사용하게 했다.

프로필 이미지 설명에 대해서 아래와 같이 적어주었다.

	<img
		alt={`${userName}의 프로필 이미지`}
	    src={`/images/user/${userProfileCode}.svg`}
	/>

+) 이미지에 의미가 없는 경우

이미지가 단순히 장식용으로 있는 경우, 대체텍스트를 작성하지 않는 편이 낫다. 스크린리더기가 필수정보들만 읽어도 받아들여야 할 정보가 너무 많기 때문이다. 그러나 alt 속성을 적용해 두지 않으면 스크린리더기가 파일명을 읽어버리기 때문에 아래와 같이 빈값으로 제공하도록 한다.

  <img src="디자이너가 예뻐서 넣은 이미지.jpg" alt="">

2. aria-label

aria-label을 통해서도 콘텐츠의 대체텍스트를 작성할 수 있다. 또 aria-label은 모든 html 태그에서 사용할 수 있다.

	// 공통 헤더 뒤로가기 버튼에 적용
    <div aria-label="뒤로가기">
		<BackIcon />
    </div>
  

 // 회원정보 수정페이지 link에 적용 (톱니바퀴)
 import Link from 'next/link';
 <Link title="회원정보 수정 바로가기" href={SERVICE_URL.profileSetting}>
		<SettingIcon />
 </Link>