콘텐츠 재정렬

Rachel Andrew

문서의 콘텐츠 순서는 사이트의 접근성에 중요합니다. 스크린 리더는 문서 순서에 따라 콘텐츠를 읽어주며, HTML 요소를 사용하여 콘텐츠에 추가적인 의미를 부여합니다.

터치 스크린이나 마우스 대신 키보드로 사이트를 탐색하는 사용자가 문서를 탭합니다. 활성 요소에서 활성 요소로 이동하고 링크와 양식 필드 사이를 탭으로 이동하며 요소가 문서에 있는 순서대로 이동합니다.

따라서 잘 구조화된 문서로 시작하고 올바른 HTML 요소를 사용하는 것이 접근성 높은 사이트를 만드는 데 중요한 부분입니다. 하지만 CSS를 사용하기 시작하면 이러한 좋은 작업을 일부 되돌릴 수 있습니다.

소스 순서와 시각적 순서

웹사이트 탐색은 링크 목록으로 마크업되는 경우가 많습니다. Flexbox를 사용하여 이를 가로 막대로 바꿀 수 있습니다. 다음 예에서는 일반적으로 사용되는 패턴을 만들었습니다. 예를 클릭하고 링크 사이를 탭합니다. 포커스는 영어로 읽는 순서인 왼쪽에서 오른쪽으로 논리적 방향으로 이동합니다.

이 탐색 패턴을 만들었는데 소스에서 두 번째인 문의하기를 끝으로 이동하라는 요청을 받았다고 가정해 보겠습니다. Flexbox order 속성을 사용하여 위치를 이동할 수 있습니다.

order 속성을 사용하여 항목을 재정렬하는 다음 예시에서 탭을 사용하여 항목을 이동해 보세요.

포커스가 마지막 항목으로 이동했다가 다시 돌아옵니다. 탭 순서에 관해서는 해당 항목이 두 번째 항목입니다. 하지만 시각적으로는 마지막 항목입니다.

이 예시에서는 CSS를 사용하여 콘텐츠를 재정렬하고 순서를 변경할 때 발생하는 문제를 강조합니다. 이 문제를 올바르게 해결하려면 CSS를 사용하여 변경사항을 에뮬레이션하는 대신 소스에서 링크의 순서를 변경해야 합니다.

어떤 CSS 속성이 재정렬을 유발할 수 있나요?

요소를 이동할 수 있는 레이아웃 메서드는 이 문제를 일으킬 수 있습니다. 다음 CSS 속성은 일반적으로 콘텐츠 재정렬 문제를 일으킵니다.

position: absolute를 사용하여 시각적으로 흐름에서 항목을 가져옵니다.
Flexbox 및 그리드 레이아웃의 order 속성
Flexbox의 flex-direction에 대한 row-reverse 및 column-reverse 값입니다.
그리드 레이아웃에서 grid-auto-flow의 dense 값입니다.
그리드 레이아웃에서 grid-template-areas을 사용하여 행 이름이나 번호로 배치하는 경우

다음 예에서는 CSS 그리드를 사용하여 레이아웃을 만들고 소스에서 항목의 위치를 고려하지 않고 선 번호를 사용하여 항목을 배치했습니다.

이 예시를 탭으로 이동하면서 포커스가 어떻게 이동하는지 확인해 보세요. 특히 긴 페이지인 경우 매우 혼란스러운 환경이 될 수 있습니다.

문제 테스트

간단한 테스트 방법은 키보드로 페이지를 탐색하는 것입니다. 모든 항목에 액세스할 수 있나요? 이때 이상한 점프가 있나요?

콘텐츠 재정렬을 시각적으로 보여주는 데모를 보려면 Chrome 확장 프로그램인 Accessibility Insights의 탭 정지 검사기를 사용해 보세요. 스크린샷은 해당 도구의 CSS 그리드 예를 보여줍니다. 포커스가 레이아웃에서 어떻게 이동하는지 확인할 수 있습니다.