Kally

안녕하세요. Joseph입니다. 이번에는 WAI-ARIA로 상태 정보를 제공하는 방법에 관해 소개해볼까 합니다. WAI-ARIA에는 다양한 상태정보가 존재합니다. 이를 적절하게 사용하면 좋은 사용자 경험을 얻을 수 있습니다.

상태정보가 뭐예요?

상태 정보는 선택(예: 선택됨, 눌림)과 비활성화(표준 서식 태그의 disabled 속성), 현제 시간, 페이지, 스텝 등, 다양한 정보를 통틀어서 상태 정보라고 정의합니다.

이 개념은 소프트웨어 접근성을 얘기할 때 쓰이는 개념으로, 국내에서 웹, 모바일, 데스크톱용 응용프로그램 할 것 없이 모든 플랫폼에서 통용되는 표현입니다.

WAI-ARIA 공식 문서에서도 해당 정보를 제공하는 속성들을 State(상태)로 통칭합니다.

그러면, 어떤 상태정보가 있을까요?

WAI-ARIA에는 기존 웹에서 지원되는 속성부터, 기본 웹 요소에는 없는 상태정보까지 폭넓게 상태정보 속성을 제공합니다.

각 상태정보는 모든 요소(전역)에서 사용 한 것들이 있고, 특정 요소에만 적용되는 속성도 있습니다. 이 점을 유의하여 사용해야 합니다.

상태정보별 설명

WAI-ARIA에는 다음과 같은 상태정보가 있습니다.

• aria-busy="true|false" (전역 상태정보)는 성격 급한 사람이라면 별로 좋아하지 않을 수도 있습니다. 바로, Windows 응용프로그램에서 '응답 대기 중'과 같은 상태를 나타내는 속성입니다. 직역하면 "바쁨" 상태겠네요. 전역 상태정보로 명세에 소개되어 있지만 해당 속성은 aria-live와 짝꿍입니다.

  주로, 페이지나 응용프로그램 화면이 로딩될 때, 인디케이터에 많이 사용됩니다.

  기본값은 false입니다.

• aria-current="true|false|date|step|page|time|location" (전역 상태정보)는 여러 항목 중 특정 요소가 현재 항목임을 알려주는 속성입니다. true로 설정하면, '현재 항목' 등으로 읽히며, false를 제외한 각각 속성값은 해당하는 명칭을 상태에 같이 포함합니다(예: date로 설정하면, 현재 날짜라고 읽음).

  기본 값은 당연하게도 false입니다.

• aria-checked="true|mixed|false"는 체크박스, 라디오버튼, 스위치에 사용되는 상태정보입니다. 조금만봐도 직관적으로 이해가 되는 속성으로 true면 당연하게도 체크되고, false면 해제됩니다.

  특이하게 mixed값이 있는데, mixed는 일부만 체크되어 있음을 암시합니다. 예를들어, 해당 버튼을 누르면 전체가 체크된다거나 체크 해제되는 상황에 사용할 수 있습니다.

  이 mixed를 사용하는 상황을 예로 들어보자면, 여러 항목을 한 번에 동의하는 체크박스가 있을 때, 하위 체크박스 중, 일부만 선택되어있거나 선택 해제되어있을 때, 천제 동의 체크박스에 이 'mixed'값을 사용할 수 있을겁니다.

  또는 메일함 항목과 같이 폴더 이동, 삭제 등의 동작을 수행할 수 있는 상황에서도 전체 선택 체크박스에 동일하게 적용할 수 있습니다.

  더 자세한 유형별 지원 정보는 aria-checked 명세를 참고하시기 바랍니다.

• aria-disabled="true/false"는 이름에서 알 수 있듯, 요소가 비활성화되어 사용할 수 없음을 알리는 속성입니다. 네이티브 HTML의 <button>이나 <input> <textarea>등에 사용하는 disabled 속성과 같은 역할입니다.

  다른 점은, 네이티브 태그와 다르게 초점을 따로 없애주거나 하지 않기 때문에, 동일하게 구현하려면 당연히 커스텀 요소이므로 tabindex="-1" 속성을 제공해야 합니다.

  이 속성을 사용할 수 있는 지원 요소 및 role은 aria-invalid 명세를 확인합니다.

  기본값은 false입니다.

• aria-grabbed="true|false" (전역 상태정보)는 영어 단어를 안다면 이름에서 알 수 있듯 드래그&드롭 상황에서 기능적으로 드래그를 위해 특정 항목이 손에 잡혀 있음을 표시할 떄 사용합니다.

• aria-hidden="true|false" (전역 상태정보)는 이름 그대로, 숨김에 관한 상태입니다. true로 설정하게 되면 눈으로는 보이지만, 스크린 리더나 다른 보조기술에서는 탐색하지 않게 됩니다.

  aria-disabled와 마찬가지로, 키보드 초점은 별도로 관리해 주어야 합니다. 그렇지 않을 경우, 스크린 리더에서는 해당 요소를 인식할 수 없지만, 키보드 Tab 키로 시스템 초점을 보내면, 초점은 이동되어 아무것도 읽지 못하는 상황이 발생합니다.

  가급적 컨트롤 요소(키보드 Tab키로 초점이 가는 요소)에는 사용하지 않는 것을 권하며, 사용하게 된다면 tabindex="-1"을 적용하여 반드시 초점이 이동하지 못 하도록 해야 합니다.

  눈에는 보이지만 스크린 리더에서 접근 못하게, 키보드도 접근이 불가능하게 하고자 한다면, 최신 속성인 inert 사용도 고려해 볼 수 있습니다.

  기본값은 false입니다. 당연히 그래야겠지요?

• aria-invaild="grammar|spelling|true|false"는 영어 단어 뜻으로 invalid는 유효하지 않음을 의미합니다 말 그대로 서식에 값을 입력했을 때, 값이 올바르지 않음을 표시하는 속성입니다. 각 값을 보면, grammar는 문법에 오류가 있음을 나타내고, spelling은 철자에 오류가 있음을 나타냅니다.

  true는 위 두개와는 다른 기타 유효하지 않은 데이터 값이 입력되었음을 사용자에게 알립니다. 기본값은 false입니다.

  주로 <input> 태그나 <textarea>에서 사용합니다.

  이 속성을 사용 가능할 수 있는 지원 요소 및 role은 aria-invalid 명세를 확인합니다.

  기본값은 false입니다. 보통, 처음부터 값이 틀려 있을 일은 없으니까요.

• aria-pressed="true|mixed|false"는 주로 버튼 요소 유형에 사용하는 속성입니다. 이 버튼이 현재 눌려있는지, 눌려있지 않은지를 구분하게 하는 속성입니다. 주로 이 컨셉을 사용하는 상황은 재생 버튼과 음소거 버튼 같은 미디어 플레이어의 상태가 토글 되는 버튼입니다.

  쇼핑몰에서 "찜하기" 버튼도 예로 들 수 있겠네요. 사용자가 찜한 상태라면 true 아니라면 false 값을 적용하여 사용자가 찜한 상태를 버튼에서 바로 확인할 수 있도록 할 수 있습니다.

  특이하게 mixed값이 있는데, mixed는 일부만 눌려있음을 암시합니다. 예를들어, 해당 버튼을 누르면 전체가 눌린다거나 눌림이 해제되는 상황에 사용할 수 있습니다.

  기본값은 false입니다.

• aria-selected="true|false|undefined"는 항목이 선택되어 있는지, 선택 해제되어 있는지를 알려주는 속성입니다.

  기본값은 undefined입니다. 조금 의아하지요? 먼저는 모두 기본값을 마지막에 적었는데 말이지요.

  이것을 먼저 설명하는 이유는 선택 안된 요소는 반드시 false 값을 설정해야 함을 강조하기 위해서입니다. aria-selected가 boolean값으로 전달되면, 해당 항목은 선택이 되었거나 안된 요소이기도 하며, 선택할 수 있는(selectable) 요소로 정의됩니다.

  그렇기 때문에 선택이 안 되어 있으나 선택할 수 있는 요소는 반드시 false 값을 넣어줘야 합니다.

  해당 요소는 주로 WAI-ARIA로 만든 커스텀 탭컨트롤 항목이나 커스텀 목록상자 안에 있는 항목에 사용합니다.

  aria-selected는 이름만 들어서는 모든 요소에 사용할 수 있을 것 같아 보이지만, 사용할 수 있는 요소가 정해져있습니다. 보통 이 부분을 모르고 선택된 요소에 모두 이 aria-selected를 넣는 사례가 빈번합니다.

  때문에 반드시 aria-selected 명세를 참고하여 이 속성을 사용해야 합니다.

• aria-expanded="true|false|undefined"는 버튼이나 콤보박스, 목록상자 등에 사용합니다.

  요소를 누르면 하위 콘텐츠가 펼쳐지는 디스클로져 형태의 위젯이나 아코디언 콘텐츠에 이 aria-expanded가 유용하게 사용됩니다.

  예를 들어, 도움말 버튼이 있고, 해당 버튼을 누르면 아래에 말풍선 레이어가 나타나는 형태의 콘텐츠에 이 속성을 사용할 수 있습니다.

  더 자세한 지원 사항은 aria-expanded 명세를 참고합니다.

  기본 값은 undefined입니다. 조금만 생각해봐도 이유를 알 수 있는데, false면, 졉혀져있음을 표시하고, true면 펼쳐져있음을 알리기 때문입니다.

  기본 값이 false이면 확장 축소 용도로 사용하지 않은 요소에도 접힘 상태가 적용되므로 문제가 있습니다.

Q&A: 올바른 요소 유형 사용과 상태 정보 속성의 지원 필요성에 관하여

• 질문 1: 도대체 상태정보 속성을 왜 쓰는거에요?

  • 답변: 스크린 리더마다 상태정보를 읽는 방식에 차이가 있습니다. 기기마다 올바르게 상태정보를 받아들이게 하려면, 상태 정보 속성을 제공하는 것이 좋습니다.

• 질문 2: 그냥 aria-label이나 title 속성 또는 요소 내용물 안에 "선택됨"이라고 넣으면 안되는거예요?

  • 답변: 없는 것보다야 낫습니다.

    하지만, 스크린 리더마다 읽는 방식에 차이가 있다고 1번 질문에서 말씀드렸습니다. 스크린 리더에 따라서는 눌렀을 때 바뀐 상태를 즉각적으로 알 수 있는 피드백이 없을 수도 있습니다.

    예를 들어볼게요. iOS VoiceOver는 요소를 눌렀을 때, 특별한 상황이 아니라면 눌린 요소의 상태와 이름을 다시 한번 읽습니다. 즉, 텍스트만 바꿔도 바로 알 수 있습니다.

    반면에, 일반적인 스크린 리더는 그렇지 않습니다. 눌러도 아무런 피드백이 없고, 사용자가 직접 단축키로 확인해야 하는 번거러움이 있습니다.

    상태정보를 주는게 어디냐고 말하실 수 있지만, 스크린 리더는 음성을 듣고 컴퓨터를 사용하는 것이기 때문에, 눈으로 보는것보다 아무리 빨리봐도 콘텐츠를 이해하는 데 오랜 시간이 걸립니다. 그렇기 때문에, 눌렀을 때, 즉각적인 피드백이 지원되는 것이 당연해야 합니다.

    눈으로도, 눌렀을 때 버튼 모양이나 색깔이 바뀌면 바로 알 수 있는 것 처럼요.