-
Notifications
You must be signed in to change notification settings - Fork 8.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[ko] Mobile accessibility checklist를 번역했습니다. #15275
Changes from 3 commits
5801065
3c64a60
a57b263
84ef910
72efc01
02487c3
8d777e1
78139bb
64944c5
1c06e79
fbce03e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
@@ -1,60 +1,63 @@ | ||||||||||
--- | ||||||||||
title: 모바일 접근성 점검항목 | ||||||||||
slug: Web/Accessibility/Mobile_accessibility_checklist | ||||||||||
l10n: | ||||||||||
sourceCommit: f6d04a43eadf5ab26a3488942dfb318b58234eb5 | ||||||||||
--- | ||||||||||
|
||||||||||
이 문서는 모바일 앱 개발자를 위한 접근성 요구 사항에 대한 간결한 체크리스트를 제공한다. 더 많은 패턴이 발생할수록 지속적으로 진화하려는 의도다. | ||||||||||
이 문서는 모바일 앱 개발자를 위해 접근성 요구 사항에 대한 간결한 체크리스트를 제공합니다. 이 문서는 다양한 패턴의 발생에 맞춰 지속적으로 진화하려는 의도로 작성되었습니다. | ||||||||||
|
||||||||||
## 색 | ||||||||||
|
||||||||||
- 색상 대비는 반드시 WCAG 2.0 AA 레벨 요건을 준수해야 한다: | ||||||||||
- 색상 대비는 반드시 WCAG 2.0 AA 레벨 요건을 준수해야 합니다. | ||||||||||
|
||||||||||
- 일반적인 크기의 텍스트(18pt 보다 작거나 14pt 볼드체)는 4.5:1 | ||||||||||
- 큰 크기의 텍스트(적어도 18pt 보다 크거나 14pt 볼드체)는 3 :1 | ||||||||||
- 큰 크기의 텍스트(적어도 18pt 보다 크거나 14pt 볼드체)는 3:1 | ||||||||||
|
||||||||||
- 색상을 통해 전달되는 정보는 반드시 다른 수단으로도 제공되어야 한다(링크 등에 대한 밑줄 텍스트). | ||||||||||
- 색상을 통해 전달되는 정보는 반드시 다른 수단으로도 제공되어야 합니다(링크 텍스트의 밑줄 등). | ||||||||||
|
||||||||||
## 가시성 | ||||||||||
|
||||||||||
- opacity:0, z-index 깊이 조정 및 화면 밖 배치와 같은 콘텐츠 숨기기 기법은 단순히 가시성을 처리하기 위해서만 사용되어서는 안 된다. | ||||||||||
- 현재 가시화된 화면 이외의 모든 것은 반드시 진정으로 보이지 않아야 한다(특히 여러 개의 카드가 있는 단일 페이지 앱에 관련됨). | ||||||||||
- opacity:0, z-index 조정 및 화면 밖 배치와 같은 콘텐츠 숨기기 기법은 단순히 가시성을 처리하기 위해서만 사용되어서는 안 됩니다. | ||||||||||
- 현재 보이는 화면 이외의 모든 것은 반드시 "진짜로" 보이지 않아야 합니다(특히 여러 개의 "카드" 가 있는 단일 페이지 앱에 관련됨). | ||||||||||
|
||||||||||
- `hidden` 속성 또는 `visibility` 또는 `display` 스타일 속성값을 **이용**해야 한다. | ||||||||||
- 불가피한 경우를 제외 하고 `aria-hidden` **속성을 사용해서는 안된다.** | ||||||||||
- `hidden` 속성 또는 `visibility` 또는 `display` 스타일 속성값을 이용하세요. | ||||||||||
- 불가피한 경우를 제외 하고 `aria-hidden` 속성을 사용하지 마세요. | ||||||||||
|
||||||||||
## 초점 | ||||||||||
## 포커스 | ||||||||||
|
||||||||||
- 모든 활성화 가능한 요소는 **초점 가능해야 한다.** | ||||||||||
- 활성화 가능한 모든 요소는 포커스가 가능해야 합니다. | ||||||||||
|
||||||||||
- 링크, 버튼 및 양식 필드와 같은 표준 control들는 기본적으로 초점을 맞출 수 있다. | ||||||||||
- 비표준 control들은 반드시 버튼, 링크 또는 체크박스와 같은 적절한 [ARIA Role](http://www.w3.org/TR/wai-aria/roles) 역할이 할당되어야 한다. | ||||||||||
- 링크, 버튼 및 form 필드와 같은 표준 control들은 기본적으로 포커스가 가능합니다. | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
개인적으로는 2번을 선택했을것같은데, 1번도 좋습니다. (1)
Suggested change
(2)
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 아래는 의미가 명확하지 않은 것 같아, 1번으로 작업하겠습니다. 추후에 용어에 대한 규칙이 생긴다면 변경하겠습니다! |
||||||||||
- 비표준 control들은 반드시 `버튼`, `링크` 또는 `체크박스`와 같은 적절한 [ARIA Role](/ko/docs/Web/Accessibility/ARIA/Roles) 이 할당되어야 합니다. | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
원문의 인라인 코드는 번역하지 않습니다. 수정 부탁드립니다 :) |
||||||||||
|
||||||||||
초점은 논리적이고 일관된 방식으로 다루어야 한다. | ||||||||||
- 포커스는 논리적인 순서와 일관된 방식으로 다루어져야 합니다. | ||||||||||
|
||||||||||
## 텍스트 동등성 | ||||||||||
|
||||||||||
- 앱 내 모든 엄격하지 않은 현재 텍스트 요소에 대해 동일한 의미의 텍스트가 제공되어야 한다. | ||||||||||
- 앱 내 엄격하게 표현되지 않은, 텍스트가 아닌 모든 요소에 대해 동일한 의미의 텍스트가 제공되어야 합니다. | ||||||||||
|
||||||||||
- _alt 와_ _title 속성은 적절하게 사용되어야 한다._ ( 스티브 폴크너의 [Using the HTML title attribute](http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/) 위한 좋은 가이드 보기.) | ||||||||||
- 위 속성을 사용하기 어려운 경우 `aria-label`, `aria-labelledby`, or `aria-describedby` 등과 같은 [ARIA Properties](http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header) 를 사용하세요 | ||||||||||
- _alt_ 와 _title_ 속성은 적절하게 사용되어야 합니다 (스티브 폴크너의 [HTML의 제목 특성 사용하기](http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/) 가 좋은 가이드가 될 것입니다). | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
단어 안내서에 따라 안내서로 변경 부탁드립니다 :) |
||||||||||
- 위 속성을 사용하기 어려운 경우 `aria-label`, `aria-labelledby`, or `aria-describedby` 등과 같은 적절한 [ARIA 속성들](http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header) 을 사용하세요. | ||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||||
|
||||||||||
- 텍스트 이미지 사용은 가급적 자제 해야 한다. | ||||||||||
- 모든 form 콘트롤 요소는 스크린 리더 사용자를 위해 lable 요소를 가져야 한다. | ||||||||||
- 텍스트 이미지 사용은 가급적 자제 해야 합니다. | ||||||||||
- 레이블 텍스트 (또는 텍스트 이미지) 의 모든 사용자 인터페이스 컴포넌트는 프로그램 [이름](https://www.w3.org/TR/WCAG21/#dfn-name)으로 사용할 수 있는 것과 동일한 텍스트를 사용해야 합니다. [WCAG 2.1: Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html) | ||||||||||
- 모든 form 컨트롤 요소는 스크린 리더 사용자를 위해 label ({{ htmlelement("label") }} elements) 을 가져야 합니다. | ||||||||||
|
||||||||||
## 처리 상태 | ||||||||||
## 상태 다루기 | ||||||||||
|
||||||||||
- 라디오 버튼 및 체크박스와 같은 표준 제어장치는 운영체제가 취급한다. 그러나 다른 사용자 정의 제어의 경우, `aria-checked`, `aria-disabled`, `aria-selected`, `aria-expanded`, and `aria-pressed`과 같은 [ARIA States](http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header)를 통해 상태 변경이 제공되어야 한다. | ||||||||||
- 라디오 버튼 및 체크박스와 같은 표준 제어장치는 운영체제가 처리합니다. 그러나 다른 사용자 정의 제어의 경우, `aria-checked`, `aria-disabled`, `aria-selected`, `aria-expanded`, `aria-pressed`와 같은 [ARIA States](http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header)를 통해 상태 변경이 제공되어야 합니다. | ||||||||||
|
||||||||||
## 방향 | ||||||||||
|
||||||||||
- 콘텐츠는 특수한 경우를 제외하고 가로 또는 세로 방향등 단일 방향으로 제한해서는 안된다. [WCAG 2.1: Orientation](https://www.w3.org/WAI/WCAG21/Understanding/orientation.html) | ||||||||||
- 콘텐츠는 특수한 경우를 제외하고 가로 또는 세로의 단일 방향으로 제한되어서는 안됩니다. [WCAG 2.1: Orientation](https://www.w3.org/WAI/WCAG21/Understanding/orientation.html) | ||||||||||
|
||||||||||
- 특수한 경우는 피아노 앱이나 은행 수표 앱 같은 경우가 있다. | ||||||||||
- 방향이 제한되어야 하는 특수한 경우의 예시로는 피아노 앱이나 은행 수표 앱 같은 경우가 있습니다. | ||||||||||
|
||||||||||
## General Guidelines | ||||||||||
## 일반적인 지침들 | ||||||||||
|
||||||||||
- An app title **MUST** be provided. | ||||||||||
- Headings **MUST** not break hierarchical structure | ||||||||||
- 앱 이름은 반드시 제공되어야 합니다. | ||||||||||
- 제목 요소들은 계층 구조를 지켜야 합니다. | ||||||||||
|
||||||||||
```html | ||||||||||
<h1>Top level heading</h1> | ||||||||||
|
@@ -63,8 +66,14 @@ slug: Web/Accessibility/Mobile_accessibility_checklist | |||||||||
<h3>Low level heading</h3> | ||||||||||
``` | ||||||||||
|
||||||||||
- [ARIA Landmark Roles](http://www.w3.org/TR/wai-aria/roles#landmark_roles_header) **SHOULD** be used to describe an app or document structure, such as `banner`, `complementary`, `contentinfo`, `main`, `navigation`, `search`. | ||||||||||
- Touch event handlers **MUST** only be triggered on the `touchend` event. | ||||||||||
- Touch targets **MUST** be large enough for the user to interact with (see the [BBC Mobile Accessibility Guidelines](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size) for useful touch target size guidelines). | ||||||||||
- [ARIA Landmark Roles](https://www.washington.edu/accessibility/websites/regions/) 은 `banner`, `complementary`, `contentinfo`, `main`, `navigation`, `search`와 같이 앱이나 문서의 구조를 설명하기 위해서 사용되어야 합니다. | ||||||||||
- 터치 이벤트의 발생 시에는, 아래 사항들 중 최소 하나 이상을 만족해야 합니다([WCAG 2.1: Pointer Cancellation](https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html)). | ||||||||||
|
||||||||||
> **참고:** The [original version of this document](http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html) was written by [Yura Zenevich](http://yzen.github.io/). | ||||||||||
- 다운 이벤트는 다른 동작을 트리거 하는 데에 사용되어서는 안됩니다 | ||||||||||
- 액션은 업 이벤트에 의해 실행되며, 액션의 완료 전 작업을 중단하는 옵션과 액션의 완료 후 작업을 취소하는 옵션을 사용할 수 있습니다 | ||||||||||
- 업 이벤트는 다운 이벤트에 의해 발생한 모든 작업을 취소합니다 | ||||||||||
- 다운 이벤트에 의해 액션이 실행되어야 합니다. 예시로는 게임 앱이나 피아노 앱이 있습니다. | ||||||||||
|
||||||||||
- 터치 요소는 유저가 상호작용 할 수 있을 정도로 충분한 크기를 가져야 합니다(적절한 터치 요소 크기에 대한 지침들은 [BBC 모바일 접근성 지침](https://www.bbc.co.uk/accessibility/forproducts/guides/mobile/target-touch-size)을 참고하세요). | ||||||||||
|
||||||||||
> **참고:** [이 문서 원문](https://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html)의 작성자는 [Yura Zenevich](https://yzen.github.io/)입니다. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고유 단어로 사용되고 있기 때문에 포커스가 더 올바른 번역이라고 생각합니다.