스크린 리더와 같은 보조 기술이 사용자에게 무엇을 알려야 할지 어떻게 아는지 궁금했던 적이 있나요? 이러한 기술은 시맨틱 HTML로 페이지를 마크업하는 개발자를 필요로 한다는 것입니다. 그런데 시맨틱이란 무엇이고 스크린 리더에서는 시맨틱을 어떻게 사용할까요?
어포던스 및 의미 체계
의미 체계를 알아보기 전에 다른 용어인 어포던스를 알아두면 도움이 됩니다. 어포던스는 사용자에게 작업을 실행할 기회를 제공하거나 제공하는 모든 객체입니다. 대표적인 예로 찻주전자를 들 수 있습니다.
이 찻주전자는 사용 설명서가 필요하지 않으며, 대신 물리적 디자인이 작동 방식을 사용자에게 전달합니다. 이 컨트롤에는 핸들이 있으며, 세상에서 비슷한 핸들이 있는 다른 객체를 봤으므로 이를 선택하고 작동하는 방법을 추론할 수 있습니다.
그래픽 사용자 인터페이스를 빌드할 때 CSS와 같은 도구를 사용하여 UI에 시각적 어포던스를 추가합니다. 예를 들어 버튼에 실제 버튼처럼 보이도록 그림자와 테두리를 지정할 수 있습니다.
그러나 사용자가 화면을 볼 수 없는 경우 이러한 시각적 어포던스는 전달되지 않습니다. 따라서 동일한 어포던스를 보조 기술에 전달할 수 있는 방식으로 UI를 구성해야 합니다. 이 UI 요소의 어포던스의 비시각적 노출을 시맨틱이라고 합니다.
시맨틱 HTML 사용
적절한 의미 체계를 전달하는 가장 쉬운 방법은 의미론적으로 풍부한 HTML 요소를 사용하는 것입니다.
CSS를 사용하면 <div> 및 <button> 요소의 스타일을 지정하여 동일한 시각적 어포던스를 전달할 수 있지만 스크린 리더를 사용할 때는 두 환경이 매우 다릅니다.
<div>은 일반적인 그룹화 요소이므로 스크린 리더는 <div>의 텍스트 콘텐츠만 알려줍니다.
<button>는 '버튼'으로 발표됩니다. 이는 사용자가 상호작용할 수 있음을 알리는 훨씬 더 강력한 신호입니다.
이 문제를 해결하는 가장 간단하고 좋은 방법은 맞춤 대화형 컨트롤을 완전히 피하는 것입니다.
예를 들어 버튼처럼 작동하는 <div>를 실제 <button>로 바꿉니다.
시맨틱 속성 및 접근성 트리
일반적으로 모든 HTML 요소에는 다음과 같은 의미 체계 속성이 있습니다.
- 역할 또는 유형
- 이름
- 값 (선택사항)
- state (선택사항)
요소의 역할은 요소의 유형을 설명합니다(예: '버튼', '입력' 또는 div, span 요소 등 '그룹').
요소의 이름은 계산된 라벨입니다. 일반적으로 스크린 리더는 요소의 이름과 역할(예: '가입, 버튼')을 차례로 알려줍니다. 요소의 이름을 결정하는 알고리즘은 요소 내에 텍스트 콘텐츠가 있는지, title 또는 placeholder와 같은 속성이 있는지 여부, 요소가 실제 <label> 요소와 연결되어 있는지 여부, 요소에 aria-label 및 aria-labelledby와 같은 ARIA 속성이 있는지 등을 고려합니다.
일부 요소는 값을 가질 수 있습니다. 예를 들어 <input type="text">는 사용자가 텍스트 필드에 입력한 내용을 반영하는 값을 가질 수 있습니다.
또한 일부 요소에는 현재 상태를 전달하는 state가 있을 수 있습니다.
예를 들어 <select> 요소는 열려 있는지 닫혔는지에 따라 펼침 또는 접힌 상태일 수 있습니다.
접근성 트리
DOM의 각 노드에 대해 브라우저는 해당 노드가 의미론적으로 '흥미로운'지 판단하여 접근성 트리에 추가합니다. 스크린 리더와 같은 보조 기술이 사용자에게 대체 UI를 제공하는 경우 접근성 트리를 따라 이동하는 경우가 많습니다.
Chrome의 DevTools를 사용하면 요소의 시맨틱 속성을 검사하고 접근성 트리에서 요소의 위치를 탐색할 수 있습니다.
다음 단계
시맨틱과 시맨틱이 스크린 리더 탐색을 지원하는 방식을 어느 정도 알게 되면 빌드한 페이지를 다르게 살펴볼 수밖에 없습니다. 다음 섹션에서는 한 걸음 물러서서 효과적인 제목과 랜드마크를 사용하여 페이지의 전체 윤곽선을 전달하는 방법을 생각해 보겠습니다.