조작의 연속성 - 연속적인 목록형 위젯의 접근성
안녕하세요, 엔비전스입니다.
가까운 과거부터 지금까지 자바스크립트로 만들어진 동적 웹페이지로 쉽게 접할 수 있게 된 지 꽤 오랜 시간이 흘렀습니다. 오히려 이제는 콘텐츠가 변하지 않는 정적 웹페이지가 더 낯선 지경에 이르렀습니다. 버튼이 누르면 메뉴가 튀어나오고, 자료가 불러와지고, 심지어 페이지 위에 게임이 실행되기도 합니다.
이제 웹 환경은 흡사 응용프로그램(애플리케이션)처럼 보이고, 응용프로그램이라고 해도 무방할 정도로 UI/UX, 사용할 수 있는 지원 기술면에서 성숙해졌습니다. 요즘은 웹사이트라는 표현만큼이나 웹 애플리케이션이라는 표현도 등장하고 자주 사용하게 되었습니다.
특히, React, Vue, Sevelte와 같은 선언형 프레임워크로 인해 이런 웹 애플리케이션이 근 10년간 빠른 속도로 늘어났습니다. 이러한 선언형 프레임워크의 특징은 합성에 있습니다. 매우 작은 단위의 컴포넌트를 만들고, 그것을 합성해서 또 다른 하나의 컴포넌트를 만듭니다.
다량의 데이터를 표시함에 있어서 가장 간단하면서도 보기 좋게 정리하는 방법은 표나 목록으로 정리하는 것일 겁니다. 컴포넌트도 마찬가지로, 여러 데이터가 불러와지고, 새 데이터를 추가하고, 기존 데이터를 제거하거나 수정하는 등 복합적인 동작이 한 항목에 들어가 있으며, 수없이 반복됩니다.
이런 경우, 화면을 한눈에 보고 내용을 시각적으로 이해하는 사람은 목록이나 표 형태의 반복된 위젯을 이해하는데, 오랜 시간에 걸리지 않습니다. 그러나 스크린 리더 사용자는 무작정 목록 형태로, 표 형태로 만든다고 이것을 바로 이해하기란 쉽지 않습니다.
반복된 위젯의 정보 습득 및 탐색 개선하기
음악 스트리밍 플랫폼에 음악 재생 목록이 있다고 생각해 봅시다. 재생 목록에는 음악들이 세로로 쌓여서 표시됩니다. 또한 각 항목은 음악 재생 외에도 여러 기능을 포함합니다.
- 각 항목에는 음악 제목이 왼쪽에 적혀있으며, 이 제목을 누르면 음악이 재생됩니다.
- 제목 오른쪽에 빈 공간이 있고, 오른쪽 정렬된 여러 버튼들이 있습니다.
- 오른쪽 정렬된 버튼은 좋아요, 보관함에 추가, 더보기 등이 있을 수 있습니다.
이럴 때, 각 항목마다 똑같은 구성으로 컴포넌트가 생성되므로, 한 화면에 똑같은 버튼이 여러 개 생기게 됩니다. 눈으로 정보를 파악하는 사람은 좌측에 이름이 있고, 오른쪽에 버튼이 똑같은 줄에 있으므로, 해당 버튼은 어떤 음악을 대상으로 하는 버튼인지 단 번에 알 수 있습니다. 그런데, 스크린 리더 사용자 입장에서는 모두 다 똑같은 좋아요 버튼이며, 보관함에 추가 버튼이며, 더보기 버튼입니다. 대상이 어떤 음악 항목인지 알 수 없습니다.
버튼은 모두 같아도 눈으로 볼 때는 내용과 버튼이 한 줄에 보이기 때문에 대상 음악 제목을 모를 일이 없습니다. 그러나, 스크린 리더 사용자는 이런 버튼들을 탐색하는 과정에서 대상 음악 제목을 알려주지 않으면 일일이 음악 제목을 읽기 위해 거꾸로 탐색해야 하고, 탐색에 있어서 연속성이 떨어지며, 상대적으로 시간이 오래 걸릴 수밖에 없게 됩니다.
어떻게 반복된 텍스트를 방지할 수 있나요?
반복적인 컴포넌트를 만들 때, 각 항목마다 있는 부가 버튼에서 제목을 들을 수 있도록 수정하면 동등한 사용성을 보장할 수 있습니다. 방법은 두 가지가 있습니다. 첫 번째 방법은 aria-label에 새로운 문자열로 이름을 포함하는 방법이 있습니다. 비교적 간단한 방법이지요.
두 번째 방법은 버튼과 이름이 적힌 요소에 각각 id를 부여하고, aria-labelledby나 aria-describedby로 연결하는 방법이 있습니다. 이런 경우, React같은 것을 쓴다면, 목록마다 id를 자동으로 부여한다면 도움이 될 것입니다.
아래 링크는 더미 데이터를 모아놓은 샘플 페이지입니다. 가상의 신상정보가 써져있고, 목록화되어 있습니다.
각 메뉴마다 더보기 버튼이 있고, 누르면 메뉴가 펼쳐지며, 삭제와 수정 메뉴 항목이 표시됩니다. 눈으로 보기에는 별반 다르지 않지만 스크린리더로 보게 되면 평범한 목록 컴포넌트와 많이 다른 것을 알 수 있습니다.
1.2. 왜 방지해야 해야 하나요?
KWCAG의 지침 분류 중, 운용의 용의성(Operable)이 있습니다. 이 운용의 용의성에 “쉬운 내비게이션”이라는 항목이 있으며, 쉬운 내비게이션에 포함된 내용 중, 「6.4.3. 적절한 링크 텍스트」가 있습니다. 이 지침은 링크의 목적지, 어떤 페이지로 연결되는지를 텍스트가 잘 설명하는지를 판단하는 기준입니다.
지침 항목 내용만 들어서는 어떤 것이 적절한 링크 텍스트인지 알기 어려우니 쉽게 설명해 보자면, 포털 페이지에 주제별로 여러 섹션이 있고, 기본적으로는 최신 게시글인 다섯 개만 표시되는 형태이며, 제목 옆에 “더 보기” 링크가 있다고 생각해 봅시다. 이 “더 보기”는 링크 텍스트로서 적절할까요?
당연히 부적절합니다. 왜냐면, Tab키로 초점을 받을 수 있는 요소 단위로 탐색하거나, 링크 단위로 가상 커서로 탐색하게 되면 모든 링크 이름은 똑같이 “더보기”이기 때문입니다. 그런데, “어, 선생님! 가상 커서로 순서대로 방향키 눌러가면서 탐색하면 되잖아요?”라고 질문해 주시는 분들이 계실 수도 있습니다.
물론 그렇게 하나하나 모두 탐색하는 것은 탈락되는 정보가 없이 모든 정보를 얻을 수 있습니다. 하지만 시간이 너무 오래 걸리기 때문에 여러 방법을 사용하여 빠르게 탐색하게 됩니다. 식사로 비유를 하자면, 슬로우푸드가 건강에 좋은 건 알지만 현실적으로 만들고 먹기까지 너무 오래 걸리는 것과 비슷합니다.
마찬가지로 방향 키로 천천히 탐색하는 것이 맥락을 파악하는 데 매우 좋지만 너무 오래 걸립니다. 그래서 순서대로 탐색하지 않더라도 이런 상황이 발생하지 않도록 “더보기”와 같이 반복된 이름 링크에 사용하는 것을 막는 것입니다. 여러 개의 똑같은 더 보기 링크를 만나더라도, 거꾸로 탐색해서 내용을 듣지 않아도 대상을 알 수 있도록 만드는 것이지요.
그런데, 우리가 얘기하고 있는 것은 “버튼”이지요? 지침에서는 버튼에 관해서는 다루고 있지 않지만, 아티클을 시작할 때 강조했듯이 웹사이트는 이제 단순히 문서가 아닙니다. 하나의 응용프로그램으로 봐도 무방한 페이지가 즐비합니다. 심지어 Visual Studio Code나 Discord, Skype 등 웹사이트 렌더링을 통해 응용프로그램을 만들기도 하지요.
그렇기 때문에 오늘날 “적절한 링크 텍스트”라는 지침 내용은 링크 요소만을 국한하지 않고 적용 범위를 확장하여 버튼 등에도 모두 적용되어야 바람직하며, 앞으로 나아갈 길입니다.
2. 목록형 컴포넌트의 완성도를 높이는 조작의 연속성 고려하기
목록형 또는 여타 연속된 위젯을 만들 때 많은 서비스에서 아쉽게도 신경 쓰지 않는 부분이 있습니다. 바로 키보드 탐색 또는 보조 기술을 통한 탐색이나 조작의 연속성을 보장하지 않는다는 부분입니다.
조작의 연속성? 낯선 개념인데, 정의가 뭔가요?
이 아티클에서 “조작의 연속성”은 동작에 따라 초점을 관리하여 연속된 동작을 이어서 할 수 있는 것을 의미합니다. 예를 들어, 목록이 삭제되었으면, 더 이상 해당 항목이 없으므로 이전 또는 다음 항목에 초점을 보내주어야 합니다. 만약에 순서를 바꿀 수 있는 목록이라면 순서 변경 동작 후, 변경된 위치로 초점을 보내주면 계속해서 목록 순서를 바꿀 수 있을 겁니다.
이런 것 외에도, 메뉴나 대화상자를 닫았을 때 초점이 원위치로 이동해 주는 것도 조작의 연속성과 관계가 있다고 할 수 있습니다. 대화상자나 메뉴에 초점을 보내주는 것도 중요하지만, 되돌려주는 것도 중요합니다. 만약, 키보드 사용자가 웹 페이지를 Tab 키로 탐색하다가 팝업을 열고 다 본 다음 닫았을 때, 원 위치로 초점을 이동해 주지 않는다면 연속성이 매우 떨어지겠지요.
연속성을 잘 이해할 수 있는 사례 중 하나를 말해보자면, Windows 탐색기에서 파일을 관리하는 상황을 예로 들 수 있을 것 같습니다. 키보드에 있는 Delete 키로 탐색기에서 폴더 안에 있는 항목을 삭제해 보신 분들은 이해가 쉬울 수 있습니다. Windows 탐색기에서 파일을 지우는 과정과 동작을 정리하면 다음과 같습니다.
- 화살표 키(방향키)로 원하는 항목을 선택한다.
- Delete 키로 원하는 항목을 지운다. 화면에서 해당 폴더가 사라진다.
- 항목이 사라졌으므로 지웠던 항목의 다음 항목으로 초점을 보내준다. 이 상태에서 Space키나 방향키로 다시 파일을 선택할 수 있다.
- 항목을 지웠을 때 파일이 없다면 목록 컨테이너에 초점을 보내주고 새 파일을 단축키로 만들 수 있도록 한다.
보시다시피 연속성을 보장합니다. 만약 지웠을 때 초점을 남은 항목에 보내주지 않는다면 탐색기 주소 표시줄부터 다시 탐색해야만 했을 겁니다.
연속성을 체험해 봅시다
목록형 위젯을 탐색할 때 초점을 관리하지 않아 조작 연속성이 떨어지는 사례는 매우 흔히 볼 수 있습니다. 이는 컴퓨터를 사용하는 대다수 사용자가 눈으로 모니터에 출력된 화면을 보고, 마우스와 같은 포인터 입력장치로 버튼이나 링크를 클릭하는 방법으로 컴퓨터를 사용하기 때문으로 예상됩니다.
할 일 목록 위젯을 예를 들어봅시다. 먼저, 등록한 항목이 있고, 원하는 항목을 삭제했을 때, 삭제한 항목은 화면에서 사라지게 됩니다. 이때, 보통은 초점을 관리해 주지 않아 초점이 맨 위로 초기화되는 상황이 주로 발생합니다. 연속적인 조작이 불가능하겠지요?
다음 링크는 할 일 목록을 간단하게 구현한 페이지입니다. 목록을 삭제했을 때 초점이 남은 목록으로 이동해 주기 때문에 연속적으로 조작할 수 있음을 단적으로 체험할 수 있습니다.
기본적으로는 아무런 항목도 없기 때문에 임의로 항목을 추가하고 체험해 보세요. 데이터는 접속한 브라우저 로컬에 저장되며 그 어디에도 전달되지 않습니다.
조작의 연속성이라는 것을 따로 저희가 정의하였기에 다른 개념처럼 느껴질 수 있으나, 연속된 항목의 레이블과 초점을 관리하여, 콘텐츠의 흐름대로 끊이지 않고 사용할 수 있게끔 하는 것이라고 할 수 있으며, 기존 지침에서 다뤘던 접근성 문제의 연장선이라고 볼 수 있습니다. 앞으로 많은 서비스에서 이러한 문제를 고려하고 개선하길 기대합니다.
이번 아티클은 여기까지이며, 읽어주셔서 감사합니다. 다음에 더 좋은 아티클로 돌아올 수 있도록 노력하겠습니다.
감사합니다.