접근성을 고려한 글쓰기 표준

원문: Michael J. Metts & Andy Welfle, "Standards for Writing Accessibly" A List Apart와 저자의 허가를 받아 번역되었습니다.

WCAG2 표준을 충족하는 글쓰기는 쉽지 않은 일이지만 그만한 가치가 충분히 있습니다. 천재 물리학자 알버트 아인슈타인은 이렇게 말했습니다. "더 크고, 복잡하고, 폭력적으로 만드는 일은 바보도 할 수 있다. 하지만 그 반대로 나아가는 데는 약간의 재능과 큰 용기가 필요하다."

이 책(Writing is Designing)이 접근성을 위한 더 나은 글쓰기를 하는 데 도움이 되길 바랍니다. 지금까지 여러분이 배운 내용은 다음과 같습니다.

  • 명확성이 중요한 이유

  • 오류 상태와 극한 케이스에서 메시지를 구성하는 방법

  • 작성한 단어의 유효성을 테스트하는 방법

이 모든 것은 스크린 리더에 더 적합한 글을 쓰고, 추가적인 맥락이 필요한 사용자에게 이를 제공하여 내용을 더 쉽게 해석할 수 있도록 도울 것입니다.

하지만 이 책을 다 읽고 나서도 미처 떠올리지 못할 몇 가지 구체적인 지점이 있습니다.

스크린 리더 사용자를 위한 글쓰기

시각이 없거나 거의 소실된 사람들은 시력이 있는 사용자와는 전혀 다른 방식으로 앱이나 웹사이트와 상호작용합니다. 스크린 리더는 화면에 표시된 요소들을 (가능한 한 정확히) 파싱하여 이를 사용자에게 읽어줍니다. 이 과정에서 다양한 문제가 발생할 수 있습니다. 인터페이스 작성자로서 아마 가장 중요한 임무는 스크린 리더 사용자에게 최상의 맥락을 제공하는 것입니다.

스크린 리더와 관련하여 염두에 두어야 할 몇 가지 사항은 다음과 같습니다.

  • 시력이 있는 사용자의 평균 읽기 속도는 초당 두 개에서 다섯 개의 단어입니다. 스크린 리더 사용자는 평균적으로 초당 35음절을 이해할 수 있는데 이는 훨씬 빠른 속도입니다. 그러니 추가적인 맥락이 필요하거나 유용하다면 명확성을 위해 간결성을 희생하는 것을 두려워하지 마세요.

  • 사람들은 긴 텍스트 블록을 훑어볼 수 있기를 원합니다. 이는 시각적이든 청각적이든 관계없이 동일합니다. 따라서 헤더, 짧은 단락 등 기타 콘텐츠 디자인의 모범 사례를 사용하여 긴 글을 구조화하는 것이 매우 중요합니다.

공간 순이 아닌 시간 순으로 작성하세요

시간 순으로 작성한다는 것은 인터페이스에서 항목들이 어디에 배치되어 있는지를 설명하는 것이 아니라, 사건의 순서에 따라 설명하는 것을 말합니다. 시간 순으로 작성하는 것이 중요한 여러 이유가 있지만 (기기와 브라우저가 인터페이스를 다르게 렌더링할 수 있다는 점도 그 이유 중 하나입니다), 가장 중요한 이유는 스크린 리더에 있습니다. 툴팁이나 온보딩 요소를 작성할 때 "아래의 OK 버튼을 클릭하여 계속하세요." 또는 "위의 지시에 따라 문서를 저장하세요."와 같은 문구를 자주 접하실 겁니다.

스크린 리더는 이러한 지침을 공간적 관계를 파악할 수 없는 사용자에게 읽어줍니다. 많은 경우 스크린 리더 사용자는 이러한 설명을 이해할 수는 있지만 굳이 그럴 필요는 없어야 합니다. 스크린 리더 사용자를 고려하여 글을 작성하세요. 인간이 공유하는 보편적인 경험을 수용하고, '상단이 먼저, 하단이 나중'이라는 본질적 이해에 기반한 패러다임을 따르세요. 그림 5.5처럼 시간 순으로 작성하세요.

Adobe ID 회원가입 페이지입니다. 이름, 성, 이메일, 비밀번호, 국가, 생년월일 입력 필드가 있습니다. 비밀번호 입력 필드 다음에 비밀번호 설정 규칙이 표시되어 있습니다. 하단에 "가입하기" 버튼이 있는데 그 이전에 이용 약관에 대한 안내 정보가 표시되어 있습니다.

그림 5.5 비밀번호 힌트 마이크로카피가 비밀번호 입력 필드 아래에 있으면 아직 그 필드에 도달하지 않은 스크린 리더 사용자에게 도움이 되지 않습니다.

다음은 부적절한 사례입니다.

  • 아래의 OK 버튼을 클릭하여 계속하세요.

  • (페이지 상단으로 스크롤하는 버튼): 상단으로 이동하세요.

대신 다음과 같이 작성하세요.

  • 다음으로, OK를 선택하여 계속하세요.

  • 시작으로 이동하세요.

왼쪽에서 오른쪽, 위쪽에서 아래쪽으로 작성하세요

비록 글에서 공간적 의미를 전달하려 하지 않더라도 여전히 공간적 순서를 염두에 두어야 합니다.

결제 전에 몰랐던 조건들을 서비스나 제품을 구매하고 나서야 알게 된 적이 있나요? 예를 들어 기기에 배터리가 포함되지 않았거나, 소셜 네트워크에 가입하면서 무의식적으로 제3자 광고주에 데이터를 제공하는 데 동의했을 수 있습니다.

스크린 리더를 사용하는 사람들은 이런 문제를 늘 겪고 있습니다.

대부분의 스크린 리더는 정보를 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 해석합니다[1]. 단어의 순서와 배치에 대해 검토할 때 몇 가지 사항을 생각해 보세요. 그림 5.5처럼 어떤 작업을 수행하거나 결정을 내리는 데 중요한 정보가 (오른쪽이나 아래에 위치하여) 작업 항목 다음에 나타나고 있나요? 그렇다면 해당 정보를 인터페이스 위쪽으로 옮기는 것을 고려해야 합니다.

(비밀번호 설정 규칙이나 이용 약관 동의처럼) 작업에 필요한 중요한 정보가 있는 경우 해당 정보를 텍스트 필드나 액션 버튼 에 배치하세요. 툴팁이나 정보 버튼에 숨겨져 있더라도 사용자의 결정 지점 전에 해당 정보가 반드시 표시되어야 합니다.

색상과 아이콘을 단독으로 사용하지 마세요

디지털 제품을 사용하는 시력이 있는 미국 사용자라면, 빨간색 메시지를 보고 경고 메시지거나 문제가 있다고 해석할 가능성이 큽니다. 마찬가지로 녹색 메시지는 성공으로 연결할 가능성이 높습니다. 그러나 색상이 해당 사용자들에게 의미 전달을 보조한다고 해도 다른 문화권에서는 동일한 의미를 가지지 않을 수 있습니다.

예를 들어 빨간색은 미국에서는 (일반적으로) 흥분이나 위험을 나타낼 수 있는데, 어떤 문화에서는 전혀 다른 의미로 해석할 수 있습니다.

  • 중국에서는 행운을 상징합니다.

  • 구소련 및 동유럽 국가들에서는 공산주의와 강하게 연관된 색입니다.

  • 인도에서는 순결을 상징합니다.

노란색은 미국에서 주로 '주의'를 의미하는데 (이는 신호등의 멘털 모델을 차용한 것입니다.) 다른 문화권에서는 다음과 같은 의미를 가질 수 있습니다.

  • 라틴 아메리카에서는 죽음을 연상합니다.

  • 동아시아 문화권에서는 신성하고 제국적인 왕실의 색으로 여겨집니다.

색맹 혹은 시력이 낮거나 없는 사용자들은 어떨까요? 스크린 리더 사용자라면 어떨까요? 인터페이스 색상만으로 본질적 의미를 전달하는 것은 그들에게 아무런 의미도 없습니다. 메시지를 소리로 들었을 때도 이해할 수 있도록 맥락을 담은 단어를 반드시 추가해야 합니다. 그림 5.6처럼 말이죠.

 두 개의 빨간색 경고 상자가 느낌표 아이콘과 함께 있습니다. 첫 번째는 "작업을 저장하세요!"라고 되어 있고, 두 번째는 "다음 단계로 가기 전에 작업을 저장하세요."라고 되어 있습니다.

그림 5.6 사용자에게 진행 전에 작업을 저장하라는 간단한 인앱 메시지는 빨간색이고 경고 아이콘을 포함했을 때 시각적으로 더 효과적일 수 있습니다. 하지만 가능하다면 추가적인 맥락을 제공하는 것이 좋습니다. 오른쪽 예시는 사용자가 작업을 저장하기 전에는 다음 단계로 진행할 수 없음을 명시하고 있습니다.

행동이 아닌 액션을 설명하세요

터치 우선 인터페이스는 수년간 꾸준히 성장하며 키보드와 마우스 인터페이스를 대체했습니다. 더 이상 사용자는 링크나 버튼을 '클릭'하지 않습니다. 하지만 반드시 '탭'하는 것도 아닙니다. 특히 음성 인터페이스나 보조 기기를 사용하는 경우에는 더 그렇습니다.

행동적 액션을 포함하는 마이크로카피는 다음과 같습니다.

  • 클릭하기(Click)

  • 탭하기(Tap)

  • 누르기(Press)

  • 보기(See)

대신 장치에 구애받지 않는 단어로 액션을 묘사하는 것이 좋습니다.

  • 선택하기(Choose)

  • 고르기(Select)

  • 살펴보기(View)

물론 이 규칙에는 예외가 많습니다. 만약 특정 기능을 실행하는 데 어떤 액션이 요구되고, 어떤 제스처로 인터페이스를 작동시키는지 사용자에게 가르쳐야 한다면 (예를 들어 "두 손가락으로 쥐어 축소하세요" 같은 경우) 당연히 행동을 설명해야 합니다. 그러나 일반적으로 인터페이스의 맥락에서 액션에 초점을 맞추면 더 간단하고 일관된 카피를 작성할 수 있습니다.


주석

  1. 개발자와 함께 일하고 있다면 개발자를 만나서 키보드 포커스 이동 순서를 어떻게 정하는지 파악하는 것이 도움이 됩니다. 때때로 화면 상단에 위치해도 가장 오른쪽 끝에 있는 요소라면 순서상 마지막일 수도 있습니다.