접근성과 현지화

접근성 및 글로벌 작성 모범 사례를 따르면, 모든 능력과 배경의 사용자를 위한 제품 경험을 더 잘 만들 수 있어요.

출처: Accessibility and Localization

본문

인터페이스를 디자인할 때 신체적·인지적 능력을 포함한 모든 사용자의 능력을 고려하세요. 명확하고 간결하며 일관된 단어를 사용하세요. 접근성 준수 정보는 WCAG(Web Content Accessibility Guidelines) 2.2 가이드라인을 참고하세요.

접근성 있는 콘텐츠를 만들려면 다음 모범 사례를 참고하세요:

평이한 언어와 짧은 문장을 사용하세요.
가장 자연스럽게 들리는 영역에서 흔한 축약형(예: "it's", "you're")을 사용하세요. 축약형은 UI를 더 접근 가능하게 만들고 캐주얼한 목소리와 톤을 유지하는 데 좋아요.
항목을 색상으로만 식별하지 마세요. 색상 식별자는 색맹 사용자에게 도움이 되지 않아요. 예를 들어:

Before	After
Click the blue button.	Click Submit form.

반응형 디자인을 위해 쓰세요. 애플리케이션이 태블릿·노트북·TV·스마트폰 같은 여러 기기에서 접근 가능하다면, 일부 기기에서는 화면을 밀거나 탭하지만 다른 기기에서는 클릭하거나 눌러 옵션을 선택할 수 있다는 점을 고려하세요.
적절한 제목 수준(H1, H2)을 사용해 페이지 콘텐츠의 구성을 명확히 하세요. 제목은 콘텐츠 변경을 식별하는 데 유용하며, 기계 번역은 각 제목 수준을 새 세그먼트로 인식하므로 텍스트가 많은 페이지에서 중요해요.
- 제목은 H1에서 H6까지 계층적으로 순위가 매겨지며, H1 제목이 페이지에서 가장 중요한 아이디어를 나타내요.
툴팁과 제품 문서에서 UI 요소를 일관되게 설명하세요. 예를 들어 kebab 아이콘의 툴팁 텍스트는 "More options"일 수 있어요. 그렇다면 제품 문서에서는 "Click More options"라고 말해야 해요.
UI 요소(버튼·아이콘·메뉴)에 일관되고 서술적인 라벨을 붙여 요소의 기능을 명확히 나타내세요.

접근성은 현지화·번역과 밀접한 관련이 있어요. 단어가 더 접근 가능할수록 번역하기 쉬워져요. 글로벌 사용자를 위해 쓸 때는 다음 추가 가이드라인도 명심하세요:

번역된 텍스트는 원문과 크기가 크게 달라질 수 있어요. UX 디자이너와 협력해 사용하는 텍스트가 디자인에 부정적 영향을 주지 않고 50% 더 짧아지거나 50% 더 길어질 수 있도록 보장하세요.
문자 너비는 더블바이트 문자의 영향을 받아요.
"컴퓨터가 로그온 시점을 알고 있다(the computer knows when you log on)"처럼 사물을 인간 특성으로 설명하지 마세요.
관용구·전문 용어·지역적 은유("on the ball" 같은)를 피하세요. 그것들은 모든 언어에서 의미가 통하지 않아요.
문화 특정적이거나 지역 특정적인 참조와 예시를 피하세요. 모든 사용자에게 공감되지 않아요.
"stuff"나 "kind of" 같은 모호한 용어를 피하세요. 이런 용어는 잘못 번역될 수 있어요.
유머를 아껴 쓰세요. 일반적으로 잘 번역되지 않아요.

스크린 리더용 텍스트를 포함하세요. 스크린 리더는 단어가 화면에 시각적으로 보이는 것을 나타낼 때 가장 유용해요. 아이콘 버튼을 설명하는 aria-label처럼 스크린 리더에만 보이는 텍스트를 작성할 때는 다음 가이드라인을 참고하세요:

중복을 피하세요. HTML이 올바르게 정의되면 스크린 리더는 컴포넌트 또는 요소와 관련 속성·상태를 함께 발화해요. 예를 들어 검색 버튼은 라벨과 컴포넌트의 조합으로 사용자에게 발화돼요. 버튼을 "Search"라고, "Search button"이 아니라 라벨을 지정하세요. 이렇게 하면 "Search button"( "Search search button"이 아니라)으로 발화될 거예요.
버튼이나 링크 같은 요소의 라벨이 맥락에서 떼어내도 의미가 있게 만드세요. "Click here" 같은 원시 링크나 모호한 링크 텍스트 대신 서술적인 하이퍼링크를 사용하세요.
UI에 연관된 보이는 텍스트도 있는 요소에 aria-label을 정의할 때는, 시력이 있는 스크린 리더 사용자를 혼란스럽게 하지 않도록 aria-label이 UI에 표시되는 텍스트와 같은 텍스트로 시작하도록 보장하세요.
불필요한 대문자 사용을 피하세요.
문자 대신 숫자나 특수 문자를 사용하는 leet speak("a11y"를 접근성을 뜻하는 것으로 쓰는 것 같은)를 피하세요.

UI에서 사용하는 그래픽은 다음 모범 사례를 따라 접근성과 현지화 표준을 충족해야 해요:

페이지에 추가 의미나 콘텐츠를 제공하는 이미지에는 alt 텍스트를 포함하세요. 이미지가 장식용이거나 alt 텍스트가 인접 텍스트에 의해 중복된다면, 대신 빈 alt 속성인 alt=""를 사용하세요. 빈 alt 속성은 스크린 리더에 이미지가 추가 콘텐츠를 제공하지 않으므로 무시할 수 있다고 전달해요.
텍스트가 없는 이미지를 선택하고 콜아웃(callout)을 사용해 이미지에 캡션을 다세요. 콘텐츠를 현지화할 때 텍스트를 포함한 그래픽은 번역이 필요할 수 있고, 정적 이미지 번역은 그래픽 편집을 요구해요. 콜아웃은 현지화하기 더 쉽습니다.