접근성을 위해 디자인하기
접근성을 위해 디자인하기
접근성 가이드라인에서 설명한 것처럼, 사용자는 다양한 보조 기술로 제품과 상호작용할 수 있어요. 접근성을 위한 개발뿐 아니라 제품의 시각적 디자인에도 접근성을 통합해야 합니다.
본문
색상과 대비
색상과 대비는 시각적 디자인 접근성에 있어서 함께 가는 요소예요.
예를 들어 색 지각 결핍(색맹)의 영향을 흔히 받는 색상(W3C의 "Overview of Low Vision"에서 설명한 것 같은)을 사용할 때 대비를 고려해야 해요. UI의 서로 다른 색상은 색 지각 결핍 스펙트럼 전반의 사용자가 구분할 수 있어야 하며, 일반적으로 각 색상이 서로 다른 대비 가중치를 갖도록 해서 이를 보장해요.
대비를 염두에 두고 디자인하는 것은 빛에 민감한 사용자에게도 혜택을 줍니다.
PatternFly 컴포넌트는 색상 대비 테스트를 통과하도록 색상 팔레트를 사용해요. 여러분이 권장사항을 따르기만 하면, PatternFly 컴포넌트로 만든 UI는 색상 간에 적절한 대비를 가지며, 다양한 유형의 색 지각과 빛 민감성을 가진 사용자도 구분할 수 있어요.
정보를 전달할 때 색상에만 의존하지 않는 것이 중요해요. PatternFly 컴포넌트는 색상 대비 테스트를 통과하지만, 식별을 더 잘 돕기 위해 아이콘도 사용하며, 이는 특히 어떤 형태의 색맹이 있는 사용자에게 도움이 될 수 있어요.
권장사항을 넘어 PatternFly 색상을 다른 방식으로 결합한다면, 대비 체커로 색상 대비를 반드시 확인하세요. PatternFly 컴포넌트에 사용된 색상 및/또는 아이콘을 변경하면, 그것들이 더 이상 모든 사용자에게 접근 가능하지 않을 수 있다는 점을 알아두세요.
콘텐츠
UI의 텍스트도 저시력 사용자에게 접근 가능해야 해요. 예를 들어 링크는 서술적이고 간결해야 하며, 필수 콘텐츠가 UI에 숨겨져서는 안 되고, UI 창의 크기가 조정되거나 확대됨에 따라 텍스트가 적절히 확대되어야 해요.
사용자가 콘텐츠를 처리하는 방식을 단순화하고 강화하려면 텍스트 크기·글꼴·자간·여백·간격을 신중히 고려하는 것이 중요해요. PatternFly는 타이포그래피와 간격 가이드라인을 통해 이러한 영역의 접근성을 지원합니다.
저시력 이해하기
앞선 권장사항을 따르는 것 외에, 저시력 사용자에 대한 이해를 키우는 것도 도움이 돼요. 그래야 디자인할 때 그들의 요구가 핵심 관심사가 될 수 있으니까요.
저시력(low vision)이란 안경·콘택트렌즈·약물·수술로 교정할 수 없는, 일상적인 작업을 수행하는 능력을 방해하는 모든 시각 장애를 말해요.
저시력으로 인한 제한에는 4가지 유형이 있어요.
- 시력(Visual acuity): 사람의 시력 선명도를 측정한 것으로, 20/20이 표준이에요.
- 시야(Field of vision): 눈을 고정된 위치에 뒀을 때 사람들이 선명하게 볼 수 있는 시야 영역이에요. 일부 사용자는 중심 또는 주변 시야 상실 같은 제한된 시야를 가져요.
- 색 지각(Color perception): 사람들이 색을 보는 방식이에요. 일부 사용자는 특정 색상을 보는 능력에 영향을 주는 색 지각 결핍이 있을 수 있어요. 흔히 "색맹"이라고 부르지만, 색 지각 결핍이 있는 많은 사람은 여전히 대부분의 색상을 볼 수 있어요.
- 대비와 빛 민감성(Contrast and light sensitivity): 사람들이 휘도(전경과 배경의 대비)를 지각하는 방식이에요.
우리는 PatternFly를 기본적으로 저시력 사용자에게 접근 가능하게 만들기 위해 최선을 다하지만, 최종 디자인이 적절한 색상·대비·콘텐츠 접근성을 갖도록 이 요구들을 의식적으로 염두에 두고 디자인하는 것이 중요합니다.