문서 소스와 연결이 끊어진 순서로 항목을 정렬하는 레이아웃 메서드 문제에 대한 제안된 솔루션에 관한 의견을 보내주세요.
CSS 작업 그룹은 레이아웃 메서드가 소스와 연결이 끊어진 순서로 항목을 정렬하여 문서의 읽기 및 포커스 순서와 연결이 끊어지는 상황을 해결하기 위해 노력하고 있습니다. 이 도움말에서는 문제와 제안된 해결 방법을 설명하며, 의견을 보내주시기 바랍니다.
문제
HTML 문서의 읽기 순서는 소스 순서를 따릅니다. 즉, 스크린 리더는 소스에 배치된 대로 문서를 읽고, 키보드를 사용하여 문서를 탭하는 사용자도 해당 소스 순서를 따르게 됩니다. 일반적으로 이는 타당하며, 문서의 적절한 소스 순서는 콘텐츠의 읽기 모드 프레젠테이션, 스크린 리더, CSS가 제한된 모든 기기에 매우 중요합니다. 하지만 CSS, 특히 flexbox와 그리드를 사용하면 레이아웃이 기본 소스와 다른 시각적 읽기 순서를 정의하는 레이아웃을 만들 수 있습니다.
예를 들어 가변 항목에 order 속성을 사용하면 레이아웃 순서는 변경되지만 소스의 순서는 변경되지 않습니다.
그리드 레이아웃을 사용하면 선택한 레이아웃 메서드가 탭 순서를 뒤섞을 수 있습니다. 예를 들어 항목의 무작위 레이아웃 순서를 만드는 grid-auto-flow: dense를 사용하는 경우입니다.
개발자가 소스에 지정된 순서와 다른 순서로 그리드에 항목을 배치하여 연결이 끊어질 수도 있습니다.
제안된 솔루션
CSS Working Group에서는 이 문제에 대한 해결책을 제안하고 있으며, 이 접근 방식에 대한 개발자 및 접근성 커뮤니티의 의견을 기다리고 있습니다.
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를 사용하는 플렉스 레이아웃을 보여줍니다. Flex 항목에는 reading-order: auto가 있고 Flex 컨테이너에는 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 워킹 그룹에서 제안이 브라우저에서 구현할 수 있는 것으로 바뀌기까지 어떻게 진행되는지 보여주는 좋은 예이기 때문입니다.
Patrick Tomasso의 썸네일 이미지 의견과 검토를 제공해 주신 크리스 해럴슨, 탭 앳킨스, 이언 킬패트릭께 감사드립니다.