접근성
접근성 (Accessibility)
서로 다른 배경, 관점, 능력을 가진 모든 사람이 동일한 품질의 경험을 누릴 수 있도록 만드는 원칙을 담은 문서예요. Fluent가 WCAG 2.1 AA 기준을 어떻게 충족하고 있는지, 디자인하면서 꼭 지켜야 할 접근성 체크포인트를 정리했어요.
출처: 문서
본문
마이크로소프트의 사명인 "모든 사람이 더 많은 것을 이루도록 돕는다"는 것은 서로 다른 배경, 관점, 능력을 가진 사람들의 경험을 인정하고 고려한다는 뜻이에요. 디자인에서 우리는 배제를 인식하고 시정하며, 한 사람을 위해 해결하고 많은 사람으로 확장하며, 다양성으로부터 배움으로써 이를 실천해요.
다양한 경험을 위한 설계 (Building for diverse experiences)
잘 만들어진 제품은 특정 개인의 능력과 관계없이 모든 사람에게 동일한 품질의 경험을 제공해요. Fluent의 컴포넌트는 접근 가능한 기반을 보장하기 위해 WCAG 2.1 AA 표준을 충족하거나 그 이상을 충족해요. 이 가이드라인을 따라 빌딩 블록으로 접근 가능하고 즐거운 경험을 만들어 보세요.
여기 나열된 체크포인트를 접근 가능한 경험을 만드는 기초적인 가이드라인으로 사용하세요.
구조, 계층, 내비게이션 (Structure, hierarchy, and navigation)
명확한 구조와 계층은 경험을 탐색하는 것을 직관적이고 자연스럽게 만들어요. 사람들이 관계를 보고, 연결을 만들고, 길을 찾을 수 있도록 정보를 논리적이고 예측 가능한 방식으로 구성하세요. 타입 램프와 텍스트 서식, 색상, 구분선, 간격 같은 도구를 사용해 인터페이스 안에 그룹과 중요도 수준을 만들어 보세요.
꿀팁: 스캔 가능한 제목 만들기
크고 굵은 텍스트가 있는 섹션 제목은 시각적 사용자가 효율적인 내비게이션을 위해 정보를 빠르게 스캔하고 이해하는 데 도움이 돼요. 모든 사람의 내비게이션 효율을 높이려면 제목 요소를 논리적인 순서로 사용하세요.
일관된 제목 계층을 사용하세요. 제목 수준을 섞거나 큰 제목을 과하게 사용하지 마세요.
키보드 내비게이션과 보조 기술 (Keyboard navigation and assistive technologies)
사람들이 경험과 상호작용하고 이동하는 다양한 방식을 염두에 두세요. 많은 사람이 페이지를 탐색할 때 키보드를 선택할 거예요. 화면 판독기나 텍스트-점자 같은 보조 기술은 모든 사용자가 우리 제품과 매끄럽게 상호작용할 수 있게 해 줘요.
인터페이스를 디자인할 때 항상 이러한 상호작용을 고려하세요.
꿀팁: 포커스 관리하기
키보드에 의존하는 사용자가 무엇과 상호작용할지 시각적으로 알 수 있게 포커스를 관리하세요. 포커스는 왼쪽에서 오른쪽, 위에서 아래로 "z" 패턴을 따라야 하며, 다이얼로그 같은 임시 UI를 닫은 후에 "잃어버리면" 안 돼요.
색상 (Color)
마이크로소프트 경험의 색상은 WCAG AA 대비 비율을 통과해야 해요. 표준 텍스트는 배경과 최소 4.5:1의 대비 비율을 가져야 해요. 큰 텍스트(18.5픽셀 Bold 이상, 또는 24픽셀 Regular)는 최소 3:1의 대비 비율을 가져야 해요. 대화형 컴포넌트와 비텍스트 컴포넌트(아이콘 등)는 인접한 색상 대비 최소 3:1의 비율을 가져야 해요.
반응형 레이아웃 (Responsive layouts)
사용자는 콘텐츠를 보는 방식에 영향을 주는 다양한 우선순위와 요구사항을 가지고 있어요. 세로 또는 가로 방향, 확대 수준에 대한 선호를 지정할 수 있어요. 애플리케이션은 정보를 잃지 않고 응답하고 콘텐츠를 다시 흐르게(reflow) 해야 해요.
꿀팁: 확대를 고려한 디자인
콘텐츠가 다시 흐르고 최대 400%까지 확대해도 가로 스크롤 없이 표시될 수 있도록 페이지 레이아웃을 디자인하세요. 즉 320픽셀 중단점까지 디자인하는 것을 의미해요. 콘텐츠가 잘리지 않도록 최대 200%까지의 텍스트 확대를 고려해 디자인하세요.
플랫폼 구분 (Platform distinction)
Android 기기의 배율은 제조업체 버전에 따라 다를 수 있어요.
리치 미디어와 대안 (Rich media and alternatives)
사람들은 다양한 방식으로 정보를 배우고 이해해요. 이미지, 그래픽, 비디오를 사용하면 많은 사람, 특히 인지 및 학습 장애가 있는 사람들이 콘텐츠를 더 쉽게 이해할 수 있어요. 또한 시각 장애가 있는 사람들이 콘텐츠에서 자신의 위치를 파악하는 데 사용하는 단서가 될 수도 있어요.
하지만 시각적이나 청각적 정보를 인지할 수 없는 사람들이 같은 콘텐츠를 놓치지 않도록 항상 리치 미디어에 대한 대안을 제공해야 해요.
꿀팁
화면 판독기가 접근할 수 있는 시각적 미디어에 대한 설명적인 alt 텍스트를 제공하세요. 비디오 미디어에 자막을 렌더링할 때는 누구나 자신의 대비 선호도를 설정할 수 있도록 사용자 정의 가능하게 만드세요. 사용자 정의가 불가능하다면 충분한 색상 대비를 제공해야 해요.
의미 있는 텍스트 (Meaningful text)
집중을 위해 설계된 경험을 만들려면 인터페이스를 디자인할 때 도움이 되는 평이한 언어를 사용하세요. 가능한 한 간결하고 일관되며 설명적으로 작성하세요. 모든 문장은 새롭고 의미 있는 것을 전달해야 해요. 자세한 내용은 콘텐츠 디자인 가이드를 따르고 각 컴포넌트의 사용 가이드에 있는 콘텐츠 섹션을 읽어보세요.
꿀팁: 단순하게 유지하기
지나치게 복잡하거나 구체적인 언어를 피하세요. 이렇게 하면 정보를 훑어보기 쉬워지고 영어가 모국어가 아닌 사람들에게도 도움이 돼요.
코드 표준 (Code standards)
포용적 디자인은 첫 번째 와이어프레임부터 마지막 div까지 접근성을 고려한다는 것을 의미해요. 논리적이고 의미 있는 코드를 작성하기 위한 웹 표준을 따르세요. 접근 가능한 경험을 개발하기 위한 상세 가이드는 WAI-ARIA 저작 관행을 참조하세요.
디자인 접근성 스펙 (Design accessibility specs)
디자인 스펙을 만들 때 보조 기술을 사용하는 사람들을 위한 고려 사항을 문서화하는 것은 패딩과 색상만큼 중요해요. 기기 간 의도된 상호작용을 신중하게 고려하고 전달하며, 포커스 순서, 화면 판독기 주석, 의미 구조 같은 요소를 자세히 적어야 해요.
리소스 (Resources)
접근성을 디자인 및 개발 프로세스에 포함하는 방법에 대한 자세한 정보는 다음 리소스를 확인하세요.