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

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 소요 시간: 1분
  • 에서 테마 작성기구성 요소를 편집할 때 구성 요소가 색상 대비에 대한 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. 변경을 완료했는데 접근성 경고 기호가 더 이상 표시되지 않으면 변경 내용 저장을 선택합니다.
      예를 들어 명암비 위반을 통과하는 색상을 선택하면 색상 선택기에서 경고 기호가 녹색으로 바뀝니다.