Wix 하모니 에디터: 접근성 마법사 사용하기

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

초점 표시기를 통해 방문자는 현재 위치를 파악할 수 있으므로 사이트 접근성에 매우 중요합니다. 초점 표시기에 대해 자세히 알아보세요.

'메인 콘텐츠로 바로가기' 기능을 사용하면 키보드로 탐색하는 방문자가 메뉴나 페이지 제목 등 사이트 상단 섹션을 건너뛰고 페이지의 메인 콘텐츠로 바로 이동할 수 있습니다.

'메인 콘텐츠로 바로가기' 링크는 방문자가 필요한 정보에 빠르게 액세스하도록 지원하므로 사이트 접근성에 중요한 요소입니다. '메인 콘텐츠로 바로가기'에 대해 자세히 알아보세요.

사이트의 기본 언어를 설정하면 보조 기술이 콘텐츠를 정확하게 표시하는 데 필요한 정보를 제공할 수 있습니다. 기본 언어는 다음과 같은 역할을 합니다.

보조 기술을 사용하는 방문자에게 최적의 환경을 제공하려면 사이트의 기본 언어를 설정하는 것이 중요합니다.

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

단, 다음 작업은 가능합니다.

사이트의 DOM 순서는 페이지 요소의 선택 및 읽기 순서를 결정합니다. 즉, 스크린 리더가 요소를 읽는 순서와 Tab 키를 사용할 때 요소가 강조 표시되는 순서를 의미합니다.

DOM 순서는 사이트 언어의 방향에도 영향을 받습니다. 요소의 읽기 순서와 시각적 순서가 일치하도록 마법사를 사용해 DOM 순서를 구성하는 것이 좋습니다. DOM 순서 및 접근성에 대해 자세히 알아보세요.

참고: 이 작업은 DOM 순서와 사이트 언어 방향이 일치하지 않는 경우에만 표시됩니다.

페이지의 제목 태그는 일반적으로 검색 엔진이 검색 결과에 표시하는 페이지 제목입니다. 페이지에 지정한 이름과 사이트 이름을 바탕으로 생성됩니다.

제목 태그에 '새 페이지'(사이트에 추가한 새 페이지에 지정되는 기본 이름) 또는 '사본'(복제한 페이지에 지정되는 기본 이름)이 포함되어 있으면 마법사에서 페이지 제목을 변경하라는 메시지를 표시합니다.

페이지 제목 태그는 보조 기술을 사용하는 방문자에게 페이지 콘텐츠에 대한 중요한 정보를 제공합니다. 최적의 환경을 제공하려면 페이지 제목을 다음과 같이 작성해야 합니다.

도움말: 정확한 페이지 제목 태그는 사이트 SEO의 중요한 요소이기도 합니다.

제목 태그는 페이지 내 텍스트 콘텐츠의 계층과 구조를 결정하는 사이트 HTML 코드의 요소입니다. 제목 태그는 제목 1(H1)부터 제목 6(H6), 단락 텍스트(P)까지 위에서 아래 순서로 구성됩니다.

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

따라서 정확한 제목 구조를 사용해야 보조 기술을 이용하는 방문자가 콘텐츠를 명확하고 논리적인 순서로 탐색할 수 있습니다.

접근성 마법사에서 다양한 제목 태그를 조정할 수 있습니다. 하지만 현재 일부 요소는 접근성 마법사와 완전히 연동되지 않으므로 직접 조정해야 합니다.

대체 텍스트는 웹 페이지에 표시되는 이미지를 설명하는 텍스트입니다.

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

따라서 대체 텍스트는 보조 기술을 사용하는 방문자가 콘텐츠에 액세스하고 이미지의 내용을 이해하는 데 중요한 역할을 합니다. 대체 텍스트와 접근성에 대해 자세히 알아보세요.

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

필요한 색상 대비 비율은 요소 유형과 목표로 하는 WCAG(웹 콘텐츠 접근성 지침) 수준에 따라 달라집니다. 해당 수준은 AA(최소 요구 사항) 또는 AAA(향상된 수준)입니다.

접근성 마법사에서 대부분의 사이트 콘텐츠에 대한 색상 대비를 조정할 수 있습니다. 하지만 현재 일부 요소는 접근성 마법사와 완전히 연동되지 않으므로 직접 조정해야 합니다. 색상 대비 조정에 대해 자세히 알아보세요.

참고: 현재 접근성 마법사에서는 AA 수준만 필수입니다.

일부 사이트 방문자는 시각이나 청각에 영향을 주는 장애 또는 질환이 하나 이상 있을 수 있습니다. 미디어 파일에 대체 자료(예: 텍스트 변환본 및 오디오 설명)를 제공하면 이러한 방문자도 콘텐츠에 더 쉽게 액세스하고 내용을 이해하며 즐길 수 있습니다. 미디어 대체 자료에 대해 자세히 알아보세요.

DOM은 사이트 페이지에서 요소를 불러오고 읽는 순서를 의미하며, 스크린 리더 및 기타 보조 기술을 사용하는 방문자에게 매우 중요합니다. 마법사에서 DOM 순서를 구성해 요소가 화면에 표시되는 순서와 읽히는 순서를 일치시킬 수 있습니다. DOM 순서와 접근성에 대해 자세히 알아보세요.

참고: 이 업무는 하나 이상의 페이지 섹션에서 자동 DOM이 비활성화된 경우에만 표시됩니다.

다른 페이지나 섹션, 웹사이트로 연결되는 텍스트 또는 요소에는 링크의 목적을 명확하게 설명하는 문구를 사용해야 합니다. 예를 들어 '더 보기'보다는 '최신 연구에 대해 자세히 보기'가 더 명확합니다. 양식 제출과 같은 작업으로 연결되는 경우에도 이를 명확히 안내해야 합니다. 링크 용도에 관한 WCAG(웹 콘텐츠 접근성 지침) 문서 보기

색상으로 전달하는 정보에는 패턴, 글꼴, 아이콘 등 별도의 표시도 함께 사용해야 합니다. 예를 들어 링크가 적용된 텍스트에는 밑줄을 표시하고, 그래프의 데이터에는 서로 다른 패턴이나 텍스쳐를 사용해야 합니다. 색상 사용에 관한 WCAG(웹 콘텐츠 접근성 지침) 문서 보기.

표지판이나 슬로건을 촬영한 사진처럼 이미지에 포함된 텍스트는 스크린 리더가 읽을 수 없습니다. 가능하면 이러한 이미지를 실제 텍스트로 교체하는 것이 좋습니다.

이미지 속 텍스트가 사이트 콘텐츠의 중요한 부분이거나 정보 전달에 꼭 필요한 경우, 이미지 설명인 대체 텍스트에 해당 문구를 포함합니다. 이미지 내 텍스트에 대해 자세히 알아보세요.

일부 동영상 및 오디오 플레이어는 페이지를 불러올 때 자동으로 재생되도록 설정되어 있을 수 있습니다. 하지만 자동 재생은 방문자에게 혼란을 주거나 집중을 방해할 수 있으며, 보조 기술 사용에도 영향을 줄 수 있습니다. 예를 들어 오디오 플레이어가 자동으로 재생되면 스크린 리더의 음성을 덮어 방해할 수 있습니다.

따라서 방문자가 콘텐츠를 중지 또는 일시 중지하거나 음소거할 수 있는 옵션을 제공하는 것이 좋습니다. 작업 도구 추가에 대해 자세히 알아보세요

브라우저에서 화면을 확대해도 사이트의 요소와 구성 요소가 계속 표시되어야 합니다. 그래야 시각 장애가 있는 사용자가 사이트를 확대해도 페이지의 모든 콘텐츠를 확인할 수 있습니다. 사이트를 미리보기한 후 브라우저의 확대/축소 비율을 200%로 변경해 확인할 수 있습니다. 확대된 콘텐츠에 대해 자세히 알아보세요.

여러 국가에서는 웹 접근성 준수가 법적 의무입니다. 법적 의무가 아닌 지역에서도 접근성 표시 정보를 추가하는 것이 좋습니다. 이를 통해 모든 방문자가 편리하게 이용할 수 있는 사이트를 제공하려는 사이트 또는 클라이언트의 노력을 보여 줄 수 있습니다.  접근성 표시 정보에 대해 자세히 알아보세요.

마법사가 감지하지 못하는 색상 대비 문제가 사이트에 있을 수 있습니다. 모든 사이트 콘텐츠가 방문자에게 명확하게 표시되도록 다음 작업을 권장합니다. 사이트 콘텐츠의 대비를 직접 검토하고 필요에 따라 조정하세요.

마법사는 일반 사이트 페이지와 비즈니스 솔루션에 포함된 페이지(예: Wix 예약의 캘린더 페이지)를 비롯해 사이트 콘텐츠 대부분을 검사합니다.
다만 이러한 페이지의 일부 콘텐츠는 직접 검토하거나 수정해야 할 수 있습니다. 또한 일부 사이트 페이지는 마법사에서 검사하거나 지원하지 않습니다.

접근성 마법사는 다음 기능을 지원하지 않습니다.

이러한 페이지와 앱을 직접 살펴보고 체크리스트를 참고해 접근성을 개선할 방법을 확인해 보세요.

접근성 마법사를 사용한 후에도 다음과 같은 방법으로 방문자가 사이트를 더 편리하게 이용하도록 개선할 수 있습니다.