접근성: 이미지 및 갤러리 준비하기
6 분 분량
페이지 메뉴
- 에디터에서 대체 텍스트 추가하기
- 싱글 이미지
- 갤러리
- 접근성 마법사에서 대체 텍스트 추가하기
- 이미지를 장식으로 표시하기
- 이미지 텍스트
- 텍스트 이미지
시각 장애가 있는 방문자는 스크린 리더와 같은 보조 기술을 사용해 사이트를 탐색할 수 있습니다. 이러한 방문자가 액세스할 수 있도록 대체 텍스트를 사용해 이미지와 갤러리에 설명을 추가하세요.
대체 텍스트는 미디어에 대한 정보를 제공하고 검색 엔진과 스크린 리더가 미디어를 "읽는"데 도움이 됩니다.
Wix는 어디에서 정보를 얻나요?
- Wix에서는 W3C(World Wide Web Consortium)에서 개발한 WCAG(웹 콘텐츠 접근성 가이드라인) 문서에 따른 권장 사항을 준수합니다.
- 이 도움말은 다음 성공 기준을 기반으로 합니다.
에디터에서 대체 텍스트 추가하기
대체 텍스트는 스크린 리더를 사용하는 방문자가 사이트의 콘텐츠에 액세스하고 이해할 수 있도록 보장하는 만큼, Wix 쇼핑몰, Wix Bookings 등과 같은 앱에 표시되는 미디어를 포함해 모든 관련 이미지에 추가하는 것이 좋습니다.
싱글 이미지
사이트 빌더(Wix 에디터 및 Studio 에디터)의 설정 패널에서 이미지에 대체 텍스트를 추가하세요.
Wix 에디터
Studio 에디터
- 에디터로 이동합니다.
- 페이지에서 이미지를 클릭합니다.
- 설정
아이콘을 클릭합니다. - 이미지 설명 아래 이미지에 대한 설명을 입력합니다.
- 키보드에서 Enter 키를 눌러 저장합니다.
갤러리
사이트의 미디어 관리자를 사용해 갤러리 이미지에 대체 텍스트를 추가하세요.
Wix 에디터
Studio 에디터
- 에디터로 이동합니다.
- 페이지에서 갤러리를 클릭합니다.
- 미디어 관리 또는 이미지 변경을 클릭합니다.
- 이미지를 클릭해 선택합니다.
- 오른쪽에 이미지 제목을 입력합니다.
- (Wix 프로 갤러리) 이미지의 제목과 다른 대체 텍스트를 사용하려면 대체 텍스트 아래에서 이미지의 대체 텍스트를 편집합니다.
- 완료를 클릭합니다.
도움말:
대체 텍스트가 활성화되도록 사이트를 게시하세요.
참고:
현재는 이미지 또는 갤러리에 대체 텍스트를 일괄적으로 추가할 수 없습니다. 해당 기능이 추가되길 원한다면, 여기에서 투표할 수 있습니다.
접근성 마법사에서 대체 텍스트 추가하기
접근성 마법사로 사이트를 확인하는 동안 이미지에 대체 텍스트를 추가하라는 메시지가 표시될 수 있습니다. 마법사의 작업을 사용해 사이트 방문자에게 짧고 명확한 설명을 제공하세요.
Wix 에디터
Studio 에디터
마법사를 사용해 Wix 쇼핑몰 및 Bookings 앱에 표시되는 대체 텍스트 사이트 이미지 및 이미지를 추가하세요.
사이트 이미지에 대체 텍스트를 추가하려면:
- 에디터로 이동합니다.
- 상단에서 설정을 클릭한 후 접근성 마법사를 선택합니다.
- 오른쪽의 접근성 마법사 패널에서 사이트 스캔하기를 클릭합니다.
- 대체 텍스트라는 제목의 카드를 선택합니다.
- 이미지 설명 입력란에 이미지 설명을 입력합니다.
- 대체 텍스트 저장을 클릭합니다.
앱 이미지에 대체 텍스트를 추가하려면:
- 에디터로 이동합니다.
- 상단에서 설정을 클릭한 후 접근성 마법사를 선택합니다.
- 오른쪽의 접근성 마법사 패널에서 사이트 스캔하기를 클릭합니다.
- 쇼핑몰 / 예약 드롭다운을 선택합니다.
- 대체 텍스트라는 제목의 카드를 선택합니다.
- (쇼핑몰의 경우) 각 제품 이미지 / 제품 옵션 이미지를 선택합니다.
- 이미지 설명 입력란에 이미지 설명을 입력합니다.
- 대체 텍스트 저장을 클릭합니다.
- 완료를 클릭합니다.
이미지를 장식으로 표시하기
장식 이미지는 미적 또는 장식 목적으로만 사용되므로 사이트 콘텐츠에는 기여하지 않습니다.
사이트의 이미지가 장식용이며 컨텍스트와 관련이 없는 경우, 대체 텍스트를 추가할 필요가 없습니다. 접근성 마법사에서 이미지를 '장식'으로 표시해 검색 엔진과 스크린 리더에서 자동으로 해당 이미지를 건너뛰도록 할 수 있습니다.
Wix 에디터
Studio 에디터
- 에디터로 이동합니다.
- 상단에서 설정을 클릭한 후 접근성 마법사를 선택합니다.
- 오른쪽의 접근성 마법사 패널에서 사이트 스캔하기를 클릭합니다.
- 대체 텍스트라는 제목의 카드를 선택합니다.
- 디자인 이미지이므로 대체 설명이 필요하지 않습니다 옆 체크상자를 클릭합니다.
참고:
링크가 포함된 모든 이미지에는 대체 텍스트를 추가해야 하며, 장식용으로 표시하지 않아야 합니다.
이미지 텍스트
텍스트가 제시되거나 추가된 이미지를 말합니다.
이미지 텍스트는 검색 엔진 또는 스크린 리더가 "읽을 수" 없습니다. 하지만, 이미지가 필요하고 텍스트에 사이트에 대한 컨텍스트가 있는 경우 이를 이미지 설명에 추가할 수 있습니다.
텍스트에 컨텍스트가 없거나 사이트 콘텐츠에 기여하지 않는 경우에는 이미지 설명에 추가할 필요가 없습니다.
아래 옵션을 선택해 이미지 설명에 추가해야 하는 이미지 텍스트와 추가하지 않아야 하는 이미지 텍스트를 알아보세요.
주요 텍스트
중요하지 않은 텍스트
텍스트 이미지
텍스트 이미지는 텍스트만 포함하고 다른 요소는 제시되지 않습니다. 글꼴 이미지 또는 텍스트만 포함된 로고 등이 이에 해당합니다.
"실제" 텍스트 요소가 아니므로 텍스트 이미지는 검색 엔진이나 스크린리더에서 읽을 수 없습니다. 사이트의 SEO 및 접근성을 개선하기 위해 가능하면 이러한 요소는 피하고 실제 텍스트 요소로 대체하는 것이 좋습니다.
다음 단계:
접근성 체크리스트로 돌아가 접근성을 위해 사이트를 계속 개선하세요.