접근성

웹 개발자가 되기위해서 HTML, CSS 및 JavaScript를 배우는 것이 필요하지만 배운 지식을 효과적으로 사용하기위해서는 지식이상의 기술이 필요로 합니다. 이 기술을 사용해서 웹사이트에 접근하려는 모든 사용자를 차별없이 접근할수 있도록 해야합니다. 이를 위하여 모범 사례(HTML, CSS 및 JavaScript 항목에서 설명) 를 준수하고 브라우저 호환성 테스트를 거치며 처음부터 접근성을 고려해야합니다. 이 문서에서는 후자에 대해 자세히 다룰 것입니다.

개요

사이트를 "접근 가능"하다고 말할 때, 이는 모든 사용자가 웹에 접근하는 방식에 상관없이 모든 기능과 콘텐츠를 사용할 수 있음을 의미합니다. 특히, 신체적 또는 정신적 장애가 있는 사용자도 예외가 아닙니다.

사이트는 키보드, 마우스, 터치 스크린 사용자를 비롯해 스크린 리더와 Alexa, Google Home 같은 음성 비서와 같은 다양한 웹 접근 방식을 사용하는 사용자들에게 접근 가능해야 합니다.
애플리케이션은 청각, 시각, 신체적 또는 인지 능력에 상관없이 모든 사람이 이해하고 사용할 수 있어야 합니다.
또한 사이트는 해를 끼치지 않아야 합니다. 예를 들어 모션 같은 웹 기능은 편두통이나 간질 발작을 유발할 수 있습니다.

HTML은 올바르게 사용될 경우 기본적으로 접근 가능합니다. 웹 접근성은 웹에 누가, 어떻게 접근하든지 콘텐츠가 계속 접근 가능하도록 보장하는 것을 포함합니다.

Firefox Accessibility Inspector는 웹 페이지의 접근성 문제를 점검하는 데 매우 유용한 도구입니다. 다음 비디오는 이에 대한 좋은 소개를 제공합니다.

선결조건

이 문서를 최대한 활용하려면 최소한 HTML, CSS 및 JavaScript 항목 중 처음 두 문서를 통해 작업하거나 또는 접근성 문서와 관련된 기술을 통해 개선해 나가는것이 좋습니다.

참고:

당신은 당신이 당신의 자신의 파일을 생성 할 수 있는 기능이 없는 컴퓨터 / 태블릿 / 다른 장치에서 작업하는 경우, 당신은 JSBin 또는 Glitch 같은 온라인 코딩 프로그램에서 코드 예제의 대부분을 테스트 할 수 있습니다.

가이드

접근성이란?: 이 문서에서는 접근성이 실제로 무엇인지 자세히 살펴보는 것으로 모듈을 시작합니다. 여기에는 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 워크 플로우를 개발하는 방법이 포함됩니다.
HTML: 접근성을 위한 좋은기초: 항상 올바른 HTML요소를 올바른 용도로 사용하는 것만으로 수많은 웹 콘텐츠에 접근 할 수 있습니다. 이 문서는 접근성을 극대화하기 위해 HTML을 사용하는 방법을 자세히 살펴봅니다.
CSS 와 JavaScript의 접근성 모범 사례: 또한, CSS 와 JavaScript를 적절히 사용하면 접근성 높은 웹 경험을 줄수도 있지만 , 만약 잘못 사용될 경우 접근성을 크게 해칠 수 있다. 이 문서에서는 복잡한 컨텐츠도 가능한 액세스 할 수 있도록 하기 위해 고려해야 할 몇가지 CSS 및 JavaScript모범 사례를 간략히 설명합니다.
WAI-ARIA 기초: 이전 문서에 이어, 시맨틱하지 못한 HTML과 동적 자바 스크립트로 업데이트되는 컨텐츠를 포함하는 복잡한 UI를 제어 하는 것은 어려울 수 있습니다. WAI-ARIA는 브라우저와 보조 기술이 사용자에게 상황을 알려 주는 데 사용할 수 있는 시맨틱한 요소를 추가하여 이러한 문제를 해결하는 기술이다. 여기서는 접근성을 향상시키기 위해 기본적인 수준에서 이 기능을 사용하는 방법을 보여 줍니다.
멀티미디어 접근성: 접근성 문제를 야기할 수 있는 또 다른 범주의 콘텐츠 즉 멀티 미디어 . 비디오, 오디오 및 이미지 콘텐츠에 적절한 대체텍스트를 제공해서 보조 기술과 사용자가 이해할 수 있도록 해야 한다. 이 글은 그 방법을 보여 준다.
모바일 접근성: 모바일 기기를 이용한 웹 접근이 매우 널리 사용되고 있고 iOS및 Android와 같은 유명한 플랫폼에서 액세스가 가능한 툴을 사용하는 경우, 이러한 플랫폼에서 웹 콘텐츠를 접근 할 수 있는지를 고려해야 합니다. 이 자료에서는 모바일 접근성 고려 사항에 대해 살펴봅니다.

평가

접근성 문제 해결: 평가에서는 진단 및 해결해야 하는 다양한 접근성 문제가 포함된 간단한 사이트를 제공합니다.

참고 항목

Learn Accessible Web Design ^{MDN Curriculum partner}: Scrimba's Learn Accessible Web Design course teaches you how to write accessible HTML by solving interactive coding challenges and fixing a real-world website.
Start Building Accessible Web Applications Today: An excellent series of video tutorials by Marcy Sutton.
Deque University resources: Includes code examples, screen reader references, and other useful resources.
WebAIM resources: Includes guides, checklists, tools, and more.
Web Accessibility Evaluation Tools List: Includes a list of web accessibility evaluation tools.