HTML에는 다양한 태그와 특별한 속성들이 있다.

우리는 HTML의 공부를 되게 간단하게 공부하고 넘기는 경향이 있다. 사실 HTML의 태그 요소들을 살펴보면 자주 쓰는 h1, h2, a, p, div, span 등이 있지만, 그 밖에도 section, aside, main, header, footer 등의 생소하거나 자주 쓰이지 않는 태그가 있는 것을 볼 수 있다.

가볍게 넘길 수 있는 HTML 태그들을 이렇게 짚게 된 이유는 바로 ‘접근성’ 때문인데, 이러한 태그들은 사이트의 구성에 각각의 의미를 부여할 수 있다.

또한 일반적인 태그들에도 role, 역할을 부여함으로서 각 요소가 어떤 역할을 담당하고 있는지를 지정할 수 있다.

겉으로만 보면 되게 별 거 아닌 것 같이 느껴지는 이 태그들은 의외로 중요한 역할을 가진다.

첫 번째는 검색 엔진에서 찾고자 하는 내용을 지정한 태그들을 통해 확실하게, 그리고 더 빠르게 찾아줄 수 있게 한다는 것이다. 그리고 두 번째는 이 태그들을 통해 전맹자 등에게 사이트의 요소들이 어떤 것들이 있는지를 알려줄 수 있다.

이번에는 개인적으로 그렇게 공부해보고 싶던 접근성을 공부해보고자 한다.

우선 이번 글에서는 개념적인 부분들을 짚어가보고, 다음 글에서 실제 HTML에서 웹 접근성을 구현하는 방법들을 정리해보고자 한다.

목차

웹 표준과 웹 접근성

WAI-ARIA?

🖥️ 레이블(label)과 스크린 리더

♿ 웹 표준과 웹 접근성

접근성을 공부하기 전에 우리는 웹 표준과 웹 접근성이 무엇인지를 간략하게나마 알 필요가 있다.