접근성 (a) 규칙 - 4

색상 및 대비

• 텍스트 이미지를 포함한 일반 크기 텍스트의 색상 명암비는 4.5:1이어야 합니다.

• 큰 크기의 텍스트(18pt/24px 또는 14pt/18.5px 굵은 글꼴)와 필수 아이콘의 색상 대비 비율은 3:1이어야 합니다.

• 색상 명암비를 확인하려면 Google Chrome의 DevTools 색상 선택기를 사용하세요.

• 그래프, 차트, 표의 색상과 함께 패턴, 텍스트, 아이콘 등의 추가 식별자를 포함하여 모든 사용자의 콘텐츠 이해도를 높입니다.

• @prefers-color-scheme을 사용하여 어두운 테마를 만드세요.

• @prefers-contrast 고대비 테마를 만듭니다.

애니메이션과 모션

콘텐츠 깜박임 및 이동

• 1초에 3번 이상 깜박이는 것을 담지 마십시오.

• 일반 플래시 및 빨간색 플래시 임계값 아래에서 깜박입니다.

움직임을 일시중지, 중지 또는 숨기기

• 사용자가 문제가 있을 수 있는 모션 애니메이션을 끌 수 있도록 페이지에 일시 중지, 중지 또는 숨기기 메커니즘을 추가합니다.

• 화면 수준이나 요소 수준에서 이 작업을 수행할 수 있습니다.

미디어 쿼리 사용

• @prefers-reduced-motion 미디어 쿼리를 사용하여 이러한 기본 설정을 존중하는 애니메이션 및 디자인 사이트와 관련된 사용자의 OS 설정을 확인합니다.

타이포그래피

• 접근성이 뛰어난 디자인을 만드는 가장 빠른 방법은 일반적인 서체(예: Arial, Times New Roman, Calibri, Verdana 등)를 선택하는 것입니다.

• 화려한 서체나 손으로 직접 쓴 서체는 피하고 대소문자가 하나만 사용 가능한 서체(예: 대문자만)를 피하세요.

• 서체를 찾을 때 다음 사항에 특히 주의하세요.

  • 가능한 한 일반적인 글꼴을 사용하세요.
  • 정교한 글꼴이나 손으로 쓴 글꼴, 대소문자만 사용하는 글꼴은 사용하지 마세요.
  • 대문자 I, 소문자 l, 1에 특히 주의하여 독특한 특성을 지닌 서체를 선택하세요.
  • 특정 문자 조합을 검토하여 서로 정확히 대칭되는 이미지가 아닌지 확인하세요.
  • 특히 r과 n 문자 쌍 사이의 커닝을 확인하세요.

글꼴 크기 및 인쇄 스타일

• 크기 조정이 가능하도록 기본 글꼴 크기는 상대 값(%, rem 또는 em)으로 정의되어야 합니다.

• 가독성을 높이기 위해 색상, 굵게, 모두 대문자, 이탤릭체와 같은 서체 변형 수를 제한하세요. 대신 별표, 대시, 개별 단어 강조 표시 등 사본에서 단어를 강조하는 방법을 사용하세요.

• 가능하면 이미지에 텍스트 대신 마크업을 사용하세요. 스크린 리더는 추가 코드 없이 이미지에 포함된 텍스트를 읽을 수 없으며, 저시력 사용자가 확대하면 포함된 텍스트도 픽셀화될 수 있습니다.

구조 및 레이아웃

• 중요한 요소는 서로 구별되어야 하며 유사한 요소는 그룹화되어야 합니다.

간격

• 가독성을 높이고 장애가 있는 독자가 콘텐츠를 더 쉽게 따라갈 수 있도록 텍스트 블록을 좁게 유지해야 합니다.

콘텐츠 정렬

• 균등하지 않은 간격은 특히 장애가 있는 사용자의 가독성을 방해하므로 텍스트를 양쪽 정렬하지 마세요. 또한 단어 간격이 왜곡되어 단어 경계를 식별하기 어렵게 만들 수도 있습니다.

• 글의 접근성을 높이는 데 도움이 되는 적절한 줄 높이 및 황금 비율 계산기와 같은 간격 및 도구.

구조 및 레이아웃 모범 사례

• 제목, 부제목, 목록, 숫자, 인용 블록 및 기타 시각적 그룹과 같은 요소를 사용하여 페이지를 섹션으로 나눕니다.

• 명확하게 정의된 단락, 문장, 단어 간격을 사용하세요.

• 너비가 80자(로고그램의 경우 40자)보다 작은 카피 열을 구성하세요.

• 복사본 내에 "여백의 강"을 만드는 단락 정렬을 양쪽 정렬하지 마세요.

위 내용은 접근성 (a) 규칙 - 4의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!