스크린 리더가 음성 UI를 사용자에게 표시하기 위해서는 요소에는 적절한 라벨 또는 대체 텍스트가 있어야 합니다. 라벨 또는 텍스트 대체는 키 속성 중 하나인 액세스 가능한 name을 요소에 제공합니다. 접근성 트리에서 요소 의미 체계 표현을 참조하세요.
요소의 이름이 요소의 역할과 결합되면 사용자가 상호작용하고 있는 요소의 유형을 이해할 수 있음 정보가 페이지에 표시되는 방식을 결정합니다. 이름이 없으면 스크린 리더는 요소의 역할만 알려줍니다 상상해 보세요. "button"이라고 듣기만 하면 '체크박스'를 선택하고 '이미지' 코드를 입력할 필요 없이 있습니다. 따라서 라벨과 텍스트 대체가 좋은 결과를 얻기 위해 환경입니다.
요소 이름 검사
Chrome의 DevTools를 사용하면 요소의 액세스 가능한 이름을 쉽게 확인할 수 있습니다.
- 요소를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다. 그러면 DevTools가 열립니다. 요소 패널
- 요소 패널에서 접근성 창을 찾습니다. 숨겨져 있을 수 있습니다.
»기호 뒤에 배치해야 합니다. - 계산된 속성 드롭다운에서 이름 속성을 찾습니다.
</ph>
<ph type="x-smartling-placeholder">텍스트가 있는 img 또는 alt이 있는 input를 보고 있는지 여부
label라는 경우, 이 모든 시나리오는 동일한 결과를 도출합니다. 즉,
요소의 액세스 가능한 이름을 지정합니다.
누락된 이름 확인
요소에 액세스 가능한 이름을 추가하는 방법에는 여러 가지가 있습니다. 선택할 수 있습니다. 다음 표에는 가장 일반적인 요소 유형이 나열되어 있습니다. 액세스 가능한 이름과 추가 방법에 대한 설명 링크가 필요합니다.
| 요소 유형 | 이름을 추가하는 방법 |
|---|---|
| HTML 문서 | 문서 및 프레임에 라벨 지정 |
<frame> 또는 <iframe> 요소
|
문서 및 프레임에 라벨 지정 |
| 이미지 엘리먼트 | <ph type="x-smartling-placeholder"></ph> 이미지 및 객체에 대한 대체 텍스트 포함 를 통해 개인정보처리방침을 정의할 수 있습니다. |
<input type="image"> 요소
|
<ph type="x-smartling-placeholder"></ph> 이미지 및 객체에 대한 대체 텍스트 포함 를 통해 개인정보처리방침을 정의할 수 있습니다. |
<object> 요소
|
<ph type="x-smartling-placeholder"></ph> 이미지 및 객체에 대한 대체 텍스트 포함 를 통해 개인정보처리방침을 정의할 수 있습니다. |
| 버튼 | 버튼 및 링크에 라벨 지정 |
| 링크 | 버튼 및 링크에 라벨 지정 |
| 양식 요소 | 양식 요소에 라벨 지정 |
문서 및 프레임에 라벨 지정
모든 페이지에는
title 드림
요소가 있습니다. title 요소는
페이지의 이름을 지정할 수 있습니다. 스크린 리더가 페이지에 들어올 때
첫 번째 텍스트가 표시됩니다.
예를 들어 아래 페이지의 제목은 'Mary's Maple Bar Fast-Baking Recipe'입니다.
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
마찬가지로 모든 frame 또는 iframe 요소에는 title 속성이 있어야 합니다.
<iframe title="An interactive map of San Francisco" src="…"></iframe>
iframe의 콘텐츠는 자체 내부 title 요소를 포함할 수 있지만
스크린 리더는 일반적으로 프레임 경계에서 멈추고 요소의
역할('frame') 및 액세스 가능한 이름(title 속성으로 제공) 이
를 사용하면 사용자가 프레임에 들어갈지 또는 프레임을 우회할지 결정할 수 있습니다.
이미지 및 객체에 대한 대체 텍스트 포함
img는 항상
alt
속성을 사용하여 이미지에 액세스 가능한 이름을 지정합니다. 이미지를 로드하지 못하면
사용자가 이미지가 무엇인지 알 수 있도록 alt 텍스트가 자리표시자로 사용됩니다.
정보를 전달하는 역할을 합니다.
alt 텍스트를 잘 작성하는 일도 소용이 있지만 몇 가지 가이드라인이 있습니다.
팔로우할 수 있습니다.
- 이미지가 다른 방법으로는 찾기 어려운 콘텐츠를 제공하는지 판단 얻게 됩니다.
- 그렇다면 콘텐츠를 최대한 간결하게 전달합니다.
이미지가 장식용으로 사용되고 유용한 콘텐츠를 제공하지 않는 경우
빈 alt="" 속성을 제공하여 접근성에서 삭제할 수 있습니다.
있습니다.
링크 및 입력으로서의 이미지
링크로 래핑된 이미지는 img의 alt 속성을 사용하여 설명해야 합니다.
사용자가 링크를 클릭하면 이동할 위치:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
마찬가지로 <input type="image"> 요소를 사용하여 이미지를 생성하는 경우
클릭 시 실행되는 작업을 설명하는 alt 텍스트가 포함되어야 합니다.
사용자가 버튼을 클릭할 때:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
삽입된 객체
<object> 요소: 일반적으로 Flash, PDF 또는
ActiveX, 대체 텍스트도 포함해야 합니다. 이미지와 유사하게 이 텍스트는
디코더가 표시됩니다. 대체 텍스트는
일반 텍스트인 object 요소(예: '연간 보고서') 아래:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
버튼 및 링크에 라벨 지정
버튼과 링크는 사이트 이용 경험을 결정하는 데 중요한 역할을 하는 경우가 많으며, 둘 다 접근하기 좋은 이름을 사용하는 것이 중요합니다.
버튼
button 요소는 항상 다음을 사용하여 액세스 가능한 이름을 계산하려고 시도합니다.
있습니다. form의 일부가 아닌 버튼의 경우 명확한
텍스트 콘텐츠만으로도 접근성 높은 유용한 광고를 만들 수 있기 때문입니다.
있습니다.
<button>Book Room</button>
이 규칙의 일반적인 예외 중 하나는 아이콘 버튼입니다. 아이콘 버튼은 이미지 또는 아이콘 글꼴을 사용하여 버튼에 텍스트 콘텐츠를 제공합니다. 예를 들어 What You See Is What You Get (WYSIWYG) 편집기에서 형식을 지정할 때 사용하는 버튼 일반적으로 그래픽 기호에 불과합니다.
아이콘 버튼을 사용할 때는
버튼을 명시적으로 클릭하는 것이
aria-label 속성을 사용하여 액세스 가능한 이름을 지정합니다. aria-label이(가) 모두 재정의함
버튼 내부의 텍스트 콘텐츠를 사용하여 버튼에 작업을 명확하게 설명할 수 있습니다.
누구든지 쉽게 이해할 수 있습니다.
<button aria-label="Left align"></button>
링크
버튼과 마찬가지로 링크는 주로 텍스트에서 액세스 가능한 이름을 가져옵니다. 있습니다. 링크를 만들 때 좋은 방법은 가장 의미 있는 링크를 넣는 것입니다. '여기'와 같은 단어를 입력하는 대신 링크 자체에 또는 "읽어 줘 자세히 알아보기."
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
이 기능은 모든 사이트를 볼 수 있는 단축키를 제공하는 스크린 리더에 특히 유용합니다. 추적해야 합니다. 링크가 반복되는 필러 텍스트로 가득 찬 경우 그다지 유용하지 않습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">양식 요소에 라벨 지정
라벨을 체크박스와 같은 양식 요소와 연결하는 방법은 두 가지가 있습니다. 두 가지 방법 중 하나를 사용하면 라벨 텍스트도 마우스나 터치스크린 사용자에게도 유용합니다. 다음 중 하나가 포함된 라벨
- 라벨 요소 내부에 입력 요소 배치
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- 또는 라벨의
for속성을 사용하고 요소의id참조
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
체크박스에 라벨이 제대로 지정되면 스크린 리더가 요소가 체크박스 역할이고 선택된 상태이며 이름이 '수신'인 경우 프로모션 코드를 사용할 수 있나요?" 아래 VoiceOver 예와 같이 사용할 수 있습니다.
TODO: DevSite - 사고 및 확인 평가