명확한 지시 사항 - by. UXKM

요약 설명

관련 지침 : 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
명확한 지시 사항은 사용자가 앱을 사용하면서 필요한 작업을 쉽게 이해하고 수행할 수 있도록 돕는 지침입니다. 지시 사항은 단순하고 이해하기 쉬운 언어로 작성되며, 행동을 유도할 때에는 구체적으로 어떤 조치를 해야 하는지 설명해야 합니다.
버튼, 링크, 입력 필드, 경고 메시지와 같은 UI 요소에 대한 명확한 설명과 안내를 제공하여 사용자들이 앱을 쉽게 탐색하고 기능을 활용할 수 있도록 합니다.

WCAG 2.2 Quick Reference - Label in Name

필요성

명확한 지시 사항은 모든 사용자가 작업을 이해하고 수행할 수 있도록 돕습니다. 지시 사항이 불분명하면 사용자는 필요한 정보를 놓치거나 오류를 범할 수 있습니다. 특히, 시각 장애인이나 인지 장애가 있는 사용자들은 텍스트와 안내의 의미를 쉽게 이해할 수 있어야 하며, 이를 통해 접근성을 보장할 수 있습니다.

대상

  • 시각 장애인

    스크린 리더를 사용하는 사용자.

  • 인지 장애인

    복잡한 정보를 이해하기 어려운 사용자.

  • 고령 사용자

    시력이 저하되거나 빠르게 정보를 처리하기 어려운 사용자.

  • 비장애인 포함 전체 사용자

    명확하고 일관된 지시 사항을 통해 작업을 더 빠르고 쉽게 수행할 수 있는 사용자.
    (접근성이 잘 구현된 앱은 모든 사용자가 더 나은 사용자 경험을 할 수 있도록 도와줍니다.)

체크리스트

  • 지시 사항의 명확성

    모든 지시 사항이 구체적이고 이해하기 쉬운 언어로 작성되었는가?

  • 라벨과 설명의 일관성

    버튼, 링크, 입력 필드 등의 라벨과 설명이 일관되게 사용되었는가?

  • 에러 메시지의 명확성

    에러 메시지가 사용자가 문제를 이해하고 해결할 수 있도록 충분히 설명되었는가?

  • 스크린 리더 호환성

    스크린 리더를 사용할 때 지시 사항이 잘 전달되고 있는가?

기기별 테스트 방법

iOS

  • VoiceOver 사용

    지시 사항이 VoiceOver를 통해 명확히 전달되는지 테스트합니다.

  • 폰트 크기 및 색상 대비 설정

    지시 사항이 모든 접근성 설정에서도 읽기 쉬운지 확인합니다.

Android

  • TalkBack 사용

    지시 사항이 TalkBack을 통해 명확하게 전달되는지 테스트합니다.

  • 고대비 모드 테스트

    고대비 모드에서 지시 사항이 잘 보이는지 확인합니다.

QA 지표

  • 지시 사항 명확성 점수

    사용자 테스트를 통해 지시 사항의 명확성을 평가.

  • 에러 메시지 정확성 비율

    제공된 에러 메시지가 문제를 설명하고 해결 방법을 제시하는 비율.

  • 스크린 리더 적합성

    스크린 리더를 사용했을 때 지시 사항이 잘 인식되고 전달되는지 여부.

개발방법

네이티브

iOS

  • UILabel과 UIButton의 접근성 속성 설정
  • 에러 메시지 제공

Android

  • Button의 접근성 속성 설정
  • 에러 메시지 제공

하이브리드

하이브리드(html)

  • 버튼에 aria-label 설명 추가
  • 에러 메시지 제공

하이브리드(Vue)

버튼에 aria-label 설명 추가

하이브리드(React)

버튼에 aria-label 설명 추가

점검 기준

오류유형

  • 모호한 지시 사항 : "여기를 클릭하세요"와 같이 구체적이지 않은 표현 사용.
  • 일관성 없는 라벨 : 같은 기능을 하는 요소가 화면마다 다른 라벨로 제공되는 경우.
  • 부족한 에러 메시지 정보 : "오류 발생"과 같이 구체적인 이유나 해결 방법이 없는 메시지.
  • 스크린 리더 호환성 부족 : 스크린 리더로 지시 사항이 제대로 읽히지 않거나 전달되지 않는 경우.
  • 색, 크기, 모양, 방향 등으로만 정보를 제공한 경우
  • 전달하고자 하는 지시사항을 소리로만 정보를 제공한 경우

주의사항

  • 구체적인 지시 사항 사용 : "파일을 선택하려면 '파일 업로드' 버튼을 클릭하세요"와 같이 구체적으로 작성합니다.
  • 일관된 라벨 사용 : 같은 기능을 하는 버튼이나 링크는 동일한 라벨을 사용해야 합니다.
  • 에러 메시지 개선 : 사용자가 문제를 해결할 수 있도록 구체적인 지침을 제공합니다(예: "비밀번호는 최소 8자 이상이어야 합니다").
  • 스크린 리더 테스트 수행: 개발 중 스크린 리더를 사용하여 라벨과 설명이 명확히 전달되는지 확인합니다.
  • 노인이나 약시자의 경우에 브라우저의 글자체를 확대시켜 콘텐츠를 표시하면 콘텐츠의 표시 위치가 지시하는 위치와 달라져 혼란을 줄 수 있으므로 가급적 위치 정보를 이용하여 지시하지 않도록 콘텐츠를 구현하는 것을 권장합니다.

점검 방법

페이지를 구성하는 컨트롤이 특정 요소만으로 지시하거나 표현하는지 점검합니다. (대체 수단 없이 음성 또는 음향으로 지시사항을 전달하는 경우 포함)

특정요소로만 지시를 하는 사례

  • 방향, 위치 정보로만 이용하는 사용법을 알려주는 경우
  • 화면의 위치만으로 객체를 지정하는 경우
  • 버튼의 모양만을 이용하여 사용법을 알려주는 경우
  • 음성으로만 지시하는 경우 등

iOS

  • VoiceOver 사용

    iOS의 VoiceOver 기능을 켜고, 지시 사항이 음성으로 명확하게 전달되는지 테스트합니다. 버튼, 입력 필드, 에러 메시지 등에서 올바른 라벨과 설명이 전달되는지 확인합니다.
    예시) iPhone의 설정 > 손쉬운 사용 > VoiceOver를 켜고, 앱에서 버튼을 클릭할 때 "신청서 제출 버튼"이라는 지시 사항이 VoiceOver에서 출력되는지 확인합니다.

  • 폰트 크기 및 색상 대비 설정

    설정에서 폰트 크기를 크게 설정하거나 색상 대비(고대비)를 활성화한 후, 지시 사항이 여전히 명확하게 보이는지 확인합니다.
    예시) 설정 > 손쉬운 사용 > 디스플레이 및 텍스트 크기에서 '더 굵게', '투명도 줄이기' 등을 적용하여 텍스트 가독성을 확인합니다.

Android

  • TalkBack 사용

    Android의 TalkBack 기능을 켜고, 버튼, 링크, 입력 필드 등에 올바른 지시 사항이 음성으로 전달되는지 확인합니다.
    예시) Android 설정 > 손쉬운 사용 > TalkBack을 켜고, 앱에서 버튼을 클릭할 때 "신청서 제출 버튼"이라는 설명이 TalkBack으로 읽히는지 테스트합니다.

  • 고대비 모드 테스트

    Android에서 색상 반전 또는 고대비 텍스트 설정을 활성화한 후, 앱에서 지시 사항이 명확하게 보이는지 테스트합니다.
    예시) 설정 > 손쉬운 사용 > 색상 반전 또는 고대비 텍스트 활성화 후, UI 요소들이 충분히 가독성이 있는지 확인합니다.

HTML

  • 스크린 리더 사용

    PC에서 스크린 리더(NVDA, JAWS 등)를 사용하여 웹 페이지에서 버튼, 링크, 입력 필드의 접근성 라벨이 명확하게 전달되는지 확인합니다.
    예시) NVDA 스크린 리더를 실행하고, 버튼을 클릭할 때 "신청서 제출 버튼"이라는 음성 피드백이 올바르게 출력되는지 확인합니다.

  • 색상 대비 도구 사용

    Chrome의 DevTools 또는 Axe와 같은 자동화 접근성 도구를 사용하여 색상 대비 및 접근성 라벨 설정이 잘 되어 있는지 점검합니다.
    예시) DevTools > Audits에서 접근성 분석을 실행하여 색상 대비 및 라벨 적절성을 확인합니다.

Vue

  • 스크린 리더 사용

    Vue.js로 개발된 웹 애플리케이션에서도 NVDA 또는 VoiceOver 같은 스크린 리더를 사용해 지시 사항과 라벨이 적절하게 전달되는지 점검합니다.
    예시) Vue.js 컴포넌트에서 aria-label 속성이 올바르게 설정되어 있는지, 스크린 리더로 확인합니다.

  • Vue 접근성 플러그인 사용

    Vue.js용 접근성 플러그인을 설치하여 자동으로 접근성 문제를 탐지하고 수정할 수 있는 방법도 사용합니다.

React

  • 스크린 리더 및 자동화 도구 사용

    React로 개발된 애플리케이션에서는 NVDA와 같은 스크린 리더와 함께 Lighthouse 또는 Axe 같은 접근성 도구로 점검합니다.
    예시) React 컴포넌트의 접근성 속성이 제대로 설정되었는지 확인하고, 접근성 오류가 있는지 Lighthouse로 분석합니다.

  • React 접근성 개발자 도구

    React 개발자 도구를 사용해 컴포넌트별로 접근성 라벨과 속성이 올바르게 설정되었는지 확인합니다.

준수 사례

사례 1) 지시사항을 명확하게 제공한 경우

[출처 : 모바일 애플리케이션 접근성 제작기법]

사례 2) 자동 가입 방지를 위한 인증 도구의 하나로 캡챠(captcha)를 사용

캡챠의 지시사항이 "팝콘이 있는 이미지를 모두 선택하세요"와 같이 시각에만 의존하고 있어, 시각 장애가 있는 사용자는 이를 인식하고 수행하기 어렵습니다.
이런 경우, 대체 수단을 제공하는 것이 바람직하며, 이 애플리케이션에서는 오디오 서비스를 통해 이를 해결하고 있습니다.

[출처 : 모바일 애플리케이션 접근성 제작기법]

미준수 사례

사례 1) 색, 크기, 모양, 방향 등으로만 정보를 제공한 경우

'여기서 확인하세요!' 텍스트로 방향으로만 정보를 제공하고 있습니다.

[출처 : 모바일 애플리케이션 접근성 제작기법]

사례 2) 텍스트에 링크 포함 시 스크린 리더로 링크 위치 인식 어려움

텍스트 안에 링크나 버튼을 넣지 않아야 합니다. 아래 예와 같이 텍스트에 링크가 포함된 경우, 스크린 리더는 텍스트를 빠르게 읽어 내려가기 때문에 시각장애인은 화면의 레이아웃을 파악하기 어려워 링크 위치를 정확히 인식하기 힘듭니다.

[출처 : 모바일 애플리케이션 접근성 제작기법]

관련 영상

접근성 테스트 도구 활용 점검방법

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

  • 접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
  • 접근성 체크리스트 작성
  • 접근성 자동 및 수동 검사(스크린리더) 진행
  • 접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
  • 접근성 사용자 테스트
  • 접근성 정기적인 모니터링