inert 속성

Emma Twersky

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

Inert는 대화상자 요소의 기본 동작입니다. 예를 들어 showModal를 사용하여 사용자가 선택할 수 있는 대화상자를 연 다음 화면에서 닫을 때와 같이 <dialog>를 열면 페이지의 나머지 부분이 비활성 상태가 됩니다. 예를 들어 더 이상 링크를 클릭하거나 Tab 키를 눌러 이동할 수 없습니다.

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>

여기서 inert는 button2를 포함하는 두 번째 <div> 요소에서 선언되었으므로 버튼과 라벨을 비롯하여 이 <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입니다.