inert 속성

Emma Twersky

inert 속성은 포커스 이벤트와 보조 기술의 이벤트를 포함하여 요소의 사용자 입력 이벤트를 삭제하고 복원하는 방법을 간소화하는 전역 HTML 속성입니다.

Inert는 대화상자 요소의 기본 동작입니다(예: showModal를 사용하여 사용자가 선택한 후 화면에서 닫을 수 있는 대화상자를 여는 경우). <dialog>를 열면 페이지의 나머지 부분이 비활성 상태가 됩니다. 예를 들어 더 이상 링크를 클릭하거나 탭하여 링크를 이동할 수 없습니다.

inert 속성을 사용하여 다른 요소에서 동일한 동작을 실행할 수 있습니다.

Inert는 이동 기능이 없음을 의미하므로, 비활성을 표시할 때 이러한 DOM 요소에서 움직임이나 상호작용을 제거해야 합니다.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

여기서 button2가 포함된 두 번째 <div> 요소에서 inert가 선언되었습니다. 따라서 버튼과 라벨을 포함하여 이 <div> 내에 포함된 모든 콘텐츠가 포커스를 받거나 클릭할 수 없습니다.

inert 속성은 접근성에 특히 유용합니다. 특히 포커스 트래핑을 방지하는 데 사용됩니다

접근성 향상

웹 콘텐츠 접근성 가이드라인에서는 포커스 관리와 합리적이고 사용 가능한 포커스 순서를 요구합니다. 여기에는 검색 가능성과 상호작용이 모두 포함됩니다. 이전에는 aria-hidden="true"를 사용하여 검색 가능성을 억제할 수 있었지만 상호작용이 더 어려웠습니다.

inert를 사용하면 개발자가 탭 순서와 접근성 트리에서 요소를 삭제할 수 있습니다. 이를 통해 검색 가능성과 상호작용을 모두 제어하고 더욱 유용하고 접근성이 높은 패턴을 빌드할 수 있습니다.

inert를 요소에 적용하여 접근성을 개선하는 주요 사용 사례는 두 가지입니다.

• 요소가 DOM 트리의 일부이지만 화면을 벗어나거나 숨겨져 있을 때
• 요소가 DOM 트리의 일부이지만 대화형이 아니어야 하는 경우

화면 밖 또는 숨겨진 DOM 요소

일반적인 접근성 관련 우려사항 중 하나는 창 이 메서드는 DOM에 사용자에게 항상 표시되지는 않는 요소를 추가합니다. inert를 사용하면 창 하위 요소가 화면 밖에 있을 때 키보드 사용자가 실수로 창 하위 요소와 상호작용하는 것을 방지할 수 있습니다.

비대화형 DOM 요소

또 다른 일반적인 접근성 문제는 UI 디자인이 표시되거나 부분적으로 표시되지만 명확하게 대화형은 아닌 경우입니다. 예를 들어 페이지가 로드되는 동안, 양식을 제출하는 동안, 또는 대화상자 오버레이가 열려 있을 때 이 문제가 발생할 수 있습니다.

사용자에게 최상의 환경을 제공하기 위해 UI 및 '함정' 상태를 표시합니다. 페이지에서 상호작용하는 부분에 초점을 맞춥니다.

포커스 트래핑

포커스 트래핑은 좋은 UI 접근성의 핵심 개념입니다. 스크린 리더 포커스가 대화형 UI 요소에 있는지 확인하고 요소가 상호작용을 차단하는 경우를 인식해야 합니다. 이렇게 하면 악의적인 스크린 리더가 페이지 오버레이 뒤에 도달하거나 첫 번째 제출이 처리되는 동안 실수로 양식을 제출하는 것을 방지할 수 있습니다.

inert를 사용하면 검색 가능한 유일한 콘텐츠에 도달할 수 있습니다. 이는 다음과 같은 경우에 유용합니다.

• 모달 대화상자, 포커스 트래핑 메뉴 또는 측면 탐색 등의 요소를 차단합니다.
• 비활성 항목이 포함된 캐러셀
• 적용할 수 없는 양식 콘텐츠 (예: '청구서 수신 주소와 동일' 체크박스가 선택된 경우 '배송지 주소' 입력란이 사라지고 비활성화됨)
• 일관성이 없는 상태에서 전체 UI 사용 중지

inert 요소를 시각적으로 표시하기

기본적으로 하위 트리가 비활성 상태임을 시각적으로 표시하지 않습니다. DOM에서 활성화된 부분과 비활성 상태인 부분을 명확하게 표시하는 것이 좋습니다.

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

모든 사용자가 한 번에 페이지의 모든 부분을 볼 수 있는 것은 아닙니다. 예를 들어 스크린 리더, 소형 기기, 돋보기를 사용하는 사용자나 특별히 작은 창만 사용하는 사용자도 페이지의 활성 부분을 보지 못할 수 있으며, 비활성 섹션이 명확히 비활성 상태가 되지 않으면 불만을 느낄 수 있습니다. 개별 컨트롤의 경우 사용 중지된 속성이 더 적합할 수 있습니다.

어떤 상호작용과 움직임이 차단되나요?

기본적으로 inert는 포커스 및 클릭 이벤트를 차단합니다. 보조 기술의 경우 탭 기능과 검색 가능 여부도 차단됩니다. 브라우저가 요소의 페이지 검색 및 텍스트 선택을 무시할 수도 있습니다.

inert의 기본값은 false입니다.