From 4243193c00ca1158a115ecec3bf06e52572288f4 Mon Sep 17 00:00:00 2001 From: Dasom Won Date: Tue, 17 Dec 2024 16:31:32 +0100 Subject: [PATCH 1/4] create(wai-aria): create a file for the page --- files/ko/learn/accessibility/wai-aria_basics/index.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 files/ko/learn/accessibility/wai-aria_basics/index.md diff --git a/files/ko/learn/accessibility/wai-aria_basics/index.md b/files/ko/learn/accessibility/wai-aria_basics/index.md new file mode 100644 index 00000000000000..a13607757f6ee6 --- /dev/null +++ b/files/ko/learn/accessibility/wai-aria_basics/index.md @@ -0,0 +1,9 @@ +--- +title: WAI-ARIA 기본 +slug: Learn/Accessibility/WAI-ARIA_basics +l10n: + sourceCommit: 93b34fcdb9cf91ff44f5dfe7f4dcd13e961962da +--- + + +Hello World! \ No newline at end of file From 4e43657a08dd41e51f7619cb0b70b37690d5b634 Mon Sep 17 00:00:00 2001 From: Dasom Won Date: Tue, 17 Dec 2024 17:52:30 +0100 Subject: [PATCH 2/4] translate(wai-aria): What is WAI-ARIA? (1) --- .../learn/accessibility/wai-aria_basics/index.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/files/ko/learn/accessibility/wai-aria_basics/index.md b/files/ko/learn/accessibility/wai-aria_basics/index.md index a13607757f6ee6..c93c031deac29f 100644 --- a/files/ko/learn/accessibility/wai-aria_basics/index.md +++ b/files/ko/learn/accessibility/wai-aria_basics/index.md @@ -6,4 +6,16 @@ l10n: --- -Hello World! \ No newline at end of file +Hello World!``` + +그러나 이 방법은 여전히 다소 부정확하며 스크린리더 이용 시 화면을 페이지 상단에서부터 읽을 때만 기능한다는 문제가 있습니다. + +다른 예시로는 날짜 설정을 위한 날짜 선택기, 값 설정을 위한 슬라이더 등과 같은 복잡한 컨트롤을 포함한 어플리케이션의 등장이 있습니다. HTML은 이러한 컨트롤을 렌더링하기 위하여 다음과 같은 특수 입력 유형을 제공합니다. + +```html + +``` + +이러한 기능들은 처음부터 지원되던 것들도 아니고 지금도 여전히 스타일 지정이 용이하지는 않기 때문에, 디자이너와 개발자는 임의적인 사용자 정의 솔루션을 선택하게 됩니다. HTML에서 제공하는 기본 기능을 사용하는 대신 일부 개발자는 여러 중첩된 {{htmlelement("div")}}와 스타일링을 위한 CSS, 동적 제어를 위한 자바스크립트로 이루어진 자바스크립트 라이브러리들에 의존합니다. + +여기서의 문제는 이러한 구현이 시각적으로는 작동하나 스크린리더로는 해독이 불가하기 때문에 스크린리더 사용자들은 의미를 설명할 수 없는 요소들이 뒤섞여 있다는 말만 듣게 된다는 것입니다. \ No newline at end of file From 2efaa0ff52cc5ff9a6afa06fd04aa342295c4ce5 Mon Sep 17 00:00:00 2001 From: Dasom Won Date: Tue, 17 Dec 2024 17:54:06 +0100 Subject: [PATCH 3/4] translate(wai-aria): What is WAI-ARIA? (2) --- .../accessibility/wai-aria_basics/index.md | 39 ++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/files/ko/learn/accessibility/wai-aria_basics/index.md b/files/ko/learn/accessibility/wai-aria_basics/index.md index c93c031deac29f..8febae2e1ad83e 100644 --- a/files/ko/learn/accessibility/wai-aria_basics/index.md +++ b/files/ko/learn/accessibility/wai-aria_basics/index.md @@ -5,8 +5,45 @@ l10n: sourceCommit: 93b34fcdb9cf91ff44f5dfe7f4dcd13e961962da --- +{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}} -Hello World!``` +이전 글에 이어, 의미 없는 HTML과 동적 자바스크립트로 업데이트되는 콘텐츠가 포함된 복잡한 UI 컨트롤에 접근성을 보장하는 것은 때때로 쉽지 않을 수 있습니다. 이러한 문제는 WAI-ARIA의 도움을 받을 수 있는데 이는 브라우저 및 보조 기술이 인식할 수 있는 추가적인 의미를 제공함으로써 사용자에게 무슨 일이 일어나고 있는지 알리는 기술입니다. 이 글에서는 접근성 개선을 위해 이를 사용할 수 있는 기본적인 방법을 다룹니다. + + + + + + + + + + + + +
전제 조건: + HTML, CSS 및 자바스크립트에 대한 기초적인 이해. + 강좌의 이전 글에 대한 이해. +
목표: + WAI-ARIA에 익숙해지기, 필요한 경우 접근성 향상을 위해 시맨틱에 이를 추가하는 법 배우기 +
+ +## WAI-ARIA란? + +먼저 WAI-ARIA가 무엇인지, 그리고 이를 통해 무엇을 할 수 있는지 살펴봅시다. + +### 전혀 새로운 문제들 + +웹 앱이 더욱 복잡하고 동적으로 변하면서 새로운 종류의 접근성 기능 및 문제가 등장하기 시작했습니다. + +예를 들어, HTML은 일반적인 페이지 기능의 정의를 위해 여러 새로운 의미 요소들({{htmlelement("nav")}}, {{htmlelement("footer")}}, 등)을 도입했습니다. 이 요소들의 도입 이전에는 개발자들이 `
` 처럼 ID 또는 클래스를 추가한 {{htmlelement("div")}}를 사용했지만 여기에는 메인 네비게이션과 같은 특정 페이지 탐색 기능을 프로그래밍 방식으로 쉽게 찾을 수 없는 방법이 없어 문제가 있었습니다. + +이에 대한 초창기 해결책은 페이지 상단에 하나 이상의 숨겨진 링크를 추가하여 네비게이션(혹은 다른 요소)으로 연결하는 것이었습니다. + +```html + +``` 그러나 이 방법은 여전히 다소 부정확하며 스크린리더 이용 시 화면을 페이지 상단에서부터 읽을 때만 기능한다는 문제가 있습니다. From af6106765292f3b250c8d887df74f29b331aa18b Mon Sep 17 00:00:00 2001 From: Dasom Won Date: Tue, 17 Dec 2024 18:00:39 +0100 Subject: [PATCH 4/4] fix(wai-aria): fix typo & rephrase --- files/ko/learn/accessibility/wai-aria_basics/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/ko/learn/accessibility/wai-aria_basics/index.md b/files/ko/learn/accessibility/wai-aria_basics/index.md index 8febae2e1ad83e..f8f8ea8e021643 100644 --- a/files/ko/learn/accessibility/wai-aria_basics/index.md +++ b/files/ko/learn/accessibility/wai-aria_basics/index.md @@ -37,7 +37,7 @@ l10n: 웹 앱이 더욱 복잡하고 동적으로 변하면서 새로운 종류의 접근성 기능 및 문제가 등장하기 시작했습니다. -예를 들어, HTML은 일반적인 페이지 기능의 정의를 위해 여러 새로운 의미 요소들({{htmlelement("nav")}}, {{htmlelement("footer")}}, 등)을 도입했습니다. 이 요소들의 도입 이전에는 개발자들이 `
` 처럼 ID 또는 클래스를 추가한 {{htmlelement("div")}}를 사용했지만 여기에는 메인 네비게이션과 같은 특정 페이지 탐색 기능을 프로그래밍 방식으로 쉽게 찾을 수 없는 방법이 없어 문제가 있었습니다. +예를 들어, HTML은 일반적인 페이지 기능의 정의를 위해 여러 새로운 의미 요소들({{htmlelement("nav")}}, {{htmlelement("footer")}}, 등)을 도입했습니다. 이 요소들의 도입 이전에는 개발자들이 `
` 처럼 ID 또는 클래스를 추가한 {{htmlelement("div")}}를 사용했지만 여기에는 메인 네비게이션과 같은 특정 페이지 탐색 기능을 프로그래밍 방식으로 쉽게 찾을 수 있는 방법이 없어 문제가 있었습니다. 이에 대한 초창기 해결책은 페이지 상단에 하나 이상의 숨겨진 링크를 추가하여 네비게이션(혹은 다른 요소)으로 연결하는 것이었습니다. @@ -45,7 +45,7 @@ l10n: ``` -그러나 이 방법은 여전히 다소 부정확하며 스크린리더 이용 시 화면을 페이지 상단에서부터 읽을 때만 기능한다는 문제가 있습니다. +그러나 이 방법은 여전히 부정확하며 스크린리더 이용 시 화면을 페이지 상단에서부터 읽을 때만 기능한다는 문제가 있습니다. 다른 예시로는 날짜 설정을 위한 날짜 선택기, 값 설정을 위한 슬라이더 등과 같은 복잡한 컨트롤을 포함한 어플리케이션의 등장이 있습니다. HTML은 이러한 컨트롤을 렌더링하기 위하여 다음과 같은 특수 입력 유형을 제공합니다. @@ -53,6 +53,6 @@ l10n: ``` -이러한 기능들은 처음부터 지원되던 것들도 아니고 지금도 여전히 스타일 지정이 용이하지는 않기 때문에, 디자이너와 개발자는 임의적인 사용자 정의 솔루션을 선택하게 됩니다. HTML에서 제공하는 기본 기능을 사용하는 대신 일부 개발자는 여러 중첩된 {{htmlelement("div")}}와 스타일링을 위한 CSS, 동적 제어를 위한 자바스크립트로 이루어진 자바스크립트 라이브러리들에 의존합니다. +이러한 기능들은 처음부터 지원되던 것들도 아니고 지금도 여전히 스타일 지정이 용이하지는 않기 때문에, 디자이너와 개발자로 하여금 임의적인 사용자 정의 솔루션을 선택하게 하는 결과를 낳았습니다. 일부 개발자들은 HTML에서 제공하는 기본 기능을 사용하는 대신 여러 중첩된 {{htmlelement("div")}}와 스타일링을 위한 CSS, 동적 제어를 위한 자바스크립트로 이루어진 자바스크립트 라이브러리들에 의존합니다. 여기서의 문제는 이러한 구현이 시각적으로는 작동하나 스크린리더로는 해독이 불가하기 때문에 스크린리더 사용자들은 의미를 설명할 수 없는 요소들이 뒤섞여 있다는 말만 듣게 된다는 것입니다. \ No newline at end of file