문서의 콘텐츠 순서는 사이트의 접근성을 위해 중요합니다. 스크린 리더는 문서 순서에 따라 콘텐츠에 의미를 부여하기 위해 선택한 HTML 요소를 사용하여 콘텐츠를 읽습니다. 터치스크린이나 마우스 대신 키보드를 사용하여 사이트를 탐색하는 사용자가 문서 주위를 탐색합니다. 즉, 활성 요소에서 활성 요소로 이동하고, 링크와 양식 필드 사이를 다시 한 번 이리저리 문서에 존재하는 순서대로 이동합니다.
따라서 잘 구성된 문서로 시작하여 올바른 HTML 요소를 모두 사용하는 것이 접근성이 뛰어난 사이트를 만드는 데 중요한 역할을 합니다. 하지만 CSS를 사용하기 시작할 때 작업 중 일부를 실행취소할 수 있습니다. 그 이유를 알아보겠습니다.
소스와 시각적 순서 비교
웹사이트 탐색은 종종 링크 목록으로 마크업됩니다. 그런 다음 Flexbox를 사용하여 가로 막대로 변환할 수 있습니다. 아래 Glitch 예시에서는 흔히 사용되는 패턴을 만들어 두었습니다. 예를 클릭하여 링크를 클릭하고 링크 사이를 이동합니다. 포커스는 영어로 읽는 순서인 왼쪽에서 오른쪽으로 논리적인 방향으로 이동합니다.
이런 종류의 패턴을 만든 다음 소스에서 두 번째인 문의하기를 끝까지 이동하라는 요청을 받은 경우 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용 접근성 통계 확장 프로그램에서 탭 정지 검사기를 사용해 보세요. 아래 이미지는 해당 도구의 CSS 그리드 예를 보여줍니다. 포커스가 레이아웃을 어떻게 이동하는지 확인할 수 있습니다.
콘텐츠 재정렬 및 반응형 웹 디자인
콘텐츠를 표시하는 프레젠테이션이 하나뿐인 경우 소스를 논리적인 순서로 설정하고 이를 레이아웃에 반영하는 것이 일반적으로 어렵지 않습니다. 다른 중단점에서 레이아웃을 고려하면 더 어려워질 수 있습니다. 예를 들어 작은 화면에서는 요소를 레이아웃 하단으로 이동하는 것이 좋습니다.
현재로서는 이 문제를 해결할 수 있는 좋은 방법이 없습니다. 대부분의 경우 '모바일 우선'을 개발하면 소스와 레이아웃을 순서대로 유지하는 데 도움이 됩니다. 모바일에서의 우선순위에 대한 선택은 대체로 일반적으로 콘텐츠에 적용할 수 있는 확실한 선택입니다. 핵심은 이러한 유형의 콘텐츠 재정렬 가능성이 있는 경우를 인식하고 각 중단점에서 최종 환경이 지나치게 거슬리지 않는지 테스트하는 것입니다.