[ko] Mobile accessibility checklist를 번역했습니다.

files/ko/web/accessibility/mobile_accessibility_checklist/index.md

@@ -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 필드와 같은 표준 컨트롤들은 기본적으로 포커스가 가능합니다.
+  - 비표준 컨트롤들은 반드시 `button`, `link` 또는 `checkbox`와 같은 적절한 [ARIA Role](/ko/docs/Web/Accessibility/ARIA/Roles) 이 할당되어야 합니다.
 
-  초점은 논리적이고 일관된 방식으로 다루어야 한다.
+- 포커스는 논리적인 순서와 일관된 방식으로 다루어져야 합니다.
 
 ## 텍스트 동등성
 
-- 앱 내 모든 엄격하지 않은 현재 텍스트 요소에 대해 동일한 의미의 텍스트가 제공되어야 한다.
+- 앱 내 엄격하게 표현되지 않은, 텍스트가 아닌 모든 요소에 대해 동일한 의미의 텍스트가 제공되어야 합니다.
 
-  - _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/) 가 좋은 안내서가 될 것입니다).
+  - 위 속성을 사용하기 어려운 경우 `aria-label`, `aria-labelledby`, or `aria-describedby` 등과 같은 적절한 [ARIA 속성들](http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header)을 사용하세요.
 
-- 텍스트 이미지 사용은 가급적 자제 해야 한다.
-- 모든 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/)입니다.

files/ko/web/css/@keyframes/index.md

@@ -1,45 +1,64 @@
 ---
 title: "@keyframes"
 slug: Web/CSS/@keyframes
+l10n:
+  sourceCommit: 34bc6ac7c5d03e5891bf94b0d4ebeccb0e7a29e5
 ---
 
 {{CSSRef}}
 
-**`@keyframes`** [@규칙](/ko/docs/Web/CSS/At-rule)은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
+**`@keyframes`** [@규칙](/ko/docs/Web/CSS/At-rule)은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이를 통해 브라우저가 [transitions](/ko/docs/Web/CSS/CSS_Transitions)으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.
+
+## 구문
 
 ```css
 @keyframes slidein {
   from {
-    margin-left: 100%;
-    width: 300%;
+    transform: translateX(0%);
   }
 
   to {
-    margin-left: 0%;
-    width: 100%;
+    transform: translateX(100%);
   }
 }
 ```
 
-`@keyframes` @규칙은 CSS 오브젝트 모델 인터페이스인 {{domxref("CSSKeyframesRule")}}를 통해서 접근합니다.
+### 값
+
+- {{cssxref("custom-ident")}}
+  - : keyframe 목록을 식별하는 이름입니다. 이 이름은 CSS 구문에서 생성된 식별자와 일치해야 합니다.
+- `from`
+  - : 시작 offset인 `0%` 입니다.
+- `to`
+  - : 마지막 offset인 `100%` 입니다.
+- {{cssxref("<percentage>")}}
+  - : 전체 애니메이션 시간 중 명시된 keyframe이 발생해야 하는 시점의 %입니다.
+- `<timeline-range-name>` {{cssxref("&lt;percentage&gt;")}} {{experimental_inline}}
+  - : 지정된 {{cssxref("animation-range")}} 를 통과한 시간 중 지정된 키 프레임이 발생해야 하는 시간의 백분율입니다. 타임라인 범위를 사용하는 애니메이션의 종류에 대한 자세한 사항은 [CSS 스크롤 기반 애니메이션](/ko/docs/Web/CSS/CSS_scroll-driven_animations)을 참고하세요.
 
-키프레임을 사용하려면 `@keyframes` 룰을 애니메이션과 키프레임 리스트를 매칭시킬 {{ cssxref("animation-name") }} 속성에서 사용할 이름과 함께 생성합니다. 각 `@keyframes` 룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성됩니다.
+## 설명
 
-키프레임은 순서대로 나열 가능합니다. 지정된 %의 순서대로 처리됩니다.
+키프레임을 사용하려면 `@keyframes` 룰을 애니메이션과 키프레임 리스트를 매칭시킬 {{ cssxref("animation-name") }} 속성으로 사용할 이름과 함께 생성합니다. 각 `@keyframes` 룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성됩니다.
+
+키프레임의 %를 꼭 순서대로 나열하지 않더라도, %의 순서대로 처리됩니다.
+
+자바스크립트는 `@keyframes` @규칙을 CSS 오브젝트 모델 인터페이스인 {{domxref("CSSKeyframesRule")}}를 통해서 접근할 수 있습니다.
 
 ### 유효한 키프레임 리스트
 
-키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.
+만약 키프레임이 시작 상태와 끝 애니메이션(이는 `0%`/`from` 과 `100%`/`to`를 말합니다)을 명시하지 않는다면, 브라우저는 처음과 마지막에 현재 존재하는 요소의 스타일을 사용합니다. 이는 요소의 애니메이션을 초기 상태에서 다시 시작하고 되돌아가는 데 사용될 수 있습니다.
 
-만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.
+만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 무시되지만, 애니메이션을 지원하는 속성들은 애니메이션이 됩니다.
 
-### 중복 해상도
+### 중복 처리
 
-만약 한개의 이름에 대해서 여러개의 키프레임 셋이 존재하면, 파서가 마지막으로 마주치는 키프레임 셋만 유효합니다. `@keyframes 룰은 연속되지 않기 때문에 한개의 룰 셋 이상을 적용하지 않습니다.`
+만약 한개의 이름에 대해서 여러개의 키프레임 셋이 존재하면, 파서가 마지막으로 마주치는 키프레임 셋만 유효합니다. `@keyframes` 룰은 캐스케이드 되지 않기 때문에 한개의 룰 셋 이상을 적용하지 않습니다.
 
-### 키 프레임 밖에 속성이 지정된 경우
+만약 애니메이션들의 시간 offset이 중복된 경우, 해당 %에 대한 모든 `@keyframes` 규칙들이 해당 프레임에 적용됩니다. 동일한 % 값을 가진 여러 `@keyframes` 규칙들은 캐스케이드 됩니다.
 
-어떤 키 프레임에도 정의되지 않는 속성들은 애니메이션과는 완전 별도로 삽입되지 않는 경우를 제외하고는 삽입됩니다. 예를 들어,
+### 키 프레임에 속성이 누락된 경우
+
+어떤 키 프레임에도 정의되지 않은 속성들은 중간에 가능한 곳에 삽입되며, 삽입이 가능하지 않은 애니메이션들은 제외됩니다. 예시는 아래와 같습니다.
 
 ```css
 @keyframes identifier {
@@ -61,13 +80,11 @@ slug: Web/CSS/@keyframes
 }
 ```
 
-여기 {{ cssxref("top") }} 속성은 `0%`, `30%`, `100%` 키 프레임을 이용하여 애니메이션 됩니다. {{ cssxref("left") }} 속성은 `0%`, `68%`, `100%` 키 프레임을 사용합니다.
-
-`0%` 와 `100%` 키 프레임 모두에 정의된 속성들만 애니메이션 동작을 합니다. 이 둘 중 아무것도 포함되지 않은 속성은 애니메이션 연속을 지속하기 위한 시작 값으로 사용됩니다.
+여기 {{ cssxref("top") }} 속성은 `0%`, `30%`, `100%` 키 프레임을 이용하여 애니메이션 됩니다. {{ cssxref("left") }} 속성은 `0%`, `68%`, `72%`, `100%` 키 프레임을 사용해 애니메이션 됩니다.
 
 ### 키 프레임이 여러번 정의 된 경우
 
-스펙에서는 모든 속성이 각 키 프레임이 지정된 게 아니라 키 프레임이 여러번 정의 된 경우에는 가장 최근의 키프레임에 선언된 값들만 유효하다고 나와 있습니다. 예를 들어,
+키프레임이 여러 번 정의되었지만 영향을 받는 모든 속성이 각 키프레임에 있는 것은 아니라면 이러한 키프레임에 지정된 모든 값이 고려됩니다. 예시는 아래와 같습니다.
 
 ```css
 @keyframes identifier {
@@ -87,13 +104,13 @@ slug: Web/CSS/@keyframes
 }
 ```
 
-이 예제를 보면 `50%` 키프레임에서 `top: 10px 이고 다른 값들은 모두 무시됩니다.`
+이 예제를 보면 `50%` 키프레임에서는 `top: 10px`과 `left: 20px` 만 적용됩니다.
 
 {{ non-standard_inline }} 키 프레임 효과 연속은 파이어폭스 14부터 지원됩니다. 이 의미는 위 예제의 경우 50% 키 프레임에서 왼쪽 : 20px 값이 고려된다는 의미입니다. 이러한 기능이 스펙에는 아직 정의가 되어있진 않지만, 현재 도입에 대한 토론이 진행 중입니다.
 
-### 키프레임에서 !important
+### 키프레임에서의 `!important`
 
-`키프레임에서 !important` 속성을 이용한 정의는 모두 무시됩니다.
+키프레임에서 `!important` 속성을 이용한 정의는 모두 무시됩니다.
 
 ```css
 @keyframes important1 {
@@ -120,26 +137,17 @@ slug: Web/CSS/@keyframes
 }
 ```
 
-## Syntax
+## 형식 구문
 
-### Values
-
-- `<identifier>`
-  - : A name identifying the keyframe list. This must match the identifier production in CSS syntax.
-- `from`
-  - : A starting offset of `0%`.
-- `to`
-  - : An ending offset of `100%`.
-- {{cssxref("&lt;percentage&gt;")}}
-  - : A percentage of the time through the animation sequence at which the specified keyframe should occur.
+{{csssyntax}}
 
-### Formal syntax
+## 예제
 
-{{csssyntax}}
+[CSS 애니메이션](/en/CSS/CSS_animations)에서 예제를 참고하세요.
 
-## Examples
+### CSS 애니메이션 예제
 
-See [CSS animations](/en/CSS/CSS_animations) for examples.
+예제는 [CSS 애니메이션 사용하기](/ko/docs/Web/CSS/CSS_animations/Using_CSS_animations)와 [스크롤 기반 애니메이션으로 스크롤의 요소들 애니메이션 하기](https://developer.chrome.com/articles/scroll-driven-animations/)를 참고하세요.
 
 ## 명세서
 
@@ -149,11 +157,10 @@ See [CSS animations](/en/CSS/CSS_animations) for examples.
 
 {{Compat}}
 
-## Notes
-
-1. @keyframes not supported in an inline or scoped stylesheet in Firefox ([Firefox bug 830056](https://bugzil.la/830056)).
-
-## See also
+## 같이 보기
 
-- [Using CSS animations](/ko/docs/CSS/Tutorials/Using_CSS_animations)
+- {{cssxref("animation-range")}}
+- [CSS 스크롤 기반 애니메이션](/ko/docs/Web/CSS/CSS_scroll-driven_animations)
+- [CSS 애니메이션 사용하기](/ko/docs/CSS/Tutorials/Using_CSS_animations)
+- [스크롤 기반 애니메이션으로 스크롤의 요소들 애니메이션 하기](https://developer.chrome.com/articles/scroll-driven-animations/)
 - {{domxref("AnimationEvent")}}