문서의 소스와 연결이 끊긴 순서로 항목을 정렬하는 레이아웃 방법 문제에 대한 제안된 해결책에 관한 의견을 부탁드립니다.
CSS 작업 그룹은 레이아웃 메서드가 소스와 연결이 끊어진 순서로 항목을 정렬하여 문서의 읽기 및 포커스 순서와 연결이 끊어지는 상황에 대한 해결책을 마련하고 있습니다. 이 도움말에서는 문제와 제안된 해결 방법을 설명하며, 의견을 보내주시기 바랍니다.
문제
HTML 문서의 읽기 순서는 소스 순서를 따릅니다. 즉, 스크린 리더는 소스에 배치된 대로 문서를 읽고 키보드를 사용하여 문서를 탭하는 사용자도 해당 소스 순서를 따릅니다. 일반적으로 이는 타당하며, 콘텐츠의 읽기 모드 프레젠테이션, 스크린 리더, CSS가 제한된 기기에는 문서의 적절한 소스 순서가 중요합니다. 하지만 CSS, 특히 flexbox와 그리드를 사용하면 레이아웃이 기본 소스와 다른 시각적 읽기 순서를 정의하는 레이아웃을 만들 수 있습니다.
예를 들어 플렉스 항목에 order 속성을 사용하면 레이아웃 순서는 변경되지만 소스의 순서는 변경되지 않습니다.
그리드 레이아웃을 사용하면 선택한 레이아웃 메서드가 탭 순서를 뒤섞을 수 있습니다. 예를 들어 항목의 무작위 레이아웃 순서를 만드는 grid-auto-flow: dense를 사용하는 경우입니다.
개발자가 소스에 명시된 순서와 다른 순서로 그리드에 항목을 배치하여 연결이 끊어질 수도 있습니다.
제안된 해결 방법
CSS 작업 그룹은 이 문제에 대한 해결책을 제안하고 있으며, 이 접근 방식에 대한 개발자 및 접근성 커뮤니티의 의견을 기다리고 있습니다.
reading-order: auto로 무작위 레이아웃 따르기
그리드 레이아웃에서 밀도 높은 패킹을 사용하는 등 레이아웃 순서가 무작위로 지정되는 상황에서는 브라우저가 소스 순서가 아닌 레이아웃을 따르도록 하는 것이 좋습니다. 이렇게 하려면 플렉스 또는 그리드 항목에 auto 값이 있는 reading-order 속성이 있어야 합니다.
다음 CSS를 사용하면 grid-auto-flow: dense로 인해 밀집된 항목의 배치에 따라 읽기 순서가 지정됩니다.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
reading-order-items로 무작위가 아닌 레이아웃 따르기
일부 그리드 및 플렉스 레이아웃에서는 레이아웃 순서를 쉽게 이해할 수 있습니다. 예를 들어 order 속성을 사용하여 항목의 순서를 재정렬하는 플렉스 레이아웃에는 order 속성에 의해 결정되는 명확한 레이아웃 순서가 있습니다. 이상적인 레이아웃 순서가 명확하지 않은 다른 레이아웃에서는 선택지가 두 개 이상일 수 있습니다. 따라서 무작위가 아닌 레이아웃을 따를 때는 레이아웃 순서에 대한 의도를 설명하는 키워드 값과 함께 grid-order-items 속성을 컨테이너에 추가해야 합니다.
다음 예는 row-reverse를 사용하는 플렉스 레이아웃을 보여줍니다. 플렉스 항목에는 reading-order: auto이 있고 플렉스 컨테이너에는 reading-order-items: flex flow이 있어 시각적 순서 (flex visual로 표시할 수 있음)가 아닌 flex-flow 방향을 따르는 읽기 순서를 원한다는 것을 나타냅니다.
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
다음 예에서는 grid-template-areas를 사용하여 그리드 레이아웃을 만들고 항목이 소스 순서와 다른 레이아웃 순서로 배치됩니다. reading-order-items 속성은 다음 행으로 이동하기 전에 각 행을 순회하여 레이아웃 순서를 따라야 함을 나타내는 데 사용됩니다. (grid column은 반대 방향을 나타냅니다.)
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
소스 순서가 중요하지 않다는 의미인가요?
아니요, 소스 순서는 여전히 중요합니다. 이 기능은 읽기 순서가 소스와 다를 수 있는 특정 상황에서만 사용해야 합니다. 예를 들어 밀도 높은 그리드 패킹과 같이 연결이 끊어질 수 있는 레이아웃 방법을 사용하거나 특정 중단점에서 다른 레이아웃 순서가 적합한 경우입니다.
이러한 속성을 사용할 때는 CSS 없이 페이지가 렌더링될 경우에 적합한 순서로 소스 문서를 만드세요. 이러한 속성은 필요한 위치와 중단점에서만 추가하세요.
저작 도구에서 이러한 속성을 적용해야 하나요?
요소를 드래그 앤 드롭하여 그리드 레이아웃을 만들 수 있는 제작 도구는 사용자가 합리적인 소스 문서를 만들도록 유도해야 합니다. 따라서 대부분의 경우 이러한 속성을 연결 해제를 처리하는 게으른 방법으로 사용하는 것보다 레이아웃 순서에 따라 소스를 재정렬하는 것이 더 적절합니다.
이 제안에 대한 의견을 공유해 주세요.
이 기능에 대한 의견을 수집하고자 합니다. 특히 이 방법으로 해결되지 않는 사용 사례가 있거나 접근성 문제가 있는 경우 CSS 워킹 그룹에 알려주세요.
진행 중인 스레드에는 접근 방식에 관한 다양한 사용 사례와 의견이 포함되어 있습니다. 이 스레드에 의견을 추가하고 이 제안과 관련된 잠재적인 문제를 강조할 수 있습니다. 현재 제안은 스레드를 시작한 초기 제안과 매우 다릅니다. 관심 있는 분들은 오늘날의 결과에 이르기까지의 모든 대화를 즐길 수 있습니다. 이는 CSS 워킹 그룹에서 제안이 브라우저에서 구현할 수 있는 것으로 발전하는 과정을 보여주는 좋은 예이기 때문입니다.
패트릭 토마소의 썸네일 이미지 의견과 검토를 제공해 주신 크리스 해럴슨, 탭 앳킨스, 이언 킬패트릭에게 감사드립니다.