HTML의 inert 속성으로 비활성 영역 다루기

inert는 요소와 그 자손을 비활성 상태로 만드는 HTML 전역 불리언 속성이다. 속성이 적용된 요소는 탭 순서와 접근성 트리에서 제외되고, 포커스를 받거나 클릭 이벤트를 처리하지 않는다. 브라우저의 페이지 내 검색 대상에서도 빠지며, 안에 있는 텍스트를 선택하거나 편집할 수도 없다. 자세한 동작은 MDN의 inert 문서에 정리되어 있다.

HTML 불리언 속성은 속성이 있는지가 기준이다. 따라서 inert="false"처럼 문자열로 false를 적어도 속성이 존재하므로 비활성 상태가 된다. React에서는 조건식으로 true 또는 false를 전달해 속성을 켜고 끌 수 있다.

접힌 사이트 메뉴에 적용하기

내 사이트 헤더에는 현재 사이트와 블로그, 포트폴리오 사이를 이동하는 메뉴가 있다. 메뉴가 닫혀 있을 때 현재 사이트 이름은 보이지만 다른 사이트 링크는 접혀 있다. 이때 보이지 않는 링크로 키보드 포커스가 들어가거나 사용자가 실수로 이동하지 않도록 각 링크에 inert를 지정했다.

실제 구현에서는 sections.map으로 각 링크를 만들고, 그중 inert 조건은 다음과 같다.

inert={index !== 0 && !open}

sections는 현재 사이트를 첫 번째 항목으로 정렬하고, index는 링크의 순서를 나타낸다. open은 메뉴가 열렸는지 나타내는 상태다.

메뉴가 닫혀 open이 false이면 첫 번째 항목을 제외한 링크에 inert가 적용된다. 현재 사이트 링크는 계속 사용할 수 있고 나머지 링크는 포커스와 클릭 대상에서 빠진다. 메뉴를 열어 open이 true가 되면 inert가 해제되어 다른 사이트를 선택할 수 있다.

표시와 상호작용은 따로 다루기

inert를 지정해도 요소가 화면에서 자동으로 사라지지는 않는다. 내 메뉴는 CSS의 opacity와 visibility로 닫힌 선택지를 감추고, 메뉴가 열리면 다시 보여준다. inert는 그 링크가 닫힌 동안 상호작용할 수 없다는 상태를 처리한다.

이처럼 화면에 보이는 상태와 사용자가 조작할 수 있는 상태는 별도로 관리할 수 있다. 버튼이나 입력 필드처럼 disabled를 지원하는 개별 컨트롤을 비활성화하려는 경우에는 disabled를 쓰는 편이 더 직접적이다. inert는 메뉴처럼 자손 요소가 있는 콘텐츠 영역의 상호작용을 한꺼번에 막을 때 유용하다.