스크린 리더와 같은 보조 기술이 사용자에게 무엇을 알려야 할지 어떻게 아는지 궁금했던 적이 있나요? 이러한 기술은 시맨틱 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를 사용하면 요소의 시맨틱 속성을 검사하고 접근성 트리에서 요소의 위치를 탐색할 수 있습니다.
다음 단계
시맨틱과 시맨틱이 스크린 리더 탐색에 어떻게 도움이 되는지를 어느 정도 알게 되면 다르게 빌드한 페이지를 보는 데 큰 도움이 됩니다. 다음 섹션에서는 한 걸음 물러나 효과적인 제목과 랜드마크를 사용하여 페이지의 전체 개요를 전달하는 방법을 생각해 보겠습니다.