Headless UI 로 살펴보는 웹 접근성 (feat. Radix UI) 1.Intro

이 시리즈를 시작 하는 이유?

모든 프론트엔드 개발자는 본인이 만드는 컴포넌트가 완벽하고 단단했으면 좋겠다라는 생각을 한다. (아닐 수 도 있지만 나는 그러하다)

그리고 컴포넌트를 만드는 방법은 사람마다 다르고, 정해져있는 정답은 없다.
그렇다면 ! 최고의 학습은 모작이다. 잘되어있는 코드를 분석 하는것으로 시작하여 나의 가치관을 만들어나가면 좋을것이다.

특히 웹 접근성에 대한 부분은 많은 프론트엔드 개발자들이 놓치는 부분이지만, 법적으로는 의무인 사항이다.

그래서 한번 학습을 통해서 컴포넌트를 만들때 조금 더 섬세하게, 다양한 상황을 고려할 수 있도록 할 수 있었으면 좋겠다.

왜 Headless UI 인가?

간단하면서 잘 쓰고 있는 라이브러리다. 컴포넌트를 만들때 핵심적인 컴포넌트의 기능만 제공해준다.
즉, 우리가 자주 만들게 되는 컴포넌트들의 기능을 제공해주기 때문에, 확장성을 고려한 라이브러리이다.

그 안에 웹접근성에 대한 처리도 들어가있기에, 학습에 용이할 것이라 생각이 되었다.

하지만, 앞서 말했다시피, 컴포넌트를 만드는 방법이 다양하기 때문에, Headless UI 뿐만 아니라 Radix UI도 같이 보면서 비교 분석 할 것이다.

왜 Radix UI 인가?

Radix UI의 핵심 특징 중 하나는 접근성에 대한 강한 관심이다.

모든 컴포넌트는 웹 접근성 지침에 따라 구현되어 있으며, 스크린 리더 및 보조 기술과의 호환성을 지원한다.
또한 Radix UI는 커뮤니티 주도형 프로젝트이기 때문에, 지속적인 업데이트와 개선이 이루어진다.
그래서 가장 최신이고 모범적인 웹 접근성 처리가 되어있을것 같기에 선택했다.