일반적인 시각적 접근성 오류 발견 및 수정
사용자에게는 다양한 시각적 기능이 있습니다. 색맹인 사용자는 색을 구별하지 못하거나 비슷한 색상을 작업하는 데 어려움을 겪을 수 있습니다. 다른 사용자는 확대/축소를 사용하여 콘텐츠를 확대할 수 있습니다. 다양한 시각적 기능 수용은 접근성의 중요한 부분입니다.
이 예와
적절한 대비를 보장하면 모든 사용자가 텍스트 콘텐츠를 읽고, 그래픽 요소를 해석하고, UI 구성 요소를 식별하고, 해당 구성 요소 상태가 변경되는 시기를 쉽게 알 수 있습니다. 시력이 낮은 사용자들은 텍스트를 읽거나, 배경과 대조되지 않는 단추를 식별하거나, UI 구성 요소의 상태를 확인하는 데 어려움을 겪는 경우가 많습니다. 인지 대비를 크게 떨어트리는 색각 이상이 있는 사람의 경우 문제가 악화될 수 있습니다.
다행히 대비 비율을 프로그래밍 방식으로 확인할 수 있습니다. Web용 Accessibility Insights에서 FastPass 도구를 사용하여 대비 검사 수행할 수 있습니다.
색상
색은 웹 디자인의 중요한 부분이지만 사람마다 색이 조금씩 다르게 보인다는 점에 유의해야 합니다. 어떤 사람에게는 이것이 색맹으로 연결됩니다. 약 12명 중 1명이 색맹입니다. 적녹색맹, 청황색맹 등 여러 종류의 색맹이 있습니다.
뿐만 아니라 색을 사용하여 눈의 피로를 최소화하거나, 색 충실도가 낮은 디스플레이를 사용하거나, 색 인식을 어렵게 만드는 조명에서 작업하는 사용자도 있습니다.
이전 연습에서는 색 비전이 필요하지 않도록 웹 애플리케이션을 디자인해야 한다는 것을 배웠습니다.
FastPass 자동화된 테스트 외에도 다양한 색맹을 가진 사용자에게 사이트가 표시되는 방식을 검사 수 있습니다. Windows 및 macOS에 기본 제공되는 색 필터를 사용합니다.
확대/축소
웹 사이트는 거대한 4K 모니터에서 아름답게 보입니다... 그러나 모든 사용자가 동일한 방식으로 경험한다는 것을 의미하지는 않습니다. 텍스트를 읽기 위해 200%까지 확대하는 사용자도 있고, 모바일 디바이스에서 읽는 사용자도 있습니다.
웹 브라우저는 텍스트 스케일링에 적합합니다. 부트스트랩은 화면 크기에 따라 스케일링되는 반응형 디자인을 용이하게 하기 위해 설계되었습니다. 디자인을 최대한 간단하게 유지하고, 디자인된 대로 웹을 사용하고, 다양한 디스플레이와 다양한 확대/축소 수준에서 사이트를 테스트해야 합니다.
다음 연습에서는 피자 레스토랑의 웹 사이트에서 시각적 접근성 문제를 찾아서 해결합니다.