이 기사는 WWDC19 세션, Writing Great Accessibility Labels을 번역 한 것입니다. 기사의 스쿠쇼는 위 세션의 슬라이드를 찍은 것입니다.

개요

VoiceOver 및 화면 읽기 기능은 일부 사람들에게 필수적입니다. 이들이 작동하려면 요소에 레이블을 지정해야합니다.

내게 필요한 옵션 라벨이란?

접근성 요소를 식별하기 위한 현지화된 문자열을 가리킨다. 앱의 요소에 레이블을 지정하고 컨텍스트와 의미를 제공합니다. 코드는 매우 간단하고 한 줄 쓰면 좋다.

button.accessibilityLabel = "Delete"

그럼에도 불구하고 적절한 라벨을 지정하는 것은 어렵습니다. 모두는 문맥에 따라 변화한다.

컨텍스트 이해

"+"버튼에 라벨을 붙인다고 가정합니다. 보통이라면 "Plus"일지도 모른다. 그럼 이런 '+'의 경우는 어떨까. "Add"라는 레이블을 붙일 수 있습니다. 메모 앱이라면 '신규 메모 추가'라는 것을 이해할 수 있다.

쇼핑의 문맥에서는 「즐겨찾기에 추가」 「카트에 추가」도 생각할 수 있으므로, 혼동하지 않는 라벨로 할 필요가 있다.

"장바구니에 추가"가 여러 개인 경우 "장바구니에 땅콩 버터를 추가"가 적절합니다.


따라서 동일한 기호에서도 컨텍스트에 따라 적절한 레이블이 다릅니다.

모범 사례

각 요소에 라벨 지정

라벨을 붙이지 않으면 버튼이 복수 줄지어 있어도 전부 「버튼」이라고 읽어 버린다. 라벨이 없고 버튼에 이미지가 포함되어 있으면 이미지 이름을 읽습니다.

라벨에 요소 유형을 포함하지 않음

VoiceOver 는 요소의 타입을 인식하고 있으므로, 라벨에 일부러 「버튼」이나 「탭」을 포함할 필요는 없다.

button.accessibilityLabel = "Add button" // x
button.accessibilityLabel = "Add" // ◯

UI를 변경하면 라벨도 업데이트합니다.

addRemoveButton.accessibilityLabel = "Add"
addRemoveButton.accessibilityLabel = "Delete"

컨텍스트에 맞는 라벨 지정

같은 액션을 나타내는 버튼이 복수 있는 경우는, 문맥을 추가한다.

button.accessibilityLabel = "Add" // x
button.accessibilityLabel = "Add Peanut Butter" // ◯

불필요한 라벨은 삭제한다. 예를 들어 음악 플레이어의 경우 취급하는 것이 곡이라는 것은 명백하다.

// △
prevButton.accessibilityLabel = "Previous song"
playButton.accessibilityLabel = "Play song"
nextButton.accessibilityLabel = "Next song"

// ◯
prevButton.accessibilityLabel = "Previous"
playButton.accessibilityLabel = "Play"
nextButton.accessibilityLabel = "Next"

의미있는 애니메이션에도 라벨 지정

액티비티 표시기와 같은 애니메이션에 라벨을 추가하면 VoiceOver가이를 알려줍니다.

spinner.accessibilityLabel = "Loading..."

중복 라벨을 피하십시오

라벨은 가능한 한 간결하게 쓴다. 컨텍스트에서 내용이 명확한 경우는 생략해도 된다.

button.accessibilityLabel = "Delete item from the current folder and add it to the trash" // x
button.accessibilityLabel = "Delete" // ◯

그럼에도 불구하고 긴 레이블이 항상 나쁜 것은 아닙니다. 쿠키 몬스터 스티커에는 길고 재미있는 라벨이 붙어 있습니다. 라벨은 사람을 미소로 할 수도 있다.

button.accessibilityLabel = "Me happy face eat small cookie, om nom nom"