> For the complete documentation index, see [llms.txt](https://aoa.gitbook.io/skymimo/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aoa.gitbook.io/skymimo/aoa-2019/2019-aria/chatting.md).

# 채팅 상담 적용 사례

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

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

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

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

> 안녕?\
> 만나서 반가워

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

### 예제 화면&#x20;

![](https://3414272834-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LL2w96d4fwoeh4NDyDr%2F-LlWPz9qzKVTCFRxpUkd%2F-LlWQ1lpjY45k3ru3q6W%2Fimage.png?alt=media\&token=d0248dde-b776-469f-b322-392b4c55d785)

```markup
<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"` 속성을 사용하여 추가된 노드를 읽도록 설정하였다.

![](https://3414272834-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LL2w96d4fwoeh4NDyDr%2F-LmshhFlWZtBfMKmFO-T%2F-Lmshw8OrhrtgqQf4Gro%2F%EB%8C%80%EC%A7%80%201.png?alt=media\&token=071921ec-131f-41c3-a34d-ac4574298b6b)

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

> 메세지 입력  edit  최대 200자까지만 입력 가능합니다.\
> \
> ***상담원 안녕하십니까 고객님, 무엇을 도와드릴까요? 오후 7:42:00*** &#x20;
>
> 메세지 입력  edit  최대 200자까지만 입력 가능합니다.\
> 부모님 마일리지를 합산하고 싶은데 계정을 모릅니다.
>
> ***사용자 부모님 마일리지를 합산하고 싶은데 부모님 계정을 모릅니다. 오후 7:42:24***\
> 상담원이 메세지를 입력 중입니&#xB2E4;**.**
>
> ***상담원 죄송합니다 스카이패스회원번호는 본인에게만 안내가능합니다 회원 본인이 직접 1588-2001번으로 전화주시거나혹은 홈페이지 통한 찾기 해주셔야 합니다.  오후 7:42:53*** &#x20;
>
> 메세지 입력  edit  최대 200자까지만 입력 가능합니다.

위 채팅 문구 중 **"상담원이 메세지를 입력 중입니다"**&#xB294; 다른 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 | 변경되는 타입의 추가된 노드/삭제된 노드/변경된 텍스트 등으로 설정하는 속성 |

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

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