WCAG 2.1
  • 모두를 위한 디자인
  • 웹 콘텐츠 접근성 가이드라인
  • WCAG 2.1에 추가된 지침, 성공기준
  • 1. 인식
    • 1.1 대체 텍스트
    • 1.2 시간 기반 미디어
    • 1.3 적응성
    • 1.4 명료성
  • 2. 운용
    • 2.1 키보드 접근
    • 2.2 충분한 시간 제공
    • 2.3 발작 예방
    • 2.4 탐색 가능
    • 2.5 입력 양식
  • 3. 이해
    • 3.1 가독성
    • 3.2 예측 가능성
    • 3.3 입력 도움
  • 4. 견고
    • 4.1 호환성
  • WCAG 2.0 (번역)
  • WAI 접근성 튜토리얼
  • 레퍼런스
Powered by GitBook
On this page
  • 1.4.1 컬러 활용 (A)
  • 1.4.2 오디오 컨트롤 (A)
  • 1.4.3 대비 (AA)
  • 1.4.4 텍스트 크기 조정 (AA)
  • 1.4.5 이미지 텍스트 (AA)
  • 1.4.6 향상된 대비 (AAA)
  • 1.4.7 작거나, 배경음악 아님 (AAA)
  • 1.4.8 시각적 표현 (AAA)
  • 1.4.9 이미지 텍스트: 예외 X (AAA)
  • 1.4.10 리플로우 (AA)
  • 1.4.11 비 텍스트 명도대비 (AA)
  • 1.4.12 텍스트 간격 (AA)
  • 1.4.13 콘텐츠 포커스/호버 (AA)
  1. 1. 인식

1.4 명료성

사용자가 콘텐츠를 보고 들을 수 있도록 명확하게 구분할 수 있어야 합니다.

Previous1.3 적응성Next2. 운용

Last updated 6 years ago

1.4.1 컬러 활용 (A)

색상 만으로 정보 전달, 행동을 지시하고, 반응을 유발하고, 시각적 요소를 식별하는 시각적인 용도로 사용하면 안됩니다.

이 가이드라인은 특별히 색상의 인식에 대해 다룹니다. 색상 및 기타 시각적 표현 코딩에 대한 프로그래밍 방식의 접근을 포함하여 에서 다른 형태의 인식으로 다루어집니다.

1.4.2 오디오 컨트롤 (A)

3초 이상 자동으로 웹 페이지가 오디오를 출력한다면, 오디오 재생을 일시정지 하거나 멈추게 하는 기능 또는 오디오 볼륨을 조절할 수 있는 기능을 제공해야 합니다.

1.4.3 대비 (AA)

텍스트 또는 이미지 텍스트의 시각적인 표현은 다음 예외사항을 제외하고 명도 대비 차는 최소 4.5:1이 되어야 합니다.

  • 큰 텍스트 24px 이상 또는 18px Bold 텍스트의 경우 3:1 명도 대비 차까지 허용합니다.

  • 로고타입(Logotypes) 로고나 브랜드의 텍스트는 최소한의 명도 대비 요구가 없습니다.

1.4.4 텍스트 크기 조정 (AA)

캡션 및 이미지 텍스트를 제외하고, 텍스트는 콘텐츠와 기능의 손실없이 200% 이상 보조기술 없이 크기 조정이 가능해야 합니다.

1.4.5 이미지 텍스트 (AA)

시각적인 표현을 성취할 수 있는 기술들이 사용될 때, 텍스트는 다음을 제외하고 이미지의 텍스트 보다 많은 정보를 전달할 수 있어야 합니다.

  • 맞춤 설정 가능 (Customizable) 이미지 텍스트는 사용자의 요구에 따라 시각적으로 사용자가 조정 가능해야 합니다.

  • 필수 (Essential) 텍스트의 특정한 표현은 정보가 전달될 때 필수입니다.

로고 타입 (로고 또는 브랜드 이름의 일부인 텍스트)은 필수적인 것으로 간주됩니다.

1.4.6 향상된 대비 (AAA)

텍스트 또는 이미지 텍스트의 시각적인 표현은 다음 예외사항을 제외하고 명도 대비 차는 적어도 7:1이 되어야 합니다.

  • 큰 텍스트 24px 이상 또는 18px Bold 텍스트의 경우 4.5:1 명도 대비 차까지 허용합니다.

  • 중요하지 않은 비 활성화된 UI 컴포넌트 텍스트나 이미지의 텍스트, 순수한 표현 장식, 보이지 않는 콘텐츠, 중요한 다른 시각적인 콘텐츠를 포함하는 그림은 별도의 명도 대비 요구가 없습니다.

  • 로고타입(Logotypes) 로고나 브랜드의 텍스트는 최소한의 명도 대비 요구가 없습니다.

1.4.7 작거나, 배경음악 아님 (AAA)

일반 오디오(예: 사용자가 의도를 가지고 재생한 음성) 이거나, 오디오 CAPTCHA 또는 로고 송이 아니고, 노래 또는 랩과 같이 가사를 제공하는 음악 표현이 아닌, 사전 녹음된 오디오 전용 콘텐츠의 경우 배경음악이 아닙니다.

  • 배경음악이 아님 배경음악을 포함하지 않는 오디오입니다.

  • 오디오 끄기 배경음악을 끌 수 있습니다.

  • 20데시벨(dB) 배경음악의 데시벨 강도가 20dB 보다 작습니다.

데시벨(dB) 정의에 따라 이 요구 사항을 충족하는 배경 사운드는 일반 음성 콘텐츠(예: 스크린 리더) 보다 약 4배 정도 조용해야 합니다.

1.4.8 시각적 표현 (AAA)

텍스트 블록을 시각적으로 표현하기 위해 다음과 같은 메커니즘을 사용할 수 있습니다.

  1. 전경색과 배경색은 사용자가 선택할 수 있어야 합니다.

  2. 너비는 80 글자나 글리프 (CJK의 경우 40자)를 넘으면 안됩니다.

  3. 텍스트는 양쪽정렬이 아니어야 합니다. (왼쪽과 오른쪽 여백에 양 정렬 됨)

  4. 행간(단락 사이 간격)은 적어도 글자 높이의 1.5배 이상 되어야 합니다.

  5. 전체화면에서 콘텐츠를 읽거나, 기능을 사용하는데 문제가 없도록, 보조기술 없이 200% 확대 하더라도 가로 방향으로 스크롤이 생기면 안됩니다.

1.4.9 이미지 텍스트: 예외 X (AAA)

이미지 텍스트는 순수 장식용 또는 텍스트의 특정 표현이 전달되는 정보에 필수적인 경우에만 사용됩니다.

로고 타입 (로고 또는 브랜드 이름의 일부인 텍스트)은 필수적인 것으로 간주됩니다.

1.4.10 리플로우 (AA)

콘텐츠는 정보나 기능의 손실없이 양 방향으로 스크롤하지 않도록 제공되어야 합니다. (CSS 픽셀 기준)

  • 320px에 해당하는 너비의 수직 스크롤링 콘텐츠

  • 256px에 해당하는 높이의 수평 스크롤링 콘텐츠

320px CSS 픽셀은 400% 확대 시, 1280px 뷰포트 너비와 같습니다. 그리고 가로 방향으로 스크롤 되는 콘텐츠(예 세로 방향 텍스트)로 설계된 경우, 256px은 1024px 뷰포트 높이와 동일합니다.

해설

예를 들어 웹 사이트를 400% 확대했을 때 가로, 세로 양쪽 방향을 스크롤 바가 생기면 안된다는 말입니다. 스크롤 바는 가로 또는 세로 방향 한 쪽으로만 표시되어야 합니다.

활용 또는 의미를 위한 2차원 레이아웃이 필요한 콘텐츠의 일부는 제외할 수 있습니다.

예외 2차원 레이아웃을 필요로 하는 콘텐츠의 예로는 콘텐츠를 조작하는 동안 툴바(Toolbar) 보기에 유지해야하는 이미지, 지도, 다이어그램, 비디오, 게임, 프리젠테이션, 데이터 테이블 인터페이스 등이 있습니다.

저시력 장애를 지닌 사용자는 브라우저 확대/축소 기능을 사용하여 화면을 400%까지 확대해 사용합니다. 양방향으로 스크롤 되지 않고, 세로 또는 가로 한 방향으로만 스크롤 되도록 구성하면 저시력 장애를 지닌 사용자의 접근성을 향상시킬 수 있습니다.

  • 400% 확대된 뷰포트 내 콘텐츠가 모두 보여져야 합니다.

  • 반응형 또는 가변 폭을 활용하여 디자인 합니다.

예시

화면이 확대되면 폭이 좁아짐에 따라 내비게이션이 변경되어 "더보기(more)" 드롭 다운 메뉴로 감춰집니다. 확대가 계속되면 내비게이션 아이템은 "햄버거" 메뉴 버튼 뒤에 감춰집니다. 버튼을 눌러 내비게이션 메뉴를 활성화 할 수 있습니다. 화면을 확대해도 가로 스크롤이 생기지 않습니다.

1.4.11 비 텍스트 명도대비 (AA)

다음의 시각적 표현은 인접한 색상 대비 명도대비가 최소 3:1이상 되어야 합니다.

  • 사용자 인터페이스(UI) 컴포넌트 비 활성 컴포넌트 또는 컴포넌트 모양이 사용자 에이전트(예: 브라우저 등)에 의해 결정되고 개발자에 의해 수정되지 않는 경우를 제외하고, UI 컴포넌트 및 상태를 확인하기 위해 요구되는 시각적 정보.

  • 그래픽 객체 특정 그래픽 표현이 전달되는 정보에 필수적인 경우를 제외하고 콘텐츠를 이해하는데 필요한 그래픽의 일부.

해설

성공기준은 다음과 같습니다.

  • 활성화 된 UI 컴포넌트(예: 버튼, 인풋 등)의 최소 명도대비는 3:1 이상이 요구됩니다.

  • 의미를 가진 그래픽 객체(예: 인포그래픽, 차트 등)의 대비 차 또한 마찬가지로 적용되어야 합니다.

예외 비활성화 된 UI 컴포넌트, 로고, 플래그, 실생활 사진 및 그래픽을 다른 방법으로 표현하기 힘든 경우(예: 웹 사이트 스크린 샷, 생물학에서 발견된 색상을 사용하는 의학정보 다이어그램, 색상 그레디언트 등) 이 성공기준에 포함되지 않습니다.

예시

활성화 된 UI 컴포넌트

링크 텍스트

링크 텍스트가 활성화 된 상태(:hover, :focus, :active 등)를 시각적으로 명확하게 구분할 수 있도록 만들어야 합니다. 기본 스타일을 그대로 사용하거나, 임의의 스타일을 설정해 시각적인 구분을 가능하게 만들어야 합니다.

버튼

다음은 고스트 버튼의 2가지 예입니다. 첫번째는 흰색 배경에 "다운로드" 단어를 포함하는 회색 윤곽선 버튼입니다. 이 버튼의 명암비는 1.6:1로 매우 낮습니다. 두번째는 명암비가 4.8:1로 성공기준을 충족하는 버튼입니다.

이미지 위에 이러한 고스트 버튼을 사용하면 식별하기 어려울 수 있습니다. 이런 경우 버튼과 대비가 명확한 배경색 또는 이미지를 사용하는 것이 좋습니다. 아래 예시를 살펴보면 대비 차가 명확해야 사용자가 읽고 인식하기 용이하다는 것을 확인할 수 있습니다.

입력

텍스트를 입력하는 컴포넌트 또한 활성화 될 경우, 시각적으로 명확하게 구분할 수 있도록 구성해야 합니다.

아래 예시는 사용자가 검색하는 입력 컴포넌트를 시각적으로 명확하게 구분할 수 있도록 아웃라인(테두리)을 활용하거나, 배경색과 대비되는 컬러를 사용하여 구분할 수 있도록 활용된 예입니다.

그래픽 객체

차트와 같은 그래픽 객체는 다소 까다롭습니다. 예를 들어 원형 차트의 각 조각은 인접한 조각색 또는 배경색과 충분한 대비가 있어야 합니다. 색상 만으로 구분하기 보다는 형태를 구분할 수 있도록 구성하는 것이 좋습니다. 예를 들어 각 조각을 당기거나 밀어 각 조각을 쉽게 구분할 수 있게 만들 수 있습니다. 다른 방법은 각 조각의 테두리를 그려 주변 조각과 구분할 수 있습니다.

아이콘

웹 사이트는 협소한 공간을 효율적으로 활용하거나, 사용자의 관심을 끌기 위해 아이콘을 사용합니다. 아이콘은 일반적으로 텍스트가 포함되어 있지 않아 WCAG 2.0 대비 성공기준에 포함되지 않았지만, WCAG 2.1부터는 아이콘 또한 대비 성공기준에 충족해야 합니다. 아이콘 내부의 그림은 아이콘 배경과 대비가 잘 되어 있어야 합니다.

아래 이미지는 2개의 다른 파란색 배경을 가진 달력 아이콘입니다. 첫 번째 아이콘은 2.2:1의 명암비를, 두 번째 아이콘은 5.3:1의 명암비를 갖습니다.

원형 차트

아래 원형 차트는 조각을 당겨 주변의 조각과 구분하고, 각 조각에 연결된 선과 텍스트를 통해 명확하게 인식할 수 있도록 디자인을 개선한 결과입니다.

인포그래픽

명암 대비를 보장하는 방법은 여러 가지가 있습니다. 이 예에서는 경계선을 사용합니다. 다른 기술은 원 배경에 어두운 색을 사용하거나, 각 항목에 텍스트 레이블 및 값을 추가하는 것입니다.

이 성공 기준은 시력이 약한 사람들이 아이콘과 그래픽 객체를 보다 쉽게 보고 인식하도록 도와줍니다. 뿐만 아니라 좋은 대비는 장시간 화면을 보거나, 밝은 태양 아래에서 화면을 볼 때 사람들의 눈이 쉽게 피로해지지 않게 만듭니다.

아이콘과 그래픽 객체의 대비는 텍스트의 대비 만큼이나 중요합니다. 화면의 모든 요소에 대해 충분한 대비를 사용하세요.

1.4.12 텍스트 간격 (AA)

다음 텍스트 스타일 속성을 지원하는 HTML 마크업 언어를 사용하여 구현된 콘텐츠에서 다음 스타일을 모두 설정하고 다른 스타일 속성을 변경하지 않으면 콘텐츠 또는 기능이 손실되지 않습니다.

  • 행간(줄 사이 간격)은 글자 크기(높이)의 1.5배 이상 이어야 합니다.

  • 단락 간 간격은 글자 크기의 2배 이상으로 간격(마진)을 두어야 합니다.

  • 자간(글자 사이 간격)을 글자 크기의 0.12배 이상으로 설정합니다.

  • 어간(단어 사이 간격)은 글자 크기의 0.16배 이상으로 설정합니다.

예외 이러한 텍스트 스타일 속성 중 하나 이상을 필기 텍스트에 사용하지 않는 인간의 언어 및 스크립트는 해당 언어 및 스크립트 조합에 대해 존재하는 속성만 사용하여 준수할 수 있습니다.

  • PDF는 마크업 언어가 아니기에 예외 입니다.

  • 이미지 텍스트, 로고, 비디오 캡션(자막)은 예외 입니다.

  • Canvas 요소를 사용해 구현된 텍스트는 이미지 텍스트로 분류되어 예외 입니다.

해설

이 지침의 목적은 사람들이 텍스트를 수정하여 읽기 쉽도록 하는 것입니다. 시력이 약한 사람들은 일반 글꼴 보다 큰 글꼴을 기본 글꼴로 설정하여 사용합니다. 문자, 단어 또는 줄 간격을 변경하여 사이트를 테스트 하면 큰 글꼴을 사용하는 효과를 시뮬레이션 할 수 있습니다. 문자, 단어, 줄 또는 단락 사이에 더 많은 공간이 있으면 인지 또는 읽기 장애가 있는 사람들이 잘 읽을 수 있습니다.

예시

이 성공 기준을 지원하는 가장 좋은 방법은 반응형 디자인을 사용하고 고정된 높이나 너비를 컨테이너에 사용하지 않는 것입니다. 아래 웹 사이트 예를 보면 좌측의 콘텐츠 행간을 사용자가 임의로 조정했을 때(우측) 텍스트 중 일부가 표시되지 않는 문제를 확인할 수 있습니다.

반면 다음의 웹 사이트 예는 사용자가 임의로 행간, 자간을 조정해도 텍스트가 모두 잘 표시됩니다. 고정 높이를 사용하지 않았기 때문입니다.

1.4.13 콘텐츠 포커스/호버 (AA)

마우스 포인터 호버(마우스 오버) 또는 키보드 포커스를 받은 다음 제거하면, 추가 내용이 화면에 표시되고 숨겨 지도록 실행되는데 다음 조건이 요구됩니다.

  • 닫을 수 있는 (Dismissable) 추가 콘텐츠(예: 툴팁)가 입력 오류를 전달하거나 다른 콘텐츠를 가리거나 교체하지 않는 한, 포인터 호버나 키보드 포커스를 이동하지 않고도 추가 콘텐츠를 닫을 수 있는 메커니즘을 제공해야 합니다.

  • 호버 가능한 (Hoverable) 포인터 호버로 인해 추가 콘텐츠가 화면에 표시된 경우, 추가 콘텐츠 위로 포인터를 이동해도 추가 콘텐츠는 지속적으로 표시되어야 합니다.

  • 지속성 있는 (Persistent) 추가 콘텐츠는 포인터 호버 또는 포커스 트리거를 제거하거나 사용자가 닫고자 하는 경우가 아니라면, 해당 정보는 지속적으로 화면에 표시되어야 합니다.

포인터 호버 및 포커스 활성화에 따라 표시되는 사용자 정의 툴팁, 하위 메뉴 및 기타 비 모듈 팝업은 이 기준에 포함된 추가 콘텐츠의 예입니다.

해설

이 지침은 마우스를 제어하는데 어려움이 있거나, 시력이 약하거나, 인지 장애를 가진 이들에게 보다 나은 접근성을 제공해야 함을 말합니다. 개발자는 사용자가 화면에 추가된 콘텐츠를 보다 이용하기 쉽도록 구성해야 합니다.

툴팁, 드롭 다운 메뉴 및 모달 윈도우(레이어 팝업) 등을 제작할 경우 성공기준에 부합되도록 만들어야 합니다. 마우스 호버 또는 키보드 포커스 활성화에 따라 화면에 표시되는 콘텐츠를 사용자가 읽고, 쉽게 조작할 수 있어야 합니다.

  • 마우스를 움직이거나, 포커스 활성화 상태에서 콘텐츠를 닫을 수 있어야 합니다. (예: esc 키를 누르면 닫힌다)

  • 마우스 포인터가 활성화 요소 또는 화면에 표시된 콘텐츠 위에 있을 경우 지속적으로 표시되어야 합니다.

예시

이 가이드라인을 충족시키지 못하는 콘텐츠는 사용자의 전체 페이지 사용 능력을 저해 할 수 있으므로 웹 페이지의 모든 콘텐츠(다른 가이드라인을 충족시키는 데 사용되는지 여부와 관계 없음)는 이 가이드라인을 충족해야합니다. 보다 자세한 내용은 을 참고하세요.

중요하지 않은 비 활성화된 텍스트나 이미지의 텍스트, , 보이지 않는 콘텐츠, 중요한 다른 시각적인 콘텐츠를 포함하는 그림은 별도의 명도 대비 요구가 없습니다.

디자인을 살펴보면 화면 크기를 400% 확대 하더라도 가로 스크롤은 생기지 않으며, 모든 콘텐츠 또는 기능을 사용하는데 아무런 제약이 없습니다.

사이트 또한 화면을 400% 확대해도 콘텐츠를 이용하는데 아무런 제약이 없습니다.

이 지침은 지침에서 다루는 명도대비 지침을 확장합니다. 이는 저시력 장애인의 접근성을 개선하기 위함으로 페이지의 모든 필수 요소들이 명도대비 수준을 최소한 충족해야 함을 의미합니다. 시력이 약한 사람들은 색의 대비가 부족할 때 식별에 어려움을 겪습니다.

고스트 버튼으로 불리는 배경색 없는 버튼이 인기를 얻고 있습니다. 이 버튼은 일반적으로 를 충족하는 텍스트가 있지만, 배경색과 버튼 외곽 선 또한 대비 요구 사항을 충족해야 합니다. 버튼이 단색 이면 배경과 버튼 색상이 적절한 대비가 필요합니다.

아래 원형 차트는 을 나타낸 그래픽 객체입니다. 색상 만으로 각 조각을 구분한 디자인으로 쉽게 식별할 수 없습니다.

를 보면 보다 상세한 디자인 가이드를 볼 수 있습니다.

사용자는 사용자 정의 스타일 시트, 또는 등을 사용하여 이 값을 조정할 수 있습니다. 웹 페이지 작성자는 이러한 설정을 변경하는 옵션을 제공 할 필요가 없습니다. 하지만 이러한 설정을 통해 화면이 변경 되더라도 모든 콘텐츠가 정상적으로 표시되도록 되어야 합니다.

를 보면 보다 상세한 디자인 가이드를 볼 수 있습니다.

예외 사용자 에이전트에 의해 제어되는 추가 콘텐츠의 시각적 표시(예: )는 해당 기준에 부합하지 않습니다.

아래 예는 성공 기준에 충족하는 입니다. 툴팁은 키보드 포커스로 활성화되면 화면에 표시되고, esc 키를 누르면 사라집니다. 물론 마우스 호버에 따라 화면에 표시/감춤 처리됩니다. 뿐만 아니라 툴팁에 마우스가 올라가면 지속적으로 표시됩니다.

을 보면 보다 상세한 디자인 가이드를 볼 수 있습니다.

적합성 요구 - 5. 비간섭
UI 컴포넌트
순수한 표현 장식
BBC 사이트
samsung.com
"중국 주스 과즙 함량 별 시장점유율"
성공기준 이해하기 1.4.11
성공기준 이해하기 1.4.12
HTML title 툴팁
사용자 정의 툴팁
성공기준 이해하기 1.4.13
1.4.3 대비 (AA)
1.4.3 대비 (AA)
북마클릿(bookmaklet)
브라우저 확장(extensions)
리플로우
가이드라인 1.3
화면을 확대(400%) 할 경우 가로, 세로 스크롤 바가 생긴 웹 사이트
400% 확대된 화면의 Google Docs 인터페이스 화면엔 가로, 세로 스크롤 바가 양 방향으로 표시됩니다.
www.bbc.com/earth/world
400% 확대해도 모든 기능 이용에 제약이 없습니다.
브라우저 기본 스타일 (위), 사용자 정의 스타일 (아래)
✔︎ 활성화 된 링크 텍스트를 명확하게 식별 가능한 대한항공 웹 사이트
활성화된 버튼은 시각적으로 구분이 가능하도록 구성해야 합니다.
✖︎ 밝은 사진 위에 배치된 고스트 버튼의 대비
✔︎ 어두운 사진 위에 배치된 고스트 버튼의 대비
✔︎ 비활성화 상태와 명확히 구분되는 활성 상태의 입력
✔︎ 포커스 또는 입력 상태를 구분할 수 있는 명확한 시각 정보를 제공하는 Apple 웹 사이트
✔︎ 배경색 포커스 스타일을 사용하는 검색 입력 - 야놀자 웹 사이트
✖︎ 2.2:1의 명암비를 갖는 아이콘 vs ✔︎ 5.3:1의 명암비를 갖는 아이콘
✖︎ 색으로만 구분된 원형 차트는 명확하게 구분하기 어렵습니다.
✔︎ 색상 뿐만 아니라, 형태로 구분 가능하게 원형 차트를 만들면 명확하게 식별할 수 있습니다.
✖︎ 네트워크의 크기를 파악하고 각 네트워크의 아이콘을 식별 하려면 해당 네트워크를 식별해야합니다.
✔︎ 원은 대조되는 테두리가 있고 아이콘은 밝은 원 배경과 대조되는 어두운 색입니다.
✖︎ 사용자가 행간을 조정했을 때 글자가 잘려보이는 청와대 웹 사이트
✔︎ 사용자가 행간을 조정해도 글자가 잘려보이지 않는 삼성 웹 사이트
✖︎ 마우스 호버 상황에서만 화면에 표시되는 툴팁을 제공하는 블로터 웹 사이트
Understanding Success Criterion 1.4.1: Use of Color
컬러 활용에 대한 이해
Logo
Understanding Success Criterion 1.4.4: Resize text
텍스트 크기 조정에 대한 이해
Logo
Understanding Success Criterion 1.4.5: Images of Text
이미지 텍스트에 대한 이해
대비에 대한 이해
Logo
Understanding Success Criterion 1.4.3: Contrast (Minimum)
Logo
Understanding Success Criterion 1.4.2: Audio Control
오디오 컨트롤에 대한 이해
Logo
Understanding Success Criterion 1.4.6: Contrast (Enhanced)
향상된 대비에 대한 이해
Logo
Understanding Success Criterion 1.4.9: Images of Text (No Exception)
이미지 텍스트 (예외 없음)에 대한 이해
Logo
Understanding Success Criterion 1.4.8: Visual Presentation
시각적 표현에 대한 이해
Logo
Understanding Success Criterion 1.4.7: Low or No Background Audio
배경음악으로 간주되지 않는 경우에 대한 이해
Logo
Alastairc - Buy Cheap Instagram FollowersAlastairc
웹 사이트를 400% 확대해도 서비스 이용에 문제가 없도록 구성해야 합니다.
Logo
Understanding Success Criterion 1.4.10: Reflow
리플로우에 대한 이해
Logo
명확하게 구분 가능한 대비를 제공해 쉽게 식별할 수 있도록 만들어야 합니다.
https://streamable.com/nvdmcstreamable.com
Understanding Success Criterion 1.4.11: Non-text Contrast
텍스트가 아닌 콘텐츠의 명도대비에 대한 이해
Logo
자간, 어간, 행간, 단락 사이 간격을 조정해 읽기 쉬운 콘텐츠를 제공해야 합니다.
사용자가 스타일을 조정해도 화면의 콘텐츠는 문제 없이 표시되도록 만들어야 합니다.
Understanding Success Criterion 1.4.12: Text Spacing
텍스트 간격에 대한 이해
Logo
✔︎ Nicolas Hoffman이 제작한 성공기준에 부합하는 사용자 정의 툴팁 디자인
Understanding Success Criterion 1.4.13: Content on Hover or Focus
콘텐츠 호버, 포커스에 대한 이해
Logo