WCAG 2.1 항공사 WAI-ARIA 적용 사례
  • 모두를 위한 디자인
  • 항공사의 웹 접근성 준수 의무
  • 국내 접근성과 국제 접근성은 어떻게 다를까?
  • 항공사 접근성 위배로 인한 벌금 부과 사례
  • AOA 2023~
    • 주요 UI별 ARIA 적용 사례 (2022~2024)
      • 호버 콘텐츠 적용사례
      • 입력 글자 수 제한 사례
      • 🕹️Form 그룹의 오류 적용 사례
      • 비밀번호 실시간 오류 적용 사례
      • 🖼️SVG 이미지의 접근성 향상 방법
      • 오류메시지 종류별 적용 사례
      • 스낵바(Snack bar) 적용 사례
  • AOA 2019
    • 주요 UI별 ARIA 적용 사례 (2019)
      • 스핀 버튼 적용 사례
      • 페이지 네비게이터 적용 사례
      • 메인 네비게이션 구현 사례
      • 메뉴 적용 사례
      • 캐러셀 적용 사례
      • 채팅 상담 적용 사례
      • 툴팁 적용 사례
      • 그룹명 필수 항목 적용 사례
      • 이해하기 쉬운 데이터 테이블 적용 사례
      • 날짜 입력 적용 사례
    • 알아두면 좋은 TIP!
      • dl, dt, dd 태그를 남용하지 마세요.
      • 제발 나를 무시해 주세요.
      • 띄어쓰기를 주의하세요!
  • AOA 2018
    • 주요 UI별 ARIA 적용 사례 (2018)
      • 로딩 적용 사례
      • Date Picker 적용사례
      • 좌석선택 적용사례
      • 탭 UI 적용 사례
      • 모달 다이얼로그 적용 사례
      • 확장과 축소 콘텐츠 적용 사례
      • 정렬할 수 있는 table 적용 사례
      • 자동완성 적용 사례
      • 접근성 주요 개선 항목
        • 버튼을 왜 링크로 쓰는거지?
        • 그룹에게는 그룹명을 알려주자
        • 에러메세지는 왜 보이기만 하지?
        • 이해하기 어려운 폼 레이블
        • 화면을 보는 스크린리더 사용자
        • 전환되지 않는 페이지의 포커스
        • 동일한 기능의 서로 다른 UI
    • 알아두면 좋은 것들
      • role=application은 언제 사용할까?
      • 대문자로만 표현해야 할 때
      • 화면의 정렬을 위해 중복 태그를 사용하지 말 것
    • Screen Reader 테스트
      • Screen Reader와 Browser 조합
      • Screen Reader 버그
  • WAI-ARIA
    • Landmark Role
    • Widget Role & Attributes
  • Contact
    • 무엇이 궁금하세요?
Powered by GitBook
On this page
  • 일반인보다 장애인에게 더욱 유용한 채팅서비스
  • 예제 화면
  • Live Region

Was this helpful?

Edit on Git
  1. AOA 2019
  2. 주요 UI별 ARIA 적용 사례 (2019)

채팅 상담 적용 사례

Previous캐러셀 적용 사례Next툴팁 적용 사례

Last updated 8 months ago

Was this helpful?

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

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

채팅창을 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을 읽는 이슈가 있어 필요한 경우에 노드와 함께 삽입하는 것이 좋다.