접근성: 사이트의 DOM 순서 확인 및 조정하기
5 분
페이지 메뉴
- 사이트의 DOM 순서
- DOM 순서가 중요한 이유
- 접근성 마법사의 자동 DOM
- 수동으로 사이트의 DOM 순서 변경하기
- 사이트 언어와 DOM
사이트의 DOM 순서는 스크린 리더와 Tab 키가 페이지의 콘텐츠를 강조 표시하거나 "읽는" 순서입니다. 방문자가 사이트에서 최상의 경험을 얻고 콘텐츠를 탐색하고 즐길 수 있도록 논리적 순서를 따라야 합니다.
사이트의 DOM 순서
사이트 DOM은 사이트 페이지 요소의 로딩 및 읽기 순서입니다. Wix는 요소의 시각적 순서에 따라 DOM 순서를 자동으로 설정합니다. 접근성 도구를 개발할 때 Wix는 다음 스크린 리더를 사용해 제품을 테스트합니다.
- Windows + Firefox 또는 Chrome: NVda(무료 리더)
- iOS + Safari: VoiceOver(내장 리더)
이는 위의 응용 프로그램 기능을 염두에 두고 사이트의 자동 DOM 순서를 생성했음을 의미합니다.
DOM 순서가 중요한 이유
일부 사이트 방문자는 스크린 리더 및 기타 보조 기술을 사용해 사이트를 탐색할 수 있습니다. 이러한 기술은 사이트 콘텐츠를 스캔하고 방문자에게 소리 내어 읽어주는 방식으로 시각 장애가 있는 방문자를 지원합니다.
스크린 리더를 사용하는 방문자와 거동에 영향을 주는 질환이 있는 방문자는 Tab 키를 사용해 사이트 콘텐츠를 탐색할 수 있습니다. 따라서, 사이트 DOM 순서는 스크린 리더 또는 Tab 키를 사용하는 방문자가 논리적 순서로 사이트를 탐색할 수 있어야 하므로 중요합니다.
예를 들어, 사이트 메뉴가 먼저 오고 그 다음에 머리글의 나머지 요소가 오고, 페이지 제목, 페이지 콘텐츠 등이 차례로 와야 합니다. DOM 순서가 잘못된 경우, 스크린 리더 / Tab 키가 페이지 콘텐츠를 건너뛸 수 있습니다.
사이트의 DOM 순서를 테스트하고 싶으신가요?
사이트의 라이브 버전에서 키보드의 Tab 키 또는 스크린 리더를 사용해 Wix 사이트의 자동 DOM 순서를 테스트할 수 있습니다.
접근성 마법사의 자동 DOM
Studio 에디터에서 접근성 마법사를 열면, DOM 순서를 자동으로 구성하는 옵션이 표시될 수 있습니다. 이 옵션은 마법사의 스캔 및 결과 작업의 정확성을 보장하므로 선택하는 것이 좋습니다.
체크 상자가 표시되지 않는다면:
사이트 DOM 구성 옵션은 다음과 같은 경우 표시되지 않습니다.
- 사이트가 2024년 11월 초 이후 생성된 경우
- 이전에 접근성 마법사를 사용해 사이트 DOM을 구성한 적이 있는 경우
- 사이트에서 자동 DOM을 비활성화한 경우
수동으로 사이트의 DOM 순서 변경하기
사이트의 DOM 순서가 논리적이지 않은 경우, 수동으로 조정해 방문자에게 향상된 경험을 제공할 수 있습니다.
접근성 마법사 및 레이어 패널을 사용해 Wix 에디터 사이트의 DOM을 변경하세요. Studio 에디터에서 사이트를 구축하는 경우, 사이트의 레이어 및 페이지 패널에서 순서를 조정할 수 있습니다.
중요!
사이트의 탭 순서가 논리적인 경우, 아무 조치도 필요하지 않습니다. 이미 올바른 순서를 변경하면 방문자가 스크린 리더나 Tab 키를 사용하는 데 문제가 발생할 수 있습니다.
DOM 순서를 변경하려면:
Wix 에디터
Studio 에디터
Wix는 사이트에 대한 DOM 순서를 자동으로 설정하므로 접근성 마법사에서 DOM 순서를 비활성화해야 합니다. 그런 다음, 필요에 따라 사이트의 레이어 패널에서 요소의 DOM 순서를 수동으로 조정할 수 있습니다.
DOM 순서를 수동으로 정렬하려면:
- 에디터로 이동합니다.
- 상단에서 설정을 클릭한 후 접근성 마법사를 선택합니다.
- 오른쪽 마법사에서 사이트 스캔을 클릭합니다.
- 발견된 문제 탭을 클릭합니다.
- 사이트 수준을 선택합니다.
- DOM 순서 구성을 클릭합니다.
- 수동을 선택합니다.
- 적용을 클릭합니다.
- 에디터 왼쪽 하단에서 레이어
를 클릭합니다. - 목록을 확인하고 중복되는 요소를 삭제하세요. 여기에는 사이트에서 필요하지 않고 스크린 리더 사용자에게 혼란을 줄 수 있는 중복 요소가 포함됩니다.
- 나머지 요소를 원하는 순서로 끌어다 놓습니다.
다음 단계:
모바일 에디터를 열어 동일한 단계를 반복합니다.
참고:
- Tab 키를 사용해 사이트를 탐색하면 인터랙티브 요소만 탐색하며 텍스트와 같은 정적 요소는 탐색할 수 없습니다. 텍스트와 같은 정적 요소에서 스크린 리더를 테스트하려면, 키보드로 사이트를 올바르게 탐색하는 방법에 대한 스크린리더 도움말 센터의 지침을 따르세요.
- 고정된 요소는 자동으로 탭 순서의 끝에 배치됩니다. 순서 앞부분에 탭이 지정되도록 하려면 요소의 고정을 해제하고 머리글에 배치하는 것이 좋습니다.
다음 단계:
접근성 체크리스트로 돌아가 사이트의 접근성에 대한 작업을 계속 진행하세요.
사이트 언어와 DOM
언어마다 읽기 순서가 다릅니다. 예를 들어 영어는 왼쪽에서 오른쪽으로 읽고, 히브리어는 오른쪽에서 왼쪽으로 읽습니다. 사이트 언어가 읽기 방향이 다른 언어로 변경되면, 요소의 시각적 및 DOM 순서가 더 이상 정렬되지 않을 수 있습니다.
접근성 마법사에서 자동 DOM 옵션을 활성화해 요소 순서가 사이트 언어의 읽기 방향과 일치하도록 하는 것이 좋습니다.
중요!
사이트에 왼쪽에서 오른쪽으로 및 오른쪽에서 왼쪽으로 쓰는 언어로 된 콘텐츠가 모두 있는 경우, DOM 순서를 수동으로 조정하는 것이 좋습니다.
마법사에서 자동 DOM을 활성화하려면:
- 접근성 마법사로 사이트를 스캔합니다.
- 발견된 문제 탭을 클릭합니다.
- 사이트 수준을 선택합니다.
- DOM 순서 구성을 클릭합니다.
- 자동(권장)을 선택합니다.
- 적용을 클릭합니다.
- (선택사항) 사이트 요소의 시각적 표시를 확인해 정렬되어 있는지 확인합니다.
참고:
- 이 옵션은 요소의 시각적 표시를 변경할 수 있으므로 변경사항을 검토해 사이트가 원하는 대로 표시되는지 확인하는 것이 좋습니다.
- 이 기능은 모든 사이트 구성 요소를 지원하지 않으며, 읽기 방향을 수동으로 조정해야 할 수 있습니다.
아이콘을 클릭합니다.