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