기본 요소와 사용자 지정 요소: 실제 요소를 선택해야 할 때

어떤 컨트롤을 만나든 한 가지를 선택해야 합니다. 기본 HTML 요소를 사용할지, 사용자 지정 요소를 직접 만들지 결정하는 것입니다. 거의 언제나 기본 요소가 더 좋습니다.

기본 button은 포커스를 받을 수 있고 마우스, 키보드, 터치로 클릭할 수 있으며 올바르게 안내됩니다. 태그 하나를 작성하면 나머지는 플랫폼이 처리합니다.

span을 버튼처럼 보이게 스타일링해도 역할, 포커스, 키보드 지원이 없습니다. 눈만 속일 뿐입니다.

사용자 지정 컨트롤이 작동하게 하려면 역할, tabindex, Enter와 Space에 대한 키 처리기를 추가해야 합니다. 태그 하나와 일치시키기에는 코드가 너무 많습니다.

아무리 주의해서 만든 사용자 지정 컨트롤도 포커스 표시, 비활성화 상태, 터치 같은 예외 상황을 놓치기 쉽습니다. 기본 요소는 이런 상황을 모두 이미 처리합니다.

이는 플랫폼 전체에 해당합니다. 실제 select, 체크박스 또는 details를 사용하면 div로 흉내 낸 것과는 달리 동작과 접근성을 완전히 제공받을 수 있습니다.

기본 양식 컨트롤은 양식과 함께 제출되고, 스스로 유효성을 검사하며, label과 자동으로 연결됩니다. 이를 직접 다시 만드는 일은 거의 그만한 가치가 없습니다.

탭 인터페이스나 트리처럼 해당 패턴에 맞는 기본 요소가 없을 때만 사용자 지정 방식을 선택하십시오. 그런 다음 검증된 작성 패턴을 주의 깊게 따르십시오.

실제 버튼이 밋밋해 보일까 걱정되십니까? CSS로 기본 요소를 다양하게 꾸밀 수 있습니다. 의미는 유지하고, 원하는 모습으로 바꾸십시오.

실제 요소를 사용하면 JavaScript가 줄고, 버그가 감소하며, 브라우저와 보조 기술이 업데이트되어도 별도의 작업 없이 계속 작동하는 컨트롤을 얻을 수 있습니다.

이를 기본 원칙으로 삼으십시오. 기본 요소를 먼저 사용하고, 사용자 지정 방식은 최후의 수단으로만 선택하십시오. 웹 플랫폼은 접근성을 크게 돕는 선물이므로, 플랫폼이 작업을 처리하게 하십시오.

기본 요소를 먼저 선택하십시오. 실제 버튼이나 입력 요소는 포커스, 키보드 조작, 의미를 무료로 제공합니다. 요소가 없을 때만 사용자 지정 방식을 사용하고, 기본 요소는 자유롭게 꾸미십시오. 🎉