콘텐츠가 표시되는 순서가 의미에 영향을 미치는 경우 올바른 읽기 순서를 프로그래밍 방식으로 결정할 수 있습니다 .
의미를 이해하는데 필요한 읽기 순서를 유지한 채로 스크린리더 등 다양한 보조 기술이 콘텐츠를 렌더링 할 수 있도록 보장하기 위한 항목입니다.
정상 시력을 가진 사용자는 시선의 흐름에 따라 왼쪽에서 오른쪽으로, 위에서 아래로 콘텐츠를 탐색하는 반면, 스크린리더와 같은 보조 기술을 사용하는 사용자는 콘텐츠가 페이지에 표시되는 방식을 접근성 트리 및 DOM 구조에 의존하여 탐색합니다. 이 때문에 DOM 순서와 시각적 혹은 논리적 순서를 일치시키는 것이 가장 좋습니다.
만일 정상 시력자가 보는 콘텐츠 순서와 보조 기술 사용자가 탐색하는 DOM 순서가 서로 상이할 경우 서로 다른 경험을 가지게 됩니다.
예를 들어 정상 시력자가 보는 메뉴 순서와 DOM의 순서가 서로 정반대로 구성되어 있을 경우, (대표적으로 float: right
를 사용하여 구성되어 발생하는 메뉴) 정상 시력자가 스크린리더 사용자에게 2번째 메뉴를 누르라고 설명하면 스크린리더 사용자는 전혀 다른 메뉴를 누르게 될 수 있습니다.
유사하게 정상 시력자가 사용하는 콘텐츠의 논리적 순서와 DOM 순서가 서로 상이할 경우 서로 다른 경험을 가지게 됩니다. 예를 들어 어떤 버튼을 눌러 대화상자가 노출될 경우 정상 시력자는 버튼 → 대화상자로 시선 및 포인터 혹은 포커스를 이동하여 사용하지만, DOM 순서 혹은 포커스 순서가 이 순서대로 제공되지 않으면 스크린리더 사용자는 이 대화상자를 인식하거나 사용하지 못하게 될 수 있습니다.
이러한 문제를 해결하기 위해 다음을 고려하면 좋습니다.