접근성 표준에 맞게 구성요소 조정

에서 구성 요소를 테마 작성기편집할 때 구성 요소가 색상 대비에 대한 WCAG 2.1 규격 내에 있지 않음을 나타내는 오류 기호( )가 발생할 수 있습니다.

시작하기 전에

필요한 역할: admin

이 태스크 정보

콘텐츠 및 UI 변수를 대상으로 하는 테마 작성기 WCAG 2.1 명암비는 4:5:1입니다. 이 비율은 밝은 화면 색과 어두운 화면 색 간의 대비와 사용자 인터페이스와의 관계를 결정합니다. 명암비에 익숙하지 않은 사람들을 위해 첫 번째 숫자는 밝은 색상의 수준을 나타내고 두 번째 숫자는 어두운 색상의 상대적 수준을 나타냅니다. 4:5:1 임계값은 시각 장애가 있는 사용자에게 최적의 가시성을 제공합니다. 자세한 내용은 WCAG 2.1에 대한 W3C 권장 사항 사이트를 참조하세요.

구성 요소당 총 접근성 위반 수는 편집 패널 페이지에 표시됩니다.

프로시저

1. 구성요소 스타일 탭에서 접근성 경고 기호를 표시하는 구성요소를 선택합니다.

   

   구성 가능한 스타일 패널에는 선택한 구성요소에 사용할 수 있는 편집 가능한 후크가 표시됩니다.

   

2. 아이콘을 선택하여 경고에 대한 설명을 볼 수 있습니다.

   그림 1. 접근성 경고

   

3. 경고 메시지에 표시된 대로 연필 아이콘을 선택하여 대비 문제를 개선할 수 있습니다.

   그림 2. 구성요소 편집기

   

4. 구성 가능한 스타일 패널에서 접근성 경고 기호를 선택하여 문제 해결을 위한 자세한 정보를 확인합니다.

   

5. 경고에 있는 링크 중 하나를 선택하여 배경 채우기 색 또는 아이콘 색을 수정합니다.
   주:

   색상 후크에 대한 변경 내용을 저장하면 실행 취소 기호가 나타납니다. 실행 취소 기호를 선택하여 모든 변경 사항을 원래 색상으로 되돌립니다.

   

6. 변경을 완료했는데 접근성 경고 기호가 더 이상 표시되지 않으면 변경 내용 저장을 선택합니다.
   예를 들어 명암비 위반을 통과하는 색상을 선택하면 색상 선택기에서 경고 기호가 녹색으로 바뀝니다.