[스케치노트] CSS의 가시성

소개

CSS에서 가시성을 전환하는 방법에는 여러 가지가 있습니다. 개인적으로 저는 Marcy Sutton's Frontend Masters 과정: Accessibility in JavaScript Applications을 수강할 때까지 왜 다른 접근 방식보다 한 접근 방식을 선택하는지 이해하지 못했습니다.

Marcy는 CSS로 요소를 숨기는 올바른 접근 방식을 선택할 때 두 가지 고려 사항을 강조합니다.

accessibility tree에 계속 표시되어야 합니까?

예: 요소는 화면 판독기와 같은 보조 기술로 알려야 합니다.

아니요: 보조 기술로 요소를 발표하면 안 됩니다.

DOM에서 공간을 보존해야 합니까?

예: 요소가 표시되는 경우 렌더링되었을 위치 뒤에 빈 공간이 남아 있어야 합니다.

아니오: 숨겨진 요소는 문서 흐름에서 완전히 제거되어야 합니다.

위의 두 가지 질문에 대한 답변에 따라 사용할 CSS 접근 방식을 보여주기 위해 이 다이어그램을 작성했습니다.

Note: The class names aren't important, they're just wrappers around the actual CSS properties. You could apply these styles using whatever CSS selector you want.

사례 1: 접근성 트리에 표시 및 공간 보존

.opacity {
  opacity: 0;
}

Opacity은 페이지에서 요소의 가시성을 애니메이션화하는 데 사용할 수 있는 훌륭한 속성입니다. 예를 들어 페이지에서 요소가 페이드 인 또는 페이드 아웃되도록 애니메이션을 추가할 수 있습니다.

불투명도는 요소를 위한 공간을 유지하므로 요소가 보이거나 보이지 않을 때 페이지 아래에 있는 콘텐츠가 위아래로 점프하는 것에 대해 걱정할 필요가 없습니다.

사례 2: 접근성 트리에 표시되고 공간을 보존하지 않음

.visually-hidden {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

이 특별한 경우를 달성하려면 서로 다른 CSS 속성의 조합을 사용해야 합니다. 이러한 속성으로 스타일이 지정된 요소는 보조 기술에 표시되지만 렌더링된 페이지 자체에는 표시되지 않습니다.

화면 판독기 전용 텍스트 또는 의미상 필요하지만 페이지 디자인의 일부가 아닌 제목에 이러한 스타일을 사용할 수 있습니다.

사례 3: 접근성 트리에 표시되지 않고 공간을 보존함

.visibility {
    visibility: hidden;
}

visibility 속성을 사용하여 렌더링된 페이지에서 해당 요소에 대한 빈 공간을 남겨두면서 보조 기술에서 요소를 숨길 수 있습니다.

이는 사용자에게 무언가를 숨겨야 하지만 페이지 레이아웃의 나머지 부분을 엉망으로 만들고 싶지 않은 경우에 유용할 수 있습니다. MDN은 나머지 테이블 셀의 정렬을 엉망으로 만들지 않고 테이블에서 단일 셀을 숨기는 예를 사용합니다. (디지털 원소 주기율표를 만들려고 한다면?)

사례 4: 접근성 트리에 표시되지 않고 공간을 보존하지 않음

.display-none {
    display: none;
}

시각적 사용자와 보조 기술 사용자 모두에 대해 요소를 숨기려면 display 속성을 none 로 설정할 수 있습니다. 이렇게 하면 보조 기술에서 요소와 모든 하위 요소가 숨겨집니다.

이것은 닫힐 때 햄버거 메뉴 또는 모달의 내용을 숨기는 것과 같은 작업에 유용할 수 있습니다. 요소가 화면에 표시되는 것을 원하지 않으며 화면 판독기가 콘텐츠가 보이지 않는 동안 콘텐츠를 읽는 것도 원하지 않습니다.

마무리

이 다이어그램이 다음에 웹사이트에서 요소를 시각적으로 숨겨야 할 때 도움이 되기를 바랍니다. 가시성을 전환하는 데 사용하는 다른 CSS 기술이 있으면 알려주세요!

액세스 가능한 JavaScript 애플리케이션을 빌드하는 방법에 대해 자세히 알아보려면 Frontend Masters에 대한 Marcy의 과정Accessibility in JavaScript Applications을 확인하는 것이 좋습니다.

내 글에 대한 최신 정보를 받으려면 RSS feed for my blog을 구독하거나 을(를) 구독할 수 있습니다. 주위에 당신을보고!

추가 리소스

CSS in Action: Invisible Content Just for Screen Reader Users (WebAIM)