레이아웃 메서드가 항목을 문서 소스와 연결되지 않은 순서로 정렬하는 문제에 대한 제안된 해결 방법에 관한 의견을 보내 주세요.
CSS 작업 그룹은 레이아웃 메서드가 소스와 연결 해제되어 문서의 읽기 및 포커스 순서와 연결 해제된 순서로 항목을 정렬할 수 있는 상황에 대한 해결 방법을 연구하고 있습니다. 이 도움말에서는 문제와 제안된 해결 방법을 설명하며 의견을 보내주시면 감사하겠습니다.
문제
HTML 문서의 읽기 순서는 소스 순서를 따릅니다. 즉, 화면 리더는 소스에 레이아웃된 대로 문서를 읽고 키보드를 사용하여 문서에서 탭하는 사용자도 소스 순서를 따릅니다. 일반적으로 이는 적절하며, 문서의 적절한 소스 순서는 콘텐츠, 화면 리더, CSS가 제한된 기기의 읽기 모드 프레젠테이션에 매우 중요합니다. 그러나 CSS, 특히 flexbox 및 그리드는 레이아웃이 기본 소스와 다른 시각적 읽기 순서를 정의하는 레이아웃을 만들 수 있습니다.
예를 들어 플렉스 항목에 order
속성을 사용하면 레이아웃 순서는 변경되지만 소스의 순서는 변경되지 않습니다.
그리드 레이아웃을 사용하면 선택한 레이아웃 메서드로 인해 탭 순서가 뒤섞일 수 있습니다. 예를 들어 grid-auto-flow: dense
를 사용하면 항목의 레이아웃 순서가 무작위로 생성됩니다.
개발자가 그리드에 항목을 소스에서 지정한 순서와 다른 순서로 배치하여 이러한 연결 해제를 일으킬 수도 있습니다.
제안된 해결 방법
CSS 작업 그룹은 이 문제에 대한 해결책을 제안하고 있으며 이 접근 방식에 관한 개발자 및 접근성 커뮤니티의 의견을 기다리고 있습니다.
reading-order: auto
로 무작위 레이아웃 따르기
그리드 레이아웃에서 빽빽한 패킹을 사용할 때와 같이 무작위 레이아웃 순서가 생성되는 상황에서는 브라우저가 소스 순서가 아닌 레이아웃을 따르는 것이 좋습니다. 이렇게 하려면 flex 또는 그리드 항목에 값이 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
를 사용하여 무작위가 아닌 레이아웃 따르기
일부 그리드 및 Flex 레이아웃에서는 레이아웃 순서를 쉽게 파악할 수 있습니다. 예를 들어 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 실무 그룹에서 제안서가 브라우저에서 구현될 수 있도록 구현되는 방식을 보여주는 좋은 예이기 때문입니다.
패트릭 토마소님이 제작한 썸네일 이미지입니다. Chris Harrelson, Tab Atkins, Ian Kilpatrick님께 의견과 검토를 제공해 주셔서 감사합니다.