cleanUrl: "/introduction-to-a11y-making-the-web-accessible-for-everyone-kr"
floatFirstTOC: "right"

1. A11y 소개

A11y란 무엇인가요?

Accessibility의 줄임말인 A11y는 장애인을 포함한 모든 사람이 웹사이트와 디지털 콘텐츠를 사용할 수 있도록 하는 웹 개발의 중요한 측면입니다. “a11y"라는 용어는 ‘접근성’의 ‘a’와 ‘y’ 사이의 11글자를 나타내는 숫자입니다. a11y의 목표는 시각, 청각, 인지 또는 신체 장애로 인해 콘텐츠와 상호 작용하는 데 방해가 될 수 있는 장벽을 제거하여 보다 포용적인 웹을 만드는 것입니다.

예를 들어, 텍스트나 레이블 없이 이미지만 버튼으로 사용하는 웹사이트를 생각해 보세요. 화면의 내용을 소리로 읽어주는 도구인 스크린 리더에 의존하는 사용자는 해당 버튼의 기능을 알 방법이 없어 웹사이트를 사실상 사용할 수 없게 됩니다. 이러한 버튼에 설명 텍스트 레이블을 추가하는 등 접근성 디자인 원칙을 적용하면 장애인을 포함한 더 많은 사람들이 웹사이트를 사용할 수 있게 됩니다.

접근성이 중요한 이유는 무엇인가요?

접근성은 여러 가지 이유로 중요합니다.

1. 법률 준수: 많은 국가에서 디지털 접근성을 요구하는 법과 규정이 있습니다. 미국에서는 미국 장애인법(ADA)에 따라 장애인이 웹사이트에 접근할 수 있도록 의무화하고 있으며, EU의 유럽 접근성 법 등 다른 지역에서도 유사한 법률이 존재합니다. 이러한 규정을 준수하지 않을 경우 벌금 및 소송을 포함한 법적 처벌을 받을 수 있습니다.

   예시: 웹사이트 접근성을 제공하지 않는 미국의 소규모 비즈니스는 ADA에 따라 소송을 당할 수 있습니다. 이 기업은 처음부터 접근성을 구현했다면 피할 수 있었던 비용을 들여 사이트를 변경하거나 법적 벌금을 지불해야 할 수도 있습니다.

2. 윤리적 책임: 웹사이트 접근성을 높이는 것은 올바른 일입니다. 이는 포용성에 대한 약속을 반영하며, 능력에 관계없이 모든 사람이 필요한 정보와 서비스에 액세스할 수 있도록 보장합니다.

   예시: 동영상에 자막을 추가하면 청각 장애가 있는 사람뿐만 아니라 시끄러운 환경에 있거나 다른 언어를 사용하는 사용자에게도 도움이 됩니다.

3. 비즈니스 이점: 접근성은 비즈니스 측면에서도 현명한 선택이 될 수 있습니다. 웹사이트에 접근성을 제공하면 전 세계 10억 명으로 추정되는 장애를 가진 사람들을 포함하여 더 많은 사람들에게 콘텐츠를 공개할 수 있습니다. 또한, 접근성이 뛰어난 웹사이트는 적절한 제목 구조와 이미지 대체 텍스트 사용 등 많은 접근성 관행이 SEO 모범 사례와 일치하기 때문에 검색 엔진에서 더 나은 성과를 거두는 경우가 많습니다.

   예시: 이미지에 설명이 포함된 대체 텍스트를 추가하면 시각 장애가 있는 사용자를 도울 뿐만 아니라 검색 엔진에서 웹사이트의 순위를 높여 더 많은 트래픽을 유도할 수 있습니다.

a11y 원칙을 이해하고 구현하면 법적 요건을 준수할 뿐만 아니라 포용적인 웹에 기여하고 잠재적으로 웹사이트의 성능과 도달 범위를 높일 수 있습니다.

2. 웹 접근성의 기본 사항 이해하기

접근성의 네 가지 원칙(POUR)

웹 콘텐츠 접근성 지침(WCAG)은 웹 접근성의 초석으로, POUR라는 약어로 알려진 네 가지 핵심 원칙을 중심으로 구성되어 있습니다. 이러한 원칙은 다양한 장애를 가진 사람들이 웹 콘텐츠에 액세스할 수 있도록 보장합니다. 각 원칙을 자세히 살펴보겠습니다.

1. 인식 가능
   • 정의: 정보 및 사용자 인터페이스 구성 요소는 시각, 청각, 촉각 등 사용자가 자신의 감각을 통해 인지할 수 있는 방식으로 제공되어야 합니다.
   • 예시: 이미지나 멀티미디어와 같이 텍스트가 아닌 콘텐츠에 대한 텍스트 대체 텍스트를 제공하여 큰 글씨, 점자, 음성, 기호 또는 간단한 언어와 같은 다른 형식으로 표시할 수 있도록 합니다. 예를 들어 이미지에 대체 텍스트를 추가하면 화면 리더가 시각 장애가 있는 사용자에게 이미지를 설명할 수 있습니다.
2. 작동 가능
   • 정의: 사용자 인터페이스 구성 요소 및 탐색은 작동 가능해야 하며, 이는 사용자가 키보드, 마우스 또는 터치 스크린과 같은 다양한 입력 방법을 사용하여 인터페이스와 상호 작용할 수 있어야 함을 의미합니다.
   • 예시: 키보드에서 모든 기능을 사용할 수 있는지 확인하는 것이 중요합니다. 예를 들어, 사용자는 Tab 키를 사용하여 링크, 버튼, 양식을 탐색하고 Enter 또는 스페이스 키를 사용하여 요소를 활성화할 수 있어야 합니다.
3. 이해 가능
   • 정의: 정보 및 사용자 인터페이스의 작동을 이해할 수 있어야 하며, 이는 사용자가 콘텐츠와 인터페이스 사용 방법을 이해할 수 있어야 함을 의미합니다.
   • 예시: 양식 필드에 명확하고 간단한 지침을 작성하면 사용자가 오류를 방지하는 데 도움이 됩니다. 예를 들어, 기술 전문 용어를 사용하는 대신 “생년월일을 MM/DD/YYYY 형식으로 입력하세요”와 같이 쉬운 언어를 사용하여 사용자가 양식을 올바르게 작성하는 방법을 쉽게 이해할 수 있도록 하세요.
4. 강력
   • 정의: 콘텐츠는 보조 기술을 포함한 다양한 사용자 에이전트가 안정적으로 해석할 수 있을 만큼 견고해야 하며, 기술이 발전함에 따라 콘텐츠에 대한 접근성을 유지할 수 있어야 합니다.
   • 예시: 표준 HTML 요소와 속성을 사용하면 화면 리더 및 기타 보조 기술에서 콘텐츠를 올바르게 해석할 수 있습니다. 예를 들어, 클릭 가능한 <div> 대신 <button>을 사용하면 브라우저와 보조 장치 모두에서 해당 요소를 대화형 요소로 인식할 수 있습니다.

WCAG 개요