접근 가능한 글꼴 사이징

WCAG (Web Content Accientability Guidelines)는 웹 컨텐츠의 최소 글꼴 크기를 요구하지 않습니다. 그러나 가독성을 보장하는 것이 중요합니다. 이 기사는 WCAG 요구 사항에 중점을두고 브라우저 기본값을 활용하여 액세스 가능한 글꼴 크기에 대한 모범 사례를 살펴 봅니다.

가독성 : 대비 및 문자 다양성

WCAG는 고정 크기에 대한 대비 우선 순위를 정합니다. 텍스트는 최소 4.5 : 1 대비 비율을 충족해야합니다 (큰 텍스트의 경우 3 : 1). WebAim의 대비 체커와 같은 도구가 도움이 될 수 있습니다. 다양한 알파벳 (전 세계 약 300)의 복잡성은 단일 최소 크기가 보편적으로 적용되지 않는다는 것을 의미합니다. WCAG는 언어 별 최소 대형 인쇄 크기를 기준으로 "큰 텍스트"를 정의합니다. 로마 텍스트의 경우 18 포인트 (화면 밀도에 따라 24px와 동일 할 수 있음)는 "큰"것으로 간주됩니다.

본질적으로 WCAG는 정확한 글꼴 크기가 아니라 대비를 지정합니다.

다행히도 브라우저 기본 스타일에 본질적으로 액세스 할 수 있습니다. 그들을 활용합시다.

고정 크기가 아닌 비율

브라우저 기본 스타일 (사용자 에이전트 스타일 시트)은 저자 스타일 및 사용자 스타일에 앞서 있습니다. 많은 사용자가 기본 브라우저 글꼴 크기를 조정합니다. 또한 번역, 글꼴 로딩 고장 또는 사용자가 선택한 글꼴 (OpenDyslexic)과 같은 요인으로 인해 글꼴 패밀리를 완전히 제어 할 수 없습니다.

따라서 절대 크기가 아닌 비율 에 중점을 둡니다. CSS 상대 장치 (WCAG 권장 em 단위)를 사용하여 컨텐츠 규모를 사용자의 환경에 적절하게 보장합니다. rem 및 em 장치를 지속적으로 사용하는 것을 고려하십시오 (픽셀이 종종 바람직한 경계를 제외하고).

기본 글꼴 크기를 설정하지 마십시오

일반적으로 :root font-size 설정하지 마십시오. , 또는<code> 강요. 브라우저의 기본 액세스 가능한 크기가 기준선 역할을하도록하십시오. WCAG 2.2 작업 초안은 지정되지 않은 텍스트에 주요 브라우저에서 사용하는 기본 글꼴 크기가 합리적인 기준을 제공 함을 시사합니다.

예외가 존재합니다. 복잡하거나 얇거나 짧은 X- 높이의 글꼴은 충분한 대비를 달성하기 위해 약간 더 큰 기본 글꼴 크기가 필요할 수 있습니다. 기억하십시오 : 크기가 아닌 대비는 주요 WCAG 메트릭입니다. 비정상적인 글꼴은 가독성을 유지하기 위해 더 큰 크기, 특히 더 낮은 대비 수준에서 더 큰 크기가 필요할 수 있습니다. 사용자는 여전히 기본 글꼴 크기를 선호도로 조정할 수 있습니다.

비율 유지 : 브라우저의 기본값에 따라 상대 크기 조정 (예 : .small , .large )을 정의하십시오.

 : 루트 {
  / * 여기에 글꼴 크기를 설정하지 마십시오 */
}
.작은 {
  글꼴 크기 : .8REM;
}
.크기가 큰 {
  글꼴 크기 : 2REM;
}

제목

스크린 리더 접근성을 위해 제목 순서 (H1, H2, H3 등)를 유지하십시오. 제목 글꼴 크기를 1rem 으로 재설정하면 시각적 스타일링이 의미 론적 의미에서 분리 될 수 있습니다.

픽셀로 작업합니다

픽셀 기반 디자인을 상대 단위로 번역하려면 :

방법 1 : 62.5% 규칙

font-size: 62.5%; :root 는 1REM을 10px와 동일하게 만들어 픽셀 투 렘 변환을 단순화합니다.

방법 2 : calc() 사용

calc() 사용하여 가정 된 16px 브라우저 기본값에 따라 REM 값을 동적으로 계산하십시오.

방법 3 : 픽셀 투 렘 함수

전처리 기능 (SASS MIXINS, Styled Components Polish)을 사용하거나 픽셀 투 렘 변환을위한 사용자 정의 CSS 기능을 만듭니다.

결론

rem 단위를 사용하여 비례 크기를 우선 순위를 정하고 브라우저 기본값을 활용하며 사용자 설정에 대한 가정을 피하십시오. 이 접근법은 다양한 브라우저, 장치 및 사용자 기본 설정에 대한 접근성을 보장합니다. 그의 도움을 주신 Franco Correa에게 감사드립니다.

위 내용은 접근 가능한 글꼴 사이징의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!