웹 접근성 준수 지침 - 인식의 용이성 - 3. 색에 무관한 콘텐츠 인식

콘텐츠는 색에 관계없이 인식될 수 있어야 한다. 이는 색각 이상자(색맹)나 시각 장애가 있는 사용자들이 콘텐츠를 완벽하게 이해하고 이용할 수 있도록 돕는 중요한 접근성 요소입니다.

1) 차트

차트는 데이터를 시각적으로 표현할 때 매우 유용하지만, 색상에만 의존하는 경우 색각 이상자가 정보를 해석하기 어려울 수 있습니다. 차트에서 색상 외에도 다양한 표시 방법을 사용하여 정보를 전달해야 합니다.

예시:

• ❌ 잘못된 예시: “파란색 막대는 판매량을, 빨간색 막대는 수익을 나타냅니다.”
• ✅ 올바른 예시: “파란색 막대(점선 패턴)는 판매량을, 빨간색 막대(대각선 줄무늬)는 수익을 나타냅니다.” 이렇게 색상 외에도 패턴이나 레이블을 추가해 정보를 제공해야 합니다.

추가 팁:

• 데이터 포인트에 레이블을 추가하여 값을 명확히 표시합니다.
• 패턴, 라인 스타일, 도형 등을 사용하여 다른 요소를 시각적으로 구분합니다.

2) 슬라이드 버튼 선택 여부

슬라이드 버튼이나 토글 버튼의 선택 여부를 색상만으로 표시하는 것은 문제를 일으킬 수 있습니다. 대신, 텍스트, 아이콘, 패턴 등을 사용하여 선택 상태를 명확히 해야 합니다.

예시:

• ❌ 잘못된 예시: “초록색이면 활성화, 회색이면 비활성화입니다.”
• ✅ 올바른 예시: “초록색(활성화됨) 또는 체크 마크 아이콘, 회색(비활성화됨) 또는 ‘x’ 아이콘으로 표시됩니다.”

추가 팁:

• “활성화됨” 또는 “비활성화됨”과 같은 텍스트 라벨을 추가합니다.
• 시각적 요소 외에 화면 리더가 읽을 수 있는 ARIA 속성을 사용하여 상태를 명확히 합니다.

3) 페이지네이션

페이지네이션(페이지 넘김)은 사용자가 현재 보고 있는 페이지와 다른 페이지를 쉽게 구분할 수 있어야 합니다. 색상만으로 현재 페이지를 표시하는 것은 접근성을 저해할 수 있습니다.

예시:

• ❌ 잘못된 예시: “현재 페이지는 파란색으로 표시됩니다.”
• ✅ 올바른 예시: “현재 페이지는 파란색으로 표시되며, 현재 페이지 번호에 밑줄이 그어져 있습니다.”

추가 팁:

• 현재 페이지를 텍스트로 명확히 표시합니다(예: "현재 페이지: 3").
• 시각적 구분을 위해 굵은 텍스트나 모양 변화를 사용합니다.

4) 탭 버튼 선택 여부

탭 버튼의 선택 여부를 색상만으로 표시하는 것은 문제를 일으킬 수 있습니다. 선택된 탭과 선택되지 않은 탭을 시각적으로 명확히 구분해야 하며, 색상 외에도 텍스트, 아이콘, 패턴 등을 사용해야 합니다.

예시:

• ❌ 잘못된 예시: “선택된 탭은 빨간색으로 표시됩니다.”
• ✅ 올바른 예시: “선택된 탭은 빨간색으로 표시되며, 굵은 글씨로 강조되어 있습니다.”

추가 팁:

• ARIA 속성을 사용하여 화면 리더 사용자에게 선택된 탭을 알립니다.
• 탭에 대해 텍스트 강조(굵게, 밑줄 등)를 사용하여 선택 상태를 표시합니다.

이와 같이, 색에 무관한 콘텐츠 인식은 접근성을 높이는 중요한 방법입니다. 색상 외에도 다양한 방법으로 정보를 전달함으로써 모든 사용자가 콘텐츠를 완전히 이해하고 사용할 수 있도록 해야 합니다.