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>
여기서 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입니다.