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