CSS 레이아웃과 소스 순서 연결 해제 해결

문서 소스에서 연결 해제된 순서로 항목을 정렬하는 레이아웃 메서드의 문제에 관한 제안된 솔루션에 관한 의견을 듣고자 합니다.

CSS Working Group은 레이아웃 메서드가 소스와 연결 해제되어 문서의 읽기 및 포커스 순서와는 다른 순서로 항목을 정렬할 수 있는 상황을 해결하기 위해 노력하고 있습니다. 이 도움말에서는 문제와 제안된 해결 방법을 설명하고 의견을 제공해 주시기 바랍니다.

문제

HTML 문서의 읽기 순서는 소스 순서를 따릅니다. 즉, 스크린 리더는 원본에 배치된 대로 문서를 읽고 키보드를 사용하여 문서 주위를 탭하는 사용자도 원본 순서를 따릅니다. 일반적으로 이는 합리적이며 문서의 소스 순서는 콘텐츠, 스크린 리더, 제한된 CSS가 있는 기기의 읽기 모드 표시를 위해 매우 중요합니다. 그러나 CSS, 특히 Flexbox 및 그리드를 사용하면 레이아웃이 기본 소스와는 다른 시각적 읽기 순서를 정의하는 레이아웃을 만들 수 있습니다.

예를 들어 Flex 항목에서 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로 무작위로 지정되지 않은 레이아웃 따르기

일부 그리드 및 Flex 레이아웃에서는 레이아웃 순서를 간단하게 이해할 수 있습니다. 예를 들어 order 속성을 사용하여 항목을 재정렬하는 Flex 레이아웃에는 order 속성에 의해 지정된 명확한 레이아웃 순서가 있습니다. 다른 레이아웃에서는 이상적인 레이아웃 순서가 무엇인지 명확하지 않고, 선택 가능한 옵션이 두 개 이상 있을 수 있습니다. 따라서 무작위로 지정되지 않은 레이아웃을 따를 때는 레이아웃 순서의 의도를 설명하는 키워드 값과 함께 grid-order-items 속성을 컨테이너에 추가해야 합니다.

다음 예는 row-reverse를 사용하는 Flex 레이아웃을 보여줍니다. 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 없이 페이지가 렌더링될 경우에 적합한 순서를 사용하여 소스 문서를 만드세요. 이러한 속성은 해당 속성이 필요한 위치와 중단점에만 추가합니다.

작성 도구가 이러한 속성을 적용해야 하나요?

요소를 드래그 앤 드롭하여 그리드 레이아웃을 만들 수 있는 작성 도구는 사용자가 적절한 원본 문서를 만들도록 권장해야 합니다. 따라서 대부분의 경우 이러한 속성을 연결 해제를 처리하는 지연 방법으로 사용하는 것보다 레이아웃 순서에 따라 소스를 재정렬하는 것이 더 적절합니다.

이 제안에 대한 의견을 공유해 주세요.

Google은 이 문제에 대한 의견을 수렴하고자 합니다. 특히 이 방법으로 해결되지 않는다고 생각되는 사용 사례가 있거나 접근 방식과 관련하여 접근성이 우려되는 경우 CSS 실무 그룹에 알려주세요.

접근 방식에 대한 많은 사용 사례와 의견이 포함된 대화목록이 진행 중입니다. 이 대화목록에 의견을 추가하고 제안의 잠재적인 문제를 강조할 수 있습니다. 현재 제안은 대화목록을 시작한 최초의 제안과 매우 다릅니다. 관심 있는 사람들은 오늘날의 현재 자리로 이어지는 모든 대화를 좋아할 것입니다. CSS Working Group에서 제안이 어떻게 처리되어 브라우저에서 구현할 수 있는지 보여주는 좋은 예이기 때문입니다.

Patrick Tomasso의 썸네일 이미지. 의견과 검토를 제공해 주신 크리스 해럴슨, 탭 앳킨스, 이안 킬패트릭님께 감사드립니다.