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