채팅 상담 적용 사례

일반인보다 장애인에게 더욱 유용한 채팅서비스

최근 많은 기업들이 챗봇 서비스를 통해 고객 경험 향상시키고자 많은 노력을 하고 있지만, 실상 장애인들도 챗봇 서비스를 이용할 수 있을까? 일반인보다도 장애인에게 더 유용할 서비스인 채팅 서비스를 어떻게 접근성을 준수하고자 했는지 확인해보자.

채팅창을 aria로 제작하는 대표적인 방법은 role="log"를 사용하면 간단하다. 전체 채팅창 컨테이너에 role="log"를 삽입하면 컨테이너에 업데이트되는 노드는 알아서 스크린리더가 읽게 된다.

<div role="log" aria-label="Chat" aria-live="polite">
    <p>안녕?</p>
    <p>만나서 반가워</p>
</div>

안녕? 만나서 반가워

간단하게는 위와 같은 예제로 제작하면 되고, 또 다른 방법으로는 아래와 같은 방법이 있다.

예제 화면

<div class="message" aria-live="assertive" aria-atomic="false" 
 aria-relevant="additions text">
 <p>
  <span>상담원</span>
  안녕하십니까 고객님, 무엇을 도와드릴까요? 
  <span>오후 7:42:00</span>
 </p>
 <p>
  <span>사용자</span>
  부모님 마일리지를 합산하고 싶은데 부모님 계정을 모릅니다.
  <span>오후 7:42:24</span>
 </p> 
 ....
</div>

채팅창 컨테이너 aria-live="assertive" 속성으로 실시간으로 삽입되는 노드를 읽도록 구성하고, aria-atomic="false"로 변경된 노드만 읽도록 하고, aria-relevant="additions text" 속성을 사용하여 추가된 노드를 읽도록 설정하였다.

하단 메시지 입력 박스에 포커스가 이동하고 스크린리더로 듣게 되면 아래와 같이 읽게 된다.

메세지 입력 edit 최대 200자까지만 입력 가능합니다. 상담원 안녕하십니까 고객님, 무엇을 도와드릴까요? 오후 7:42:00

메세지 입력 edit 최대 200자까지만 입력 가능합니다. 부모님 마일리지를 합산하고 싶은데 계정을 모릅니다.

사용자 부모님 마일리지를 합산하고 싶은데 부모님 계정을 모릅니다. 오후 7:42:24 상담원이 메세지를 입력 중입니다.

상담원 죄송합니다 스카이패스회원번호는 본인에게만 안내가능합니다 회원 본인이 직접 1588-2001번으로 전화주시거나혹은 홈페이지 통한 찾기 해주셔야 합니다. 오후 7:42:53

메세지 입력 edit 최대 200자까지만 입력 가능합니다.

위 채팅 문구 중 "상담원이 메세지를 입력 중입니다"는 다른 aria-live 속성을 사용하여 실시간으로 스크린리더에서 읽도록 설정하였다.

복잡할 것 같지만 의외로 많은 작업을 하지 않고 채팅창 live region 속성 몇 가지만 사용하여도 완벽하지는 않겠지만 장애인이 이해할 수 있을 정도의 채팅 서비스를 구현할 수 있다.

Live Region

Live Region은 다양한 속성이 있으며 콘텐츠의 중요도에 따라 적절한 속성을 사용해야 한다. 이 속성은 잘못 사용하게 되면 스크린리더 사용자에게 매우 심각한 영향을 끼치게 되므로 주의해야 한다.

Attribute	Value	Description
aria-live	assertive / polite / off	업데이트 되는 콘텐츠의 중요도에 따라 설정할 수 있는 속성
aria-atomic	true / false	일부만 변경된 경우에도 전체를 읽어야 하는지를 설정하기 위한 속성
aria-relevant	additions / removals / text / all	변경되는 타입의 추가된 노드/삭제된 노드/변경된 텍스트 등으로 설정하는 속성

위 속성 외에도 live region은 여러 가지 role 속성이 있다. 경고를 주거나 에러 발생 시 사용하는 alert, 채팅창이나 게임 등에서 사용 가능한 log, 업데이트된 상태 정보를 읽을 때는 staus, 주식 시세와 같이 스크롤되는 텍스트에 사용하는 marquee, 스탑와치나 카운트다운을 위한 시간을 읽을 때 사용하는 timer가 있다.

role="log"와 role="status"는 aria-live="polite"와 가장 호환이 잘되며, role="alert"은 aria-live="assertive"와 잘 호환이 된다. 단, role="alert"을 페이지 로드 시 사용하는 경우 일부 스크린리더에서 페이지 로딩 시 alert을 읽는 이슈가 있어 필요한 경우에 노드와 함께 삽입하는 것이 좋다.