header-logo
Wix를 사용해해 사이트와 비즈니스를 구축하는 방법을 알아보세요.
직관적인 Wix 기능을 사용해 사이트를 디자인하고 관리하세요.
구독, 플랜 및 인보이스를 관리하세요.
비즈니스를 운영하고 회원과 소통하세요.
도메인을 구매하고 사이트에 연결, 이전하는 방법을 알아보세요.
비즈니스 및 웹 존재감을 키울 수 있는 도구를 확인하세요.
SEO 및 마케팅 도구로 가시성을 높이세요.
보다 효율적으로 작업할 수 있는 고급 기능을 활용하세요.
해결책을 찾고, 알려진 문제에 대해 알아보거나 문의하세요.
placeholder-preview-image
강좌 및 튜토리얼을 통해 실력을 향상시키세요.
웹 디자인, 마케팅 등에 대한 팁을 확인하세요.
검색 엔진에서 유기적 사이트 트래픽을 증가시키는 방법을 알아보세요.
풀스택 플랫폼을 활용해 맞춤형 사이트를 구축하세요.
목표 달성에 도움을 줄 전문가를 만나보세요.
placeholder-preview-image

접근성: 접근성 마법사 문제 해결하기

3 분
페이지 메뉴
  • 이미지의 색상 대비
  • 컨테이너의 색상 대비
  • 페이지 헤더 태그
  • 링크된 텍스트
  • 대체 텍스트 및 CMS
  • 이미지의 ARIA 속성
  • 반복되는 문제
접근성 마법사는 방문자가 사이트에 더 쉽게 액세스할 수 있도록 하는 유용한 도구입니다. 
사이트에 있는 비주얼 또는 백엔드 콘텐츠의 유형에 따라 마법사 사용 시 몇 가지 문제가 발생할 수 있습니다. 도움말의 옵션을 사용해 이러한 문제와 잠재적 해결 방법에 대해 자세히 알아보세요.

이미지의 색상 대비

사이트 텍스트를 선명하게 표시하기 위해 마법사는 큰 텍스트의 경우 색상 대비 수준이 3.0 이상, 일반 텍스트의 경우 4.5 이상이 아닌 모든 영역에 플래그를 지정합니다. 색상 대비는 충분하지만 이미지에 텍스트가 배치된 경우 이러한 알림 중 하나가 표시될 수 있습니다.
마법사는 텍스트의 밝기, 이미지가 있는 섹션 또는 스트립 배경을 기반으로 대비를 계산합니다. 따라서, 이 문제를 해결하려면 텍스트나 배경의 밝기를 변경해야 합니다.
에디터 사이트의 마법사입니다. 이미지 위 텍스트의 색상 대비에 플래그가 지정되었습니다.

컨테이너의 색상 대비

텍스트를 컨테이너에 추가하지 않고 컨테이너 상자 위에 배치할 경우, 색상 대비 계산이 올바르지 않습니다. 그 결과, 대비에 문제가 있다고 표시된 카드가 표시될 수 있습니다. 
이는 마법사가 컨테이너를 배경으로 인식하지 않고, 대신 컨테이너가 있는 배경(예: 스트립 또는 섹션)을 기반으로 대비를 계산하기 때문입니다.
에디터 사이트의 마법사입니다. 텍스트가 컨테이너 위에 있음에도 불구하고 텍스트의 색상 대비에 플래그가 지정되었습니다.
이 문제를 해결하려면 컨테이너 상자에 텍스트를 추가해야 합니다. 

페이지 헤더 태그

헤더 태그는 페이지 콘텐츠의 계층 구조를 정의하고 방문자가 탐색할 수 있도록 합니다. 페이지에서 텍스트를 정의하지 않는 경우, 마법사는 페이지의 기본 헤더 및 다른 텍스트의 헤더 태그를 설정하라는 카드를 표시할 수 있습니다.
마법사에 기본 헤더 및 헤더 정의 카드가 모두 표시된다면:
먼저 기본 헤더 카드를 해결하는 것이 좋습니다. 이렇게 하면 헤더 정의 카드 중 하나가 자동으로 해결되므로 텍스트를 다시 정의할 필요가 없습니다.

링크된 텍스트

마법사에 사이트 전체에서 링크된 텍스트에 플래그를 지정하거나 수동으로 확인하도록 권장하는 카드가 표시될 수 있습니다. 이는 '자세히 보기'와 같은 일반 링크 텍스트가 방문자가 클릭 시 어떤 일이 발생하는지 명확하게 설명하지 않기 때문입니다.
사이트에 추가하는 모든 링크된 텍스트는 설명이 포함되도록 하고 방문자에게 해당 기능을 알려주는 것이 좋습니다(예 '프로그램 후기 보기').

대체 텍스트 및 CMS

이미지를 데이터세트에 연결하고 연결을 통해 대체 텍스트를 추가하면 접근성 마법사에서 대체 텍스트를 다시 추가하라는 메시지가 다시 표시될 수 있습니다. 이는 마법사가 사이트의 데이터세트를 읽지 않고 이미지 설정에서 정보를 가져오기 때문입니다.
대체 텍스트 카드를 해결하거나 방지하려면, Wix 에디터에서 이미지에 적절한 대체 텍스트를 추가하는 것이 좋습니다. 이미지를 데이터세트에 연결한 후에는 대체 텍스트 입력란이 에디터에서 추가한 대체 텍스트에 연결되었는지 확인할 수 있습니다.

이미지의 ARIA 속성

ARIA 속성은 보조 기술 요소의 의미 체계에 대한 추가 정보를 제공합니다. 대부분의 다른 요소에는 사전 코딩된 속성이 있으므로 사이트의 사용자 지정 웹 애플리케이션에만 ARIA 속성을 추가하는 것이 좋습니다. 
대체 텍스트는 보조 기술에 사이트 미디어에 대한 정보를 제공하므로 ARIA 속성 또한 추가할 필요가 없습니다. 

반복되는 문제

마법사는 3 단계에서 이미 해결한 문제를 강조 표시할 수도 있습니다. 예를 들어, 접근성 표시 정보를 추가하고 마법사에서 완료로 표시한 경우, 사이트를 다시 스캔할 때 카드가 다시 나타날 수 있습니다.
저장한 변경 사항 또는 설정은 사이트에 계속 적용됩니다. 버튼을 클릭해 완료로 표시하세요.
에디터 사이트의 마법사입니다. 이미지 위 텍스트의 색상 대비에 플래그가 지정되었습니다.
에디터 사이트의 마법사입니다. 텍스트가 컨테이너 위에 있음에도 불구하고 텍스트의 색상 대비에 플래그가 지정되었습니다.