display: none에 transition이 적용되지 않는 이유 그리고 접근성 트리, 렌더링 트리

문제 상황

2023.04.30 - [카카오 테크 캠퍼스/HTML CSS JS Advanced] - [카테캠 선택 강의] 스타벅스 웹사이트 검색창 연속클릭 버그 수정

[카테캠 선택 강의] 스타벅스 웹사이트 검색창 연속클릭 버그 수정

위 글에서 문제를 해결하기 위해 visibility:hidden 를 사용하여 문제를 해결하였다.

이러한 해결방법을 찾기위해 여러 방법을 시도해보았고 그 중에 하나가 display:none 을 사용하는 것이였다.

 

하지만 display:none 에는 transition이 적용되지 않았다. 따라서 아이콘이 서서히 생기지 않고 한번에 딱 생기는 예기치 않은 UI 를 얻게 되었다.

 

visibility:hidden 를 사용한 경우

 

display:none 을 사용한 경우

문제 원인

visibility:hidden 과 display:none 의 차이는 요소가 렌더링 트리에 존재유무의 차이다.

visibility:hidden 은 요소가 렌더링 트리에 존재하게 된다.

따라서 visibility 를 사용한 요소는 보이지 않지만 레이아웃에서 영역을 차지하게 된다. (display:none 은 영역을 차지하지 않는다.)

 

그러면 transition이 발생하지 않는 이유는 무엇일까?

display:none 은 요소가 렌더링 트리에 존재하지 않는다. 따라서 렌더링 트리의 시작점과 끝점을 보고 transition 이 발생하는데 display:none 같은 경우에는 시작점 또는 끝점이 없기 때문에 transition 이 발생할 수 없다.

 

 

접근성 트리와 렌더링 트리

나는 접근성 트리와 렌더링 트리가 같은 용어라고 생각했다. 하지만 공부해보니 그렇지 않았다. 

 

접근성 트리같은 경우 DOM 트리에서 파생된 트리이다. 즉 사용자가 접근가능한 요소로 만들어진 트리를 말한다. 또한 이는 스크린리더 사용자를 위해 a11y-hide 를 사용하여 보이지 않게된 요소를 포함한다. 

 

렌더링 트리같은 경우 DOM 트리와 CSSOM 트리가 결합하여 만들어진 트리이다. 브라우저 렌더링 과정에서 배운 그 트리다. 

이는 브라우저에서 웹 페이지의 레이아웃을 계산하고 페이지를 렌더링 할때 사용된다.

 

크롬 개발자 도구의 접근성 탭을 확인하며 정리해보자.

 

a11y hide 을 사용한 아이콘의 접근성 트리

해당 아이콘은 접근성 트리에 명시되어있다.

 

visibility:hidden 을 사용한 아이콘의 접근성 트리

해당 아이콘은 접근성 트리에 존재하지 않는다.

 

display:none 을 사용한 아이콘의 접근성 트리

해당 아이콘도 마찬가지로 접근성 트리에 존재하지 않는다.

 

따라서 접근성을 고려해야하는 상황이라면 visibilty:hidden , display:none 보다는 a11y-hide css 를 사용하는 것이 스크린 리더 사용자들을 배려할 수 있는 어플리케이션이 될 것이다.