웹 접근성에서 semantic HTML이 중요한 이유는 무엇인가요?

semantic HTML은 요소의 의미를 브라우저와 보조 기술에 전달합니다. button, nav, main, heading 같은 적절한 요소를 사용하면 키보드 조작, 스크린 리더 탐색, 기본 접근성 동작을 별도 구현 없이 얻을 수 있습니다.

핵심 개념

핵심 기준은 의미가 있는 요소로 기본 접근성 확보입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

스크린 리더와 키보드 사용자가 페이지 구조를 어떻게 이해하는지 생각해보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

클릭 가능한 div 대신 button을 쓰면 Enter/Space 키 동작과 비활성화 상태, 역할 정보가 기본 제공됩니다.

실무에서 적용하는 방법

스타일 때문에 의미 없는 요소를 선택하지 말고, 먼저 의미에 맞는 HTML을 고른 뒤 CSS로 디자인을 맞춥니다.

실무에서 주의할 점

• ARIA로 잘못 보정하기보다 네이티브 요소를 쓰는 것이 더 안전합니다.
• heading 레벨을 시각 크기 기준으로 건너뛰면 문서 구조 탐색이 어려워집니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

프론트엔드, 접근성, SemanticHTML, HTML

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, semantic HTML은 요소의 의미를 브라우저와 보조 기술에 전달합니다. button, nav, main, heading 같은 적절한 요소를 사용하면 키보드 조작, 스크린 리더 탐색, 기본 접근성 동작을 별도 구현 없이 얻을 수 있습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.