접근성: Studio 에디터에서 접근성 마법사 사용하기

초점 표시기는 방문자가 키보드를 사용해 라이브 사이트 탐색 시, 버튼 또는 링크와 같은 인터랙티브 요소 주위에 표시되는 파란색 직사각형입니다.

초점 표시기는 방문자가 현재 위치를 확인할 수 있도록 하므로 사이트 접근성에 매우 중요합니다. 결과적으로 초점 표시기는 모든 Studio 에디터 사이트에 자동으로 활성화되며 비활성화할 수 없습니다. 

"메인 콘텐츠로 건너뛰기"는 키보드 탐색을 사용하는 방문자가 사이트의 최상단 섹션(예: 메뉴 및 페이지 제목)을 건너뛰고 페이지의 메인 콘텐츠로 바로 이동할 수 있는 기능입니다. 

"메인 콘텐츠로 건너뛰기" 링크는 Studio 에디터에서 제작하는 모든 사이트에 자동으로 추가되며, 비활성화할 수 없습니다.

사이트의 주 언어를 설정하면 보조 기술에 콘텐츠를 정확하게 렌더링하는 데 필요한 정보가 제공됩니다. 이는 다음을 통해 수행됩니다. 

따라서, 이러한 기술을 사용하는 방문자가 최상의 경험을 얻을 수 있도록 사이트의 주 언어를 설정하는 것이 중요합니다.

사이트에 Wix 다국어를 추가한 경우, 설정 시 선택한 기본 언어는 변경할 수 없습니다.  

하지만, 다음 작업을 수행할 수 있습니다.

사이트의 DOM(문서 개체 모델) 순서는 페이지에 있는 요소의 "읽기" 순서를 결정합니다.

일부 사이트 방문자는 스크린 리더 및 기타 보조 기술을 사용해 사이트를 탐색합니다.

예를 들어, 스크린 리더는 사이트 콘텐츠를 스캔해 방문자에게 소리 내어 "읽어줍니다". 이러한 방문자와 이동성이 필요한 방문자는 Tab 키를 사용해 사이트 콘텐츠를 탐색할 수 있습니다. 

따라서, 사이트의 DOM 순서를 구성하는 것은 이러한 보조 및 추가 기술을 사용하는 방문자가 논리적인 순서로 사이트를 둘러보고 탐색할 수 있도록 보장하므로 접근성에 중요합니다.

마법사는 제목이 '새 페이지'(사이트에 추가하는 새 페이지에 지정되는 기본값)이거나 제목에 '복제 페이지'(중복 페이지에 지정되는 기본값)가 포함된 경우, 페이지 제목을 변경하라는 메시지를 표시합니다.

사이트 방문자는 종종 페이지 제목을 사용하여 특정 콘텐츠/정보로 안내합니다 최상의 경험을 보장하려면, 페이지 제목은 다음과 같아야 합니다.

제목 태그는 페이지에 있는 텍스트 콘텐츠의 계층 구조 또는 구조를 결정하는 사이트 HTML 코드의 요소입니다. 제목 태그는 제목 1(H1)에서 제목 6(H6), 단락 텍스트(P) 순으로 하향식 순서를 따릅니다.

보조 기술은 제목 태그를 사용해 페이지 콘텐츠의 순서를 파악합니다. 예를 들어, 스크린 리더는 H1 콘텐츠를 먼저 읽고, 그 다음 H2, H3 등의 콘텐츠를 읽습니다. 

따라서, 정확한 제목 구조는 이러한 기술을 사용하는 방문자에게 명확하고 논리적인 경험을 제공하는 만큼 중요합니다.
헤더 태그에 대한 자세한 도움말을 확인하세요.

대체 텍스트는 웹페이지의 이미지에 대한 텍스트 설명입니다.

일부 방문자는 스크린 리더 등과 같은 보조 기술을 사용해 사이트를 탐색할 수 있습니다. 이러한 기술은 대체 텍스트를 포함해 사이트의 콘텐츠를 방문자에게 소리 내어 읽습니다. 

대체 텍스트는 이러한 기술을 사용하는 방문자가 콘텐츠에 액세스하고 이미지에 포함된 내용을 이해할 수 있도록 하는 만큼, 사이트의 중요한 부분입니다. 대체 텍스트 및 접근성에 대한 자세한 도움말을 확인하세요. 

색상 대비은 두 색상 간에 인식되는 밝기의 차이를 측정한 것이며, 1:1( 대비 없음)부터 21:1(강한 대비)까지의 비율로 표시됩니다. 대비가 강하면 사이트 콘텐츠를 쉽게 보고 읽을 수 있습니다. 

필요한 색상 대비 율은 요소의 유형과 달성하고자 하는 웹 콘텐츠 접근성 가이드라인(data-composite="true" href="https://www.w3.org/TR/wcag21/#abstract" target="_blank")([AA (최소 요구 사항), 또는 AA (향상))에 따라 달라집니다.

참고: 현재 접근성 마법사에서는 레벨 AA만 필요합니다.

다른 페이지, 섹션 또는 웹사이트로 링크되는 텍스트 또는 요소는 가능한 한 설명이 충분해야 합니다. 예를 들어, '최신 연구에 대한 자세한 정보를 확인하세요'가 '자세히 보기'보다 명확합니다. 또한, 양식 제출 등과 같은 작업으로 연결되는지 여부도 명확해야 합니다. 링크의 목적에 대한 웹 콘텐츠 접근성 가이드라인(WCAG) 문서를 확인하세요.

색상으로 전달되는 정보는 패턴, 글꼴 스타일 및 아이콘과 같은 별도의 지표를 가져야 합니다. 예를 들어, 링크 텍스트에는 밑줄이 그어져야 하고 그래프는 다른 패턴 또는 텍스처의 데이터도 표시해야 합니다. 색상 사용에 대한 웹 콘텐츠 접근성 가이드라인(WCAG) 문서를 확인하세요.

이미지의 텍스트(예: 사인 또는 슬로건 사진)는 스크린리더가 읽을 수 없습니다. 가능한 한 이러한 이미지를 실제 텍스트로 대체하는 것이 좋습니다. 

이미지 텍스트가 사이트 콘텐츠의 중요한 부분이거나 정보를 전달하는 데 필수적인 경우, 이미지 설명에 텍스트(대체 텍스트)를 포함하세요. 이미지 내 텍스트에 대한 자세한 도움말을 확인하세요.

사이트에 미디어(예: 동영상, GIF, 오디오 파일)가 포함되어 있는 경우, 모든 사이트 방문자가 액세스할 수 있도록 해야 합니다.

스크립트, 캡션 등과 같은 대안을 추가해 접근성을 보장할 수 있습니다. 이를 통해 모든 사이트 방문자가 콘텐츠에 액세스하고 즐길 수 있습니다. 대체 미디어에 대한 자세한 도움말을 확인하세요.

일부 동영상 및 오디오 플레이어는 페이지 로딩 시 자동으로 재생되도록 설정될 수 있습니다. 하지만, 이는 방문자에게 혼란을 초래하고 주의를 산만하게 할 수 있으며, 보조 기술을 방해할 수 있습니다. 예를 들어, 자동으로 시작되는 오디오 플레이어는 스크린 리더를 덮어쓰거나 음성이 겹칠 수 있습니다. 

따라서, 방문자에게 콘텐츠를 중지 / 일시 중지 및 음소거할 수 있는 옵션을 제공하는 것이 좋습니다. 컨트롤 추가에 대한 자세한 도움말을 확인하세요.

브라우저가 확대되는 경우 사이트 요소 또는 구성 요소는 계속 표시됩니다. 이는 시각 장애가 있는 사용자가 사이트를 확대해도 페이지의 모든 콘텐츠를 볼 수 있도록 하기 위한 것입니다. 사이트를 미리보기하고 브라우저의 확대/축소를 200%로 변경해 이를 확인할 수 있습니다. 확대된 콘텐츠에 대한 자세한 도움말을 확인하세요.

웹 접근성은 여러 국가에서 법적으로 요구하는 사항입니다. 하지만, 해당 지역의 법적 요구 사항이 아니더라도 해당 정보를 추가하는 것이 좋습니다. 이는 모든 방문자가 즐길 수 있는 사이트를 제공하기 위한 사이트 / 클라이언트의 노력을 보여줍니다. 접근성 표시 정보에 대한 자세한 도움말을 확인하세요.