텍스트에 색상 말고도 스타일을 다르게 하여 사용자가 구분할 수 있게 만들어야 합니다.
기술설명
이 기술의 목적은 텍스트 색상의 차이를 구별하지 못하는 사용자에게 또 다른 시각적 단서를 제공하는 것입니다.
대부분 문단이나 문장 내에 있는 일부 단어가 특정한 기능을 가지고 있을 때, 이를 특수 문자나 그래픽 등으로 표시하지 못하는 경우 색상을 사용하여 표시를 합니다.
예를 들어 문장에서 한 단어에만 색상이 들어가 있습니다. 이는 해당 단어에 링크가 걸려있다는 의미입니다.
이 기술은 색상 외에도 다른 단서를 제공하여 색상 차이를 구별하지 못하는 사용자가 식별할 수 있게 하는 방법을 설명합니다.
예시
[예시1] 페이지에 두 개의 텍스트 링크가 있습니다. 각각 텍스트의 색상은 다릅니다. 그리고 색상이 없어도 식별할 수 있도록 텍스트에 밑줄을 주었습니다.
[예시2] 서로 다른 마크업 언어를 사용하고 있습니다. 이를 구분하기 위해 텍스트에 서로 다른 색상을 주었습니다.
첫 번째 마크업 언어에는 텍스트에 파란색과 굵기를 주었습니다. 두 번째 마크업 언어에는 텍스트에 빨간색과 기울임을 주었습니다.
[예시3] 뉴스 사이트에서 기사에 대한 링크가 나열 되어 있습니다. 기사가 게재된 섹션, 기사가 게시된 시간, 관련 링크, 라이브 비디오가 있습니다. 기사들에 대한 링크는 다른 링크와 다른 색상을 사용했으며 밑줄이 없습니다. 대신 다른 링크보다 더 큰 테스트 크기를 주어 링크를 더 잘 식별할 수 있게 하였습니다.
[예시4] 짧은 기사의 경우, 내용을 더 자세히 볼 수 있는 페이지로 이동하는 링크가 제공됩니다.
이런 링크의 텍스트에는 색상과 다른 서체가 적용됩니다.
관련기술
G14: 색상 차이로 전달되는 정보가 텍스트에서도 사용 가능한지 확인
G205: 색상이 있는 양식 제어 레이블에 대한 텍스트 큐 포함
G183: 주변 텍스트와 3:1의 대비율을 사용하고 색상만으로 식별하는 링크나 컨트롤에 대한 초점에 추가 시각적 단서를 제공합니다.
점검절차
1. 텍스트 색상으로 정보를 전달하는 부분을 모두 찾습니다.
2. 색상으로 정보를 전달하는 모든 텍스트에 스타일이 지정되어 있거나, 다른 주변 텍스트와 시각적으로 구분되는 서체를 사용하고 있는지 확인합니다.
나의 정리
텍스트에 색상을 주어 정보를 전달하는 경우가 있습니다. 예를 들어 페이지 내에서 모든 텍스트가 검은색인데 몇 개의 단어 색상이 파란색입니다. 이는 파란색을 이용하여 해당 텍스트에 링크가 적용되었다는 정보를 제공하는 것입니다.
링크 말고도 인용이나 문단을 구분하기 위해 텍스트에 색상을 주는 경우가 있습니다.
이 방법의 단점은 색맹이나 색상을 구분하지 못하는 사용자들에게는 소용이 없다는 것입니다.
그래서 해당 텍스트를 색상만이 아니라 다른 것을 이용하여 구분 되게 만들어야 합니다.
다른 텍스트보다 굵게 하거나 밑줄 또는 기울임을 주는 것입니다.
다른 방법으로는 다른 서체를 사용하거나 글자 크기를 더 크게 적용하기도 합니다.
이렇게 하면 색상이 모두 동일하게 보인다 해도 모양이 다르기 때문에 구분할 수 있게 되는 것입니다.
G182: Ensuring that additional visual cues are available when text color differences are used to convey information
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G182.html
G182: Ensuring that additional visual cues are available when text color differences are used to convey information | Techniques
The intent of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color. Color is commonly used to indicate the different status of words that are part of a paragraph or other block of text or w
www.w3.org
공짜로 혼자서도 할 수 있는 웹퍼블리싱 공부 방법을 알려드립니다.
홈페이지 만들기, 혼자하기 힘들다면 무로 스터디에 들어오세요.
공부 방향을 모르겠다면 무료 과외를 신청하세요.
https://blog.naver.com/redoxup/223134941372
혼자서 웹퍼블리싱(HTML+CSS)입문과정 마스터 할 수 있다! + 도움을 받으면 더 잘 할 수 있다!!
웹디자이너, 웹퍼블리셔, 웹프로그램을 준비하시는 분들이라면, 다른 건 몰라도 HTML+CSS 입문과정...
blog.naver.com
