✔️ hidden

• 요소를 화면에서 감추는데 사용된다.

• 해당 요소와 그 하위 요소들은 렌더링 되지 않고 스크린 리더 등의 보조 기술에서도 인식되지 않는다. -> 접근성 면에서 좋지 않다.

• 언제 사용하느냐, 동적으로 요소를 숨길 때 사용한다. 예를 들어 사용자가 특정 버튼을 클릭 했을 때 추가 콘텐츠를 보여주기 위해 동적으로 요소를 생성하고 필요한 경우 숨길 수 있다.

✔️ aria-hidden

• 접근성(Accessibility)를 개선하기 위해 사용된다.

• 스크린리더가 접근하는 것은 원치 않지만 시각적으로 디자인을 주기 위해서 사용한다.

• 요소가 시각적으로 사라지지는 않지만 스크린 리더와 같은 보조 기술을 사용하는 사용자를 대상으로 콘텐츠의 탐색을 제한한다.

• aria-hidden ="true" 접근성 API 차단 (가상 커서로 탐색 x)

• aria-hidden ="false" 접근성 API 허용

• 시각적으로 사라지게 하고 싶으면 CSS를 활용하면 된다.