HTML inert 전역 특성: 비활성화

HTML inert 전역 특성은 요소와 그 자손의 상호작용을 비활성화합니다. showModal()로 열린 모달 <dialog> 요소는 조상 요소의 inert를 상속하지 않고 비활성화를 탈출합니다. 하지만 <dialog> 자체에 inert 특성을 추가하면 상호작용을 비활성화할 수 있습니다.

설명

inert를 지정했을 때의 정확한 효과는 다음과 같습니다.

• 요소를 클릭해도 click 이벤트가 발생하지 않습니다.
• 요소가 포커스를 받지 않게 돼 focus 이벤트가 발생하지 않습니다.
• 브라우저의 검색 기능에서 요소의 콘텐츠가 제외됩니다.
• user-select: none을 지정했을 때처럼, 요소 내의 텍스트 선택이 비활성화됩니다.
• 편집 가능한 요소들의 콘텐츠 편집이 비활성화됩니다.
• 접근성 트리에서 요소를 제거하므로 보조 기술이 콘텐츠를 읽지 않습니다.

inert 특성은 상호작용을 막아야 하는 콘텐츠 구획에 사용할 수 있습니다. 요소가 비활성화되면 해당 요소와 자손 요소를 클릭할 수 없고 포커스를 부여할 수 없으므로, 링크, 버튼, 양식 컨트롤 등 대화형 요소와도 상호작용할 수 없습니다.

접근성 고려사항

기본 스타일에서는 어느 요소가 비활성인지 아닌지 시각적으로 구분할 방법을 제공하지 않습니다. 따라서 어떤 부분이 활성 상태고, 어떤 부분이 비활성 상태인지 분명하게 알려주는 것은 웹 개발자의 책임입니다. inert 특성을 적용하기 전에 접근성에 대해 숙고하세요.

콘텐츠의 비활성 여부에 대해 시각적 및 비시각적 단서를 제공할 때는 시각적 뷰포트가 콘텐츠 구획의 일부만 포함할 수 있다는 점을 기억해야 합니다. 사용자가 콘텐츠를 확대해서 보거나, 화면이 너무 작아 전체를 보는 게 불가능한 경우 비활성 단서가 뷰포트 밖으로 나갈 수 있습니다. 비활성 여부가 항상 명확하게 표시되지 않으면 사용자 경험을 해칠 수 있습니다.

명세

HTML

브라우저 호환성