아티클

WAI-ARIA 바르게 사용하기 3부

2018-03-30 18:22:43

안녕하세요. 엔비전스입니다.


‘WAI-ARIA 바르게 사용하기 2부’에서는 아코디언 콘텐츠에 ARIA를 적용하는 방법에 대해 살펴보았습니다. 이번 시간에는 WAI-ARIA 바르게 사용하기 3부로 alert, alertdialog 역할에 대해 살펴보겠습니다.

웹 페이지에서는 사용자에게 다양한 목적의 알림을 제공합니다. 이러한 알림으로는 회원가입 양식과 같은 폼 필드에서 잘못된 값 입력 시 즉각적으로 제공되는 오류 메시지나 인터넷 뱅킹과 같이 보안이 중요한 사이트에서 로그인 시간 연장과 같은 것들이 있습니다.
스크린 리더 사용자에게 웹 페이지의 알림을 전달하는 방법에는 여러 가지 방법이 있지만, 이번 시간에는 ARIA 역할 중 alert와 alertdialog 역할로 알림을 제공하는 방법과 alert, alertdialog 역할을 바르게 사용하는 방법을 살펴보겠습니다. alert, alertdialog 역할을 사용하여 알림을 제공할 수 있는 사례는 다음과 같은 것들이 있을 수 있습니다.
  • 채팅 페이지에서 특정 사용자가 온라인 또는 오프라인과 같은 사용자의 상태 전환을 스크린 리더 사용자에게 즉시 알릴 수 있음
  • 글자 제한이 있는 텍스트 필드에 값을 초과하였을 때 입력값이 초과하였음을 스크린 리더 사용자에게 알리고자 할 때
  • 폼 필드에서 값을 입력할 때 잘못된 값을 입력하여 알림 메시지가 제공되었을 때 스크린 리더 사용자에게 즉각적인 알림을 제공하고자 할 때
  • 인터넷 뱅킹, 항공기 예약 등과 같은 예약 서비스에서 로그인이 만료되기 전 스크린 리더 사용자에게 사전 알림을 제공하려 할 때
이 외에도 alert와 alertdialog 역할을 적용할 수 있는 사례는 많을 것입니다. 두 섹션에 걸쳐 alert, alertdialog 역할에 대해 살펴보겠습니다.

alert역할

웹 페이지에서 alert 역할을 사용하면, 스크린 리더는 현재 출력 중인 음성, 점자보다 우선하여 알림이 출력됩니다. 즉, 현재 스크린 리더 사용자가 읽고 있는 점자 또는 음성 출력이 중지되고, alert 역할로 제공된 알림이 먼저 출력됩니다. 스크린 리더 사용자가 알림을 우선으로 전달받을 수 있는 이유는, 알림을 제공하고자 하는 요소에 alert 역할을 사용하게 되면 aria-live 속성이 “assertive”로 설정되기 때문입니다. aria-live 역할에 대해서는 추후 다룰 예정입니다.

alert 역할은 사용자가 즉각적으로 인지해야 하는 알림에만 사용해야 하며, alert 역할 사용 시 다음을 유의해야 합니다.
  1. alert 역할은 정적 텍스트 콘텐츠에만 사용해야 합니다. 스크린 리더는 키보드 초점이 현재 어디에 있는지에 관계없이 알림을 자동으로 알리기 때문에 alert 역할이 사용되는 요소는 초점을 받을 필요가 없습니다.
  2. alert 역할로 알림 제공 시 과도한 알림(이메일 입력 필드에서 매번 글자를 입력할 때와 같은) 할 시 스크린 리더 사용자의 상호작용을 방해하므로 사용에 주의해야 합니다.
  3. 체크 상자, 라디오 버튼 등과 같은 폼 컨트롤이 포함된 알림을 제공하려 할 경우 다음 섹션에서 소개할 alertdialog 역할을 사용해야 합니다.

alertdialog 역할

alertdialog 역할은 대화상자의 한 유형이며, 사용자가 상호작용해야 하는 좀 더 복잡한 알림을 제공하려 할 때 사용할 수 있습니다. alertdialog에는 텍스트 필드, 체크 상자 등과 같은 컨트롤을 포함할 수 있으며, 후에 다루게 될 dialog 역할과 유사하게 마크업 할 수 있습니다.
alertdialog 역할과 dialog 역할의 차이점은 alertdialog 역할은 반드시 Modal 형태로 제공되어 사용자가 즉각적인 알림을 처리할 수 있도록 제공되어야 한다는 것입니다. alertdialog는 대화상자이므로 스크린 리더가 대화상자임을 인지할 수 있도록 하기 위해 aria-labelledby 또는 aria-label로 대화상자의 제목을 지정하며, aria-describedby 속성으로 설명을 제공해야 합니다. 스크린 리더를 사용하여 alertdialog 대화상자 내로 이동하면, 스크린 리더는 포커스가 있는 요소를 알리기 전 대화상자의 제목과 설명을 읽습니다.

 

alertdialog 역할로 구현할 수 있는 알림의 형태는 다음과 같은 것들이 있습니다.
  • 한 문장 정도의 알림 메시지와 확인 버튼으로 구성된 간단한 알림
  • 중요한 작업을 실행하기 전, 사용자가 최종 실행 여부를 확인, 취소 버튼을 통해 실행하거나 취소할 수 있도록 하려 할 때
  • 주소, 전화번호 등과 같은 세부 정보가 포함되어 있고, 이를 수정하도록 요구하는 것 등과 같은 작업을 사용자에게 알리려 할 때

alertdialog 역할을 사용하는 데 유의해야 할 점은 다음과 같은 것들이 있습니다.
  1. alert 역할과 마찬가지로 알림, 오류 등과 같이 사용자에게 알림을 제공하고자 할 때 alertdialog 역할을 사용해야 합니다.
  2. alertdialog로 구현된 대화상자에 정적 콘텐츠만 포함되어 있고 체크 상자, 라디오 버튼과 같은 컨트롤이 포함되지 않은 경우 alert 역할을 사용하여 알림을 제공해야 합니다.
  3. 스크린 리더 사용자가 알림 대화상자에서 초점을 잃게 되어 알림 내용을 확인하지 못하는 상황을 방지하기 위해 alertdialog 역할로 구현된 대화상자는 Modal 형태로 구현되어야 합니다.

alert, alertdialog 역할 샘플은 다음 페이지에서 확인하실 수 있습니다.
지금까지 alert와 alertdialog 역할에 대해 알아보았습니다. 저희는 다음에 더 좋은 내용으로 다시 찾아뵙겠습니다. 읽어주셔서 감사합니다.

 

댓글 0
댓글을 작성하려면 해주세요.