널리

안녕하세요. 접근성 팀 서미연입니다.

트렌드에 따라 사용자 경험에 따라 UX는 계속 발전해 가고 있습니다. 회원 가입, 계정 인증, 주문서 작성 등등 반복적으로 수행해야 하는 입력 서식의 경우 스크롤의 압박이 있기도 하는데요. 사용자의 입력 편의를 위해 초기 입력 서식을 단순화하여 제공하고 사용자 입력에 따라 다음 입력 서식을 위로 노출하는 방식으로 금융앱의 계정 인증 화면에서 많이 찾아볼 수 있습니다. 오늘은 이와 관련하여 입력 서식 기본 접근성과 단계적으로 노출되는 UI/UX 접근성에 대해 알아보도록 하겠습니다.

다음 그림과 같이 초기 입력 서식 작성 후 그 위로 다음 입력 서식이 쌓이는 구조의 UX에서 어떤 고민들이 있었고 어떻게 접근성을 향상시킬 수 있는지 알아보겠습니다.

초점의 순서에서 이슈가 있어 보여요~ (논리적인 순서의 역순)

초점은 사용자가 예측할 수 있도록 논리적인 순서로 이동해야 합니다. 웹 접근성과 모바일 앱 접근성 공통적으로 관례에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 이동하는 것을 논리적인 순서입니다. 

그런데 입력 서식 UI가 위로 쌓이는 UX의 경우 모든 서식이 다 노출되었을 때 스크린리더에서 초점의 탐색 순서가 아래에서 위로 올라가게 되어 접근성 사용자에서 혼란을 주게 됩니다.
기능에 따라 아래에서 위로 올라가는 경우가 있을 수 있으나 이 경우 기존 입력 서식의 관례와 반대로 초점이 아래에서 위로 이동되기 때문에 사용자에게 혼란을 주게 됩니다.

여기서 잠깐! 초점의 순서는~

초점 이동에서 이슈가 있어 보여요~ (사용자가 의도하지 않은 초점 이동)

초점 이동은 사용자에 의해 이동이 되어야 합니다. 사용자에 의해 초점이 이동해야 한다는 것은 키보드, 마우스 등과 같은 도구를 이용하여 사용자가 초점을 이동하거나 모바일의 경우 제스처를 통해 사용자가 초점을 이동시키는 것을 말합니다. 입력 서식을 제공할 때 가장 많은 초점 오류 중 하나가 입력 서식에서 값을 입력했을 때 다음 입력 서식으로 자동으로 초점이 이동되는 것입니다. 예를 들어 다음 그림과 같이 연월일을 입력해야 하는 서식에서 연도 두 자리를 입력하자마자 다음 월 입력 서식으로 초점이 이동하게 된다면 사용자가 의도하지 않은 초점의 이동이 발생하게 되어 혼란을 주게 됩니다.

단계별 입력 서식에서 많이 사용하는 방법으로 1단계 노출 후 값을 입력하고 나면 다음 입력 서식이 노출되며 자동으로 초점이 이동되는 UX를 제공하고 있습니다. 이는 사용자에 의한 초점 이동이 안기 때문에 초점 이동에 혼란을 주게 됩니다.

이렇게 접근성을 고려한다면 어떨까요?

대안1, 대체 수단 제공(도움말 + 펼쳐진 UI 제공)

대체 수단을 제공합니다. 접근성 오류 여부를 판단할 때 명도 대비 3:1이 안 되더라도 다크 모드를 제공하여 명도 대비를 3:1 이상 제공한다든지, 자동으로 변경되는 콘텐츠를 제공하더라도 변경되는 콘텐츠의 전체 내용을 한 번에 볼 수 있는 대체 수단을 제공한 경우 준수한 것으로 인정이 됩니다. 이처럼 위로 쌓이는 입력 서식의 접근성을 대체 수단을 제공함으로써 접근성 기능을 향상시킬 수 있습니다. 이 경우 입력 서식 작성 시 다음 입력 서식이 위로 쌓이는 UX에 대한 정보를 제공하고, 펼쳐진 UI를 원하는 사용자(고령자, 키보드 사용자, 스크린리더 사용자 등등)를 위한 입력 서식 펼치기 버튼을 제공함으로써 대체 수단을 제공할 수 있습니다.

* 쌓이는 UI에 대한 안내 메시지는 참고만 해주세요.
* 이해도를 돕기 위한 대략적인 UX 내용으로 참고 부탁드립니다.

1. [도움말 제공] 접근성 사용자 및 UI 이해도를 제공받기를 원하는 사용자를 위한 도움말 추가

2. [도움말 펼쳐진 상태] 입력 서식 쌓이는 구조에 대한 설명과 입력 서식 펼치기 버튼 추가

3. [입력 서식 펼치기 버튼 누른 다음 입력 서식 전체 노출하고 논리적인 순서로 초점 이동(위에서 아래/왼쪽에서 오른쪽)]

4. [입력 서식 펼쳐진 상태 도움말] 입력 서식 펼치기 버튼 비활성

 

대안2, 아래로 쌓는 UX로(다음 버튼 + 아래로 단계별 UI 제공)

단계별 입력 서식을 제공하되 초점은 논리적인 순서로 위에서 아래로, 초점 이동은 사용자에 의해 이동될 수 있도록 다음 버튼을 제공한다면 모든 사용자가 어려움 없이 이용할 수 있습니다.

1. [1단계 입력 서식] 입력 서식 제공

2. [1단계 입력 시] 입력어 입력 시 다음 버튼 노출

3. [다음 버튼을 눌러 2단계 입력 서식 노출] 다음 버튼을 눌러 2단계 입력 서식에 초점이 인입

4. [2단계 입력 서식 선택 시] 3단계 입력 서식 노출 초점 이동은 사용자에 의해 이동

5. [3단계 입력 시] 입력어 입력 시 다음 버튼 노출

 

PASS 인증 사례를 보면 아래로 쌓는 UX를 제공하는 것을 볼 수 있습니다.

단계적으로 노출되는 UI/UX 트렌드도 잡으면서 접근성도 놓치지 않기를 바랍니다.
공동연구 : 김영희, 이선주

이외 입력 서식 기본 접근성 알아보기

초점 이외 입력 서식과 관련하여 어떤 접근성을 고려해야 하는지 알아 둔다면 입력 서식 접근성 놓치지 않을 거예요~ 입력 서식에서 고려해야 할 기본 접근성 알아보겠습니다.

1. 입력 도움

웹 접근성과 모바일 앱 접근성 공통적으로 입력 서식 이용 시 입력 용도를 알 수 있는 입력 정보 이름(레이블)을 제공하고, 사용자가 입력 오류가 발생했을 시 입력 오류를 방지하거나 정정할 수 있는 방법을 제공하도록 하고 있습니다.

입력 정보 이름(Label) 제공

입력 서식 용도를 이해할 수 있도록 입력 정보 이름(Label)을 제공합니다. 다음 그림과 같이 입력 정보 이름을 제공하고 입력 서식과 연결해 두었다면 스크린리더로 초점이 위치할 때 음성 정보가 제공됩니다.

모바일의 경우 화면이 협소하기 때문에 입력 정보 이름을 제공하지 않고 입력 서식 내 노출되는 입력 도움말(placeholder)을 제공하는 경우가 많습니다. 모바일 앱 접근성에서는 입력 서식 도움말을 제공한 경우 준수한 것으로 인정하고 있습니다.

다만, 입력 정보를 입력하고 나면 도움말이 사라져 입력 서식의 용도와 목적을 알 수 없게 됩니다. 입력 서식에 도움말로 정보를 입력하고 난 후에도 입력 서식에 대한 용도와 목적을 알 수 있도록 입력 서식 이름(Label)을 제공하는 것이 좋습니다. (PC 웹의 경우 대부분의 스크린리더가 입력 도움말을 인식하지 않기 때문에 반드시 도움말이 아닌 입력 정보 이름(레이블)을 제공해야 합니다.)

입력 정보 이름(label) 및 입력 도움말(placeholder) 제공 기법은 다음 자료에서 확인 할 수 있습니다. 개발시 참고 부탁드립니다.

오류 정정

입력 서식 작성 시, 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공합니다. 오류 메시지 확인 후 오류 정정이 필요한 위치로 초점이 이동하는 것이 좋습니다. 따라서 오류 발생 시 오류 메시지가 입력 서식 보다 앞서 제공되어 초점이 이동하거나 오류 정정이 필요한 위치로 바로 이동하더라도 오류 메시지를 확인할 수 있도록 하는 것이 바람직합니다.

오류 정정 제공 기법은 다음 자료에서 확인 할 수 있습니다. 개발시 참고 부탁드립니다.

다음 그림과 같이 내용을 올바르게 입력하지 않고 버튼을 눌렀을 때 오류 메시지와 함께 입력 서식에 입력한 내용이 모두 사라지는 경우가 있는데요. 입력한 값을 다시 입력해야하는 반복 작업은 사용자에게 불편함을 주게 됩니다.

[잘못된 예]

오류가 발생한 경우에도 입력 서식의 내용을 그대로 유지해 주어야 사용자가 빠르게 서비스를 이용할 수 있습니다. 위에서 언급한 바와 같이 오류 메시지 확인 후 오류 정정이 필요한 위치로 초점이 이동하는 것이 좋습니다.

[바른 예]

2. 입력 서식의 명도 대비

웹과 모바일 공통적으로 화면에 제공되는 모든 콘텐츠를 쉽게 인식할 수 있도록 텍스트의 전경색과 배경색, 의미가 있는 아이콘 이미지의 전경색과 배경색의 명도 대비가 3:1 이상 제공해야 합니다. 입력 서식에서 입력 도움말(placeholder)의 경우 입력 값을 입력하기 전 어떤 값을 입력해야 하는지 도와주는 역할의 텍스트로 일반적으로 흐린 회색으로 많이 처리됩니다. 최근 웹에서도 그렇고 특히나 모바일 같은 경우 화면이 협소하기 때문에 입력 서식의 제목을 제공하지 않고 플레이스 홀더만 제공하는 경우가 많아졌는데요. 이 경우 도움말이 아닌 입력 서식의 제목의 역할을 하고 있기 때문에 해당 정보를 사용자가 명확하기 인지할 수 있어야 하기 때문에 사용자 환경을 고려해 입력 도움말(placeholder)도 명도 대비 3:1 이상 제공하는 것을 권장하고 있습니다.

[바른 예]

"정보 24" 웹사이트에서 제공하고 있는 입력 서식을 보면 입력 서식 제목이 있음에도 입력 도움말의 명도대비를 3:1 이상 제공하고 있습니다.

[바른 사례]

기능의 의미를 담고 있는 아이콘에 대해서도 명도 대비 3:1 이상 제공하는 것이 바람직합니다. 대표적 기능의 의미를 담고 있는 대표적 입력 서식에는 체크 박스, 라디오 버튼, 토글 버튼 등이 있습니다. 체크 박스, 라디오 버튼, 토글 버튼을 인식하지 못해 선택을 못할 수도 있기 때문에 그 기능을 올바르게 인식할 수 있도록 명도 대비를 3:1 이상 제공하는 것이 바람직합니다. 선택 전/선택 후 모두 명도 대비 3:1 이상 제공하는 것을 권장하고 있습니다.

[바른 예]

3. 입력 서식의 색에 무관한 인식

선택 전/후

입력 서식 중 체크 박스의 상태 정보를 색상으로만 구분하는 경우를 많이 봅니다. 색으로만 상태 정보를 구분하게 되면 색맹 사용자가 올바르게 정보를 인식할 수 없게 됩니다.

[잘못된 예]

선택 상태를 사용자가 색 이외 다양한 방법으로 구분할 수 있도록 제공하는 것이 바람직합니다. 색상 이외에 패턴, 크기, 모양 등으로 정보를 구분할 수 있도록 제공해야 합니다. 다음 그림은 아이콘의 굵기를 이용하여 선택 전과 선택 후를 구분한 방법입니다.

[바른 예]

오류 상태

입력 서식에서 오류 내용을 색상으로만 표시하는 경우 색맹 사용자뿐만 아니라 스크린리더 사용자도 오류 내용을 바로 인식할 수 없게 됩니다.

[잘못된 예]

따라서 오류 상태는 색 이외 오류 메시지와 함게 제공하는 것이 바람직 합니다.

[바른 예]

명도 대비와 색에 무관한 인식의 다양한 사례는 다음 자료에서 확인 할 수 있습니다.

4. 입력 서식 초점의 시각화

링크, 버튼, 입력 서식 등 초점을 받은 콘텐츠는 사용자가 이를 인지할 수 있도록 시각적으로 구별이 되어야 합니다. 대부분의 웹 브라우저에서는 기본적으로 키보드 포커스를 시각화하여 제공하고 있습니다. 다음 그림과 같이 포커스가 되었을 때 뚜렷한 굵은 실선으로 나타나기도 합니다.

각 브라우저에서 제공하는 포커스 스타일을 제거해도 되는지에 대해 문의하시는 경우가 많으신데요. 기본 브라우저 스타일을 제거하고 다른 방법으로 제공 하셔도 됩니다. 다만 다음 그림과 같이 포커스의 시각화를 색상으로만 표시하는 경우가 있는데요. (체크 박스 아이콘 테두리 색상만으로 시각화)

[잘못된 예]

색에 무관한 인식 지침에 따라 색맹 사용자가 올바르게 정보를 인식할 수 없게 되기때문에 색이외 패턴을 다르게 구별할 수 있도록 패턴을 다르게 제공해 주는 것이 바람직 합니다. (체크 박스 아이콘 테두리 색상과 굵기로 시각화)

[바른 예]

웹 접근성에서 새로 추가된 지침중 다음 내용을 추가 확인하시면 더욱 좋을 것 같습니다.

(레이블과 네임) 텍스트 또는 텍스트 이미지가 포함된 레이블이 있는 사용자 인터페이스 구성요소는 시각적으로 표시되는 해당 텍스트를 네임에 포함해야 한다. 

(접근 가능한 인증) 인증 과정은 인지 기능 테스트에만 의존해서는 안 된다. 

(반복 입력 정보) 반복되는 입력 정보는 자동 입력 또는 선택 입력 할 수 있어야 한다.