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