디지털 접근성(통칭 a11y)은 장애인이 의미 있고 이에 상응하는 방식으로 상호작용할 수 있는 웹사이트 및 웹 앱을 설계하고 구축하는 것입니다.
이 과정은 초급 및 고급 웹 개발자를 대상으로 합니다. 시리즈를 처음부터 끝까지 살펴보면서 접근성 관행과 테스트에 관한 일반적인 내용을 파악하거나 특정 주제에 관한 참고 자료로 사용할 수 있습니다. 익숙하지 않은 용어는 용어집을 참조하세요. 전반적인 웹 개발이 처음인 경우에는 마크업 관련 기초를 다룬 HTML 알아보기 과정과 기본 스타일 지정에 관한 CSS 알아보기 과정을 확인하세요.
이것은 완전한 참조가 아닙니다. 각 섹션에서는 섹션 주제를 소개하고 문맥과 예시를 제공합니다. MDN 및 WCAG 사양과 같은 주제 참조와 기타 web.dev 문서로 연결되는 링크가 있습니다. 각 섹션에는 사람들이 이해한 내용을 확인하는 데 도움이 되는 간단한 평가가 있습니다
일부 접근성 권장사항은 대상 장애에 따라 다릅니다. 사용자를 이해하고, 장애가 있는 사용자가 무엇이 필요한지 들어줄 때 그들의 말을 경청하는 것이 중요합니다.
여러분의 의견을 기다립니다. GitHub 문제를 열고 Google에서 해결할 수 있도록 최대한 많은 정보를 제공합니다.
학습할 내용은 다음과 같습니다.
디지털 접근성이란 무엇이며 왜 중요한가요?
장애인이 의미 있고 이와 동등한 방식으로 상호작용할 수 있는 웹사이트와 웹 앱을 설계하고 구축합니다. 이러한 선택이 비즈니스 및 법적 영향에 대해 알아보세요.
ARIA 및 HTML
ARIA와 HTML을 비교하는 경우
콘텐츠 구조
액세스 가능한 콘텐츠에는 시맨틱 HTML, 랜드마크, 테이블을 사용합니다.
문서
액세스 가능한 웹사이트 및 웹 앱을 빌드할 때 고려해야 할 추가 HTML 요소입니다.
키보드 포커스
키보드 탐색 순서와 스타일을 이해하고 개선합니다.
JavaScript
액세스 가능한 트리거 이벤트, 페이지 제목, 동적 콘텐츠 등을 작성합니다.
이미지
액세스 가능한 이미지를 만듭니다.
색상 및 대비
적절한 대비로 접근성이 우수한 색상 팔레트를 만드세요.
애니메이션 및 모션
모든 유형의 운동으로 인한 장애가 있는 사람들을 지원합니다.
서체
적절한 서체와 글꼴 크기를 선택하고 접근성 높은 레이아웃으로 카피를 구성하세요.
동영상 및 오디오
동영상과 오디오의 접근성을 높여주는 대체 미디어 유형입니다.
Forms
액세스할 수 있는 양식을 만듭니다.
디자인 및 사용자 환경
접근성이 우수한 디자인을 만들고 사용자 환경을 평가할 수 있습니다.
자동화된 접근성 테스트
자동화된 접근성 테스트를 실행하는 방법
수동 접근성 테스트
접근성을 수동으로 테스트하는 방법
보조 기술 테스트
보조 기술 (AT)으로 테스트하는 방법
결론 및 다음 단계
다음 단계로 나아가는 데 도움이 되는 추가 리소스입니다.
용어집
일반적인 접근성 용어와 개념을 알아봅니다.
그렇다면 접근성을 배울 준비가 되셨나요? 이제 시작해 볼까요?