다양한 능력과 환경의 사용자들이 모두 동일한 품질의 서비스를 이용할 수 있도록 접근성 지침을 준수합니다.
Overall
접근성을 준수한 디자인은 장애가 있는 사용자 뿐 아리나 모든 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다. 이를 구현하기 위해 WCGA 2.1 조항을 근거하여 다음의 기본 원칙을 정의합니다.
•
모든 사용자에게 동일한 품질의 경험을 제공합니다.
•
사용자와 환경에 적응하도록 구현합니다.
Target
접근성 디자인은 다음의 사용자를 고려해야 합니다.
•
시각 장애 사용자
•
저시력 사용자
•
색맹 사용자
•
청각 장애 사용자
•
신체 장애 사용자
•
인지 장애 사용자
Guidelines
모든 디자인에는 다음의 지침을 우선하여 적용합니다.
•
모든 시각 정보는 텍스트로 번역이 가능해야 합니다.
•
정보가독성과 시각적 명확성을 극대화 합니다.
•
페이지 확대에 따른 화면 변화를 고려합니다.
•
모든 시각적 표현은 정의된 컬러 팔레트에 기반합니다.
•
동영상 등 소리가 주 정보 전달의 도구인 경우에는 자막을 함께 제공합니다.
•
자동 재생, 깜빡이는 애니메이션 등 인지부하를 일으키는 요소를 최대한 배제합니다.
•
가능한 선형으로 디자인합니다.
Usage
계층구조
명확하고 일관된 계층구조는 링크나 헤더를 이용하여 페이지를 탐색하는 사용자에게 유용합니다.
헤딩(Heading) 및 타이틀을 사용하여 페이지의 섹션이 어떻게 연관되어 있는지 알려줄 수 있습니다.
예측 가능한 구조와 함께 사용자에게 친숙한 패턴 및 레이아웃을 사용하여 인지 부하를 최소화하고 중요한 정보를 인터페이스 요소 안에 감추어 놓지 않습니다.
페이지의 콘텐츠는 중요한 순서대로 배치하여 사용자들이 찾아 나서지 않게 합니다.
또한 키보드 등 사용자가 대체 입력 방법을 이용하여 페이지를 이동할 수 있도록 일관된 계층(hierarchy)을 작성하고 유지해야 합니다. 헤딩과 타이틀은 레벨을 건너뛰지 않고 순서대로 나열합니다.
일관된 계층 구조와 친숙한 레이아웃, 예측 가능한 패턴으로 제공합니다.
명확한 그룹화
아이템을 그룹화 할 때는 비슷한 아이템끼리 해야 합니다. 그룹의 내용을 명확히 알릴 수 있는 타이틀로 표시합니다.
서로 연관이 있는 아이템끼리 그룹화하여 사용자의 인지를 돕습니다.
대체 수단 제공
마우스를 사용할 수 없는 사용자들을 고려하여 키보드와 스크린 리더로 각 아이템간, 페이지간 이동과 탐색이 가능하도록 설계합니다.
•
현재 사용자의 위치, 키보드의 포커스 위치 전달
•
논리적인 흐름에 따라 포커스가 이동할 수 있도록 각 컨테이너, 아이템에 tabindex 부여
•
입력 포커스를 사용할 때, 이벤트가 호출이나 메시지를 표시하는 트리거 작동을 하지 않도록 합니다.
•
상태 변경 전의 모든 컨트롤을 탐색할 수 있어야 합니다.
•
포커스의 이전 위치를 기억해야 합니다.
•
툴팁은 키보드 포커스로 활성화 되어야 합니다.
•
피드백을 받기 위해 따로 이동하지 않도록 인증 폼(validate)의 피드백은 인라인으로 제공합니다.
링크
링크 텍스트는 링크가 이동하는 위치를 나타내야 합니다. 링크에 대한 자세한 정보를 제공하면 사용자가 링크 대상에 대한 맥락을 파악하여 인지 부하를 최소화 할 수 있습니다.
텍스트에 링크를 걸 때는 해당 링크가 어디로 이동하는지 식별 가능하도록 제공합니다.
이미지
중요한 정보를 전달할 때는 가급적 이미지 보다는 텍스트를 사용합니다.
•
텍스트에 대한 설명을 도와주는 용도의 이미지를 추가하여 사용할 수 있습니다.
•
모든 이미지에는 대체 텍스트를 입력하여 스크린 리더가 이미지에 대한 설명을 읽을 수 있게 합니다.
•
이미지의 이동이나 깜빡거림 등의 효과의 사용을 지양합니다.
대비
WCGA SC 1.4.3 조항에 따른 색상 대비 비율을 준수합니다.
•
표준 텍스트 및 텍스트 이미지는 최소 4.5:1의 명암비를 가져야 합니다.
•
24px 이상 light/regular, 19px 이상의 semi bold 폰트는 최소 3:1 의 명암비를 가져야 합니다.
•
그라디언트(Gradient) 효과의 배경이나 이미지에서 텍스트를 표현할 때는 모든 화면에서 텍스트의 명암비를 확인하고 조정해야 합니다.
•
UI 구성요소의 상태나 경계를 나타내는 시각적 정보는 인접한 컬러에 대해 3:1의 명암비를 가져야 합니다.
색상 대비는 사용성에 큰 영향을 미칩니다.
3:1 이상을 반드시 준수해야 합니다.
