접근성

웹페이지 접근성 향상

앨리스 박스홀
앨리스 박스홀
데이브 개시
데이브 개시
메긴 키어니
메긴 키어니

이 문서 세트는 접근성에 관한 Udacity 과정에서 다루는 콘텐츠의 일부분을 텍스트 기반 버전으로 만든 것입니다. 동영상 과정을 직접 스크립트로 작성하기보다는 과정의 원본 콘텐츠를 토대로 접근성 원칙과 관행을 보다 간결하게 다루도록 하고자 합니다.

요약

  • 접근성의 의미와 웹 개발에 접근성이 어떻게 적용되는지 알아봅니다.
  • 누구나 웹사이트에 액세스하고 이용할 수 있도록 하는 방법을 알아보세요.
  • 개발에 미치는 영향을 최소화하면서 기본 접근성을 포함하는 방법을 알아봅니다.
  • 사용할 수 있는 HTML 기능과 이 기능을 사용하여 접근성을 높이는 방법을 알아봅니다.
  • 세련된 접근성 환경을 만들기 위한 고급 접근성 기법에 관해 알아보세요.

접근성과 접근성의 범위, 접근성을 이해하면 더 나은 웹 개발자가 될 수 있습니다. 이 가이드는 모든 사용자가 웹사이트에 액세스하고 사용할 수 있도록 하는 방법을 이해하는 데 도움이 되도록 작성되었습니다.

'접근성'을 한 마디로 표현하기 어려울 수 있지만 이를 성취하기 어렵게 만들 필요는 없습니다. 이 가이드에서는 최소한의 노력으로 접근성을 개선하는 데 도움이 되는 몇 가지 쉬운 방법, HTML에 내장된 기능을 사용하여 접근성과 견고한 인터페이스를 만드는 방법, 고급 기술을 활용하여 세련되고 액세스 가능한 환경을 만드는 방법을 알아봅니다.

또한 이러한 기법 중 다수는 장애가 있는 사용자뿐만 아니라 모든 사용자가 더 즐겁고 쉽게 사용할 수 있는 인터페이스를 만드는 데 도움이 됩니다.

물론 많은 개발자가 접근성의 의미를 잘 이해하지 못합니다. 정부 계약, 체크리스트, 스크린 리더와 관련이 있습니다. - 그리고 수많은 오해가 떠돌고 있습니다. 예를 들어 많은 개발자는 접근성 문제를 해결하면 즐겁고 매력적인 환경을 만드는 것과 투박하면서도 보기 좋으면서도 접근하기 쉬운 환경 중에서 선택해야 한다고 생각합니다.

물론 이는 전혀 사실이 아니므로 본론으로 들어가기 전에 이 점을 명확히 해두겠습니다. 접근성이란 무엇이며 여기서 무엇을 배울 수 있을까요?

접근성이란 무엇인가요?

일반적으로 사이트에 액세스할 수 있다는 것은 사이트의 콘텐츠를 사용할 수 있으며 말 그대로 누구나 기능을 운영할 수 있음을 의미합니다. 개발자는 모든 사용자가 키보드, 마우스 또는 터치 스크린을 보고 사용할 수 있으며 나와 동일한 방식으로 페이지 콘텐츠와 상호작용할 수 있다고 쉽게 추측할 수 있습니다. 이렇게 하면 일부 사용자에게는 문제가 없는 환경을 제공할 수 있지만, 다른 사용자에게는 문제가 될 수도 있습니다.

여기서 접근성은 '일반적인' 사용자의 좁은 범위를 벗어나는 사용자 환경, 즉 사용자가 예상과 다르게 액세스하거나 사물과 상호작용할 수 있는 환경을 의미합니다. 특히 특정 유형의 장애나 장애를 겪고 있는 사용자를 대상으로 합니다. 이러한 경험은 비신체적 경험 또는 일시적 환경일 수 있다는 점에 유의해야 합니다.

예를 들어 접근성에 관한 논의는 신체적 장애가 있는 사용자에게 초점을 맞추는 경향이 있지만, 우리는 모두 다른 이유로 액세스할 수 없는 인터페이스를 사용하는 환경과 관련이 있습니다. 휴대전화에서 데스크톱 사이트를 사용할 때 문제가 있거나, '현재 거주 지역에서는 사용할 수 없는 콘텐츠입니다'라는 메시지가 표시되거나, 태블릿에서 익숙한 메뉴를 찾을 수 없는 경우가 있었나요? 이게 다 접근성 문제입니다.

자세히 알아볼수록 이처럼 더 광범위하고 일반적인 방식으로 접근성 문제를 해결하면 거의 항상 모든 사용자의 사용자 환경이 개선된다는 사실을 알게 될 것입니다. 예를 살펴보겠습니다.

접근성이 좋지 않은 양식

이 양식에는 몇 가지 접근성 문제가 있습니다.

  • 텍스트의 명암비가 낮아 시력이 약한 사용자가 읽기 어렵습니다.
  • 왼쪽에 라벨이 있고 오른쪽에 필드가 있으면 많은 사람들이 라벨을 연관짓기가 어렵고 페이지를 사용하기 위해 확대해야 하는 사람이 이를 연결하는 것이 거의 불가능합니다. 휴대전화에서 이 이미지를 보고 무엇을 할 지 알아보기 위해 이리저리 이동해야 한다고 상상해 보세요.
  • '세부정보를 기억하시겠습니까?' 라벨은 체크박스와 연결되어 있지 않으므로 라벨을 클릭하는 대신 작은 정사각형만 탭하거나 클릭해야 합니다. 또한 스크린 리더를 사용하는 사람은 연결을 파악하기 어려울 수 있습니다.

이제 접근성 문제를 해결하고 이러한 문제가 해결된 양식을 확인해 보겠습니다. 텍스트를 더 어둡게 만들고, 라벨을 지정하는 대상과 라벨이 가까워지도록 디자인을 수정하고, 라벨을 클릭하여 전환할 수 있도록 체크박스와 연결되도록 라벨을 수정합니다.

접근성이 개선된 양식

어느 쪽을 사용하시겠어요? '액세스 가능한 버전'이라고 답했다면 이 가이드의 주요 전제를 이해하게 된 것입니다. 일부 사용자에게 완전히 차단되는 문제가 다른 많은 사용자에게도 고통스러워하는 경우가 많으므로 접근성 문제를 해결하면 모든 사용자의 환경을 개선할 수 있습니다.

웹 콘텐츠 접근성 가이드라인

이 가이드에서는 웹 콘텐츠 접근성 가이드라인(WCAG) 2.0을 참조할 것입니다. WCAG는 접근성 전문가가 체계적인 방식으로 '접근성'의 의미를 설명하기 위해 작성한 가이드라인과 권장사항 모음입니다.

WCAG는 보통 POUR이라는 약어로 불리는 네 가지 원칙에 따라 조직되었습니다.

  • 인지 가능: 사용자가 콘텐츠를 인식할 수 있나요? 이는 시각과 같은 어떤 감각으로 인지할 수 있다고 해서 모든 사용자가 인지할 수 있다는 뜻은 아니라는 점을 기억하는 데 도움이 됩니다.

  • 작동 가능: 사용자가 UI 구성요소를 사용하고 콘텐츠를 탐색할 수 있나요? 예를 들어 마우스나 터치스크린을 사용할 수 없는 사용자는 마우스 오버 상호작용이 필요한 작업을 할 수 없습니다.

  • 이해 가능: 사용자가 콘텐츠를 이해할 수 있나요? 사용자가 인터페이스를 이해할 수 있으며 인터페이스가 혼동을 피할 수 있을 만큼 일관되나요?

  • 강력함: 다양한 사용자 에이전트(브라우저)에서 콘텐츠를 사용할 수 있나요? 보조 기술과 호환되나요?

WCAG는 콘텐츠 액세스의 의미에 관한 포괄적인 개요를 제공하지만 다소 장황할 수 있습니다. 이 문제를 완화하기 위해 WebAIM(Web Accessibility in Mind) 그룹은 WCAG 가이드라인을 웹 콘텐츠만을 대상으로 하는 따르기 쉬운 체크리스트로 정리했습니다.

WebAIM 체크리스트는 구현해야 하는 사항을 간략하게 요약한 내용을 제공하는 동시에, 확장된 정의가 필요한 경우 기본 WCAG 사양에 링크할 수 있습니다.

이 도구를 사용하면 접근성 작업의 방향을 제시하고 프로젝트가 설명된 기준을 충족하는 한 콘텐츠에 액세스하는 사용자에게 긍정적인 경험을 제공할 수 있습니다.

사용자 다양성 이해하기

접근성에 관해 학습할 때는 전 세계의 다양한 사용자 범위와 이러한 사용자에게 영향을 미치는 접근성 주제의 종류를 이해하면 도움이 됩니다. 자세한 설명을 위해 시각 장애가 있는 Google의 기술 프로그램 관리자 Victor Tsaran의 유익한 질의/답변 세션을 준비했습니다.

빅터 차란
빅터 차란

Google에서 어떤 일을 하시나요?

저는 Google에서 장애나 능력에 관계없이 다양한 다양한 사용자가 Google 제품을 사용할 수 있도록 돕고 있습니다.

사용자는 어떤 종류의 장애를 갖고 있나요?

콘텐츠에 액세스하기 어렵게 만드는 장애에 대해 생각할 때 많은 사람들은 저와 같이 시각장애인 사용자를 바로 떠올립니다. 사실, 이러한 장애는 많은 웹사이트를 사용하는 것이 정말 좌절하거나 심지어 불가능할 수도 있습니다.

많은 최신 웹 기술은 시각장애인이 웹에 액세스할 때 사용하는 도구와 잘 호환되지 않는 사이트를 만드는 안타까운 부작용을 겪고 있습니다. 그러나 실제로 접근성에는 그것보다 더 많은 것이 있습니다. 장애를 시각, 운동, 청각, 인지의 4가지 영역으로 분류하면 유용합니다.

한 번에 하나씩 살펴보겠습니다. 시각 장애의 예를 들어 주실 수 있나요?

시각 장애는 다음과 같이 몇 가지 카테고리로 나눌 수 있습니다. 저처럼 시각 장애가 있는 사용자는 스크린 리더, 점자 또는 이 둘을 조합하여 사용할 수 있습니다.

점자 리더입니다.
점자 리더

실제로 앞이 전혀 보이지 않는 것은 매우 이례적인 일이지만, 그래도 앞이 전혀 보이지 않는 사람을 한 명 이상 알고 있거나 만났을 가능성이 높습니다. 그러나 저시력 사용자는 훨씬 더 많습니다.

이는 각막이 없는 제 아내와 같이 무척 광범위합니다. 즉, 아내는 기본적으로 사물을 볼 수는 있지만 글로는 인쇄물을 읽는 데 어려움이 있고 법적으로 시각장애인으로 간주되며 시력이 좋지 않고 매우 강력한 도수 안경을 착용해야 하는 사람에 이르기까지 다양합니다.

기능이 매우 다양하며, 이 카테고리의 사용자가 사용하는 기능도 매우 많습니다. 스크린 리더 또는 점자 디스플레이를 사용하는 사람도 있습니다 (인쇄된 텍스트보다 보기 쉽기 때문에 화면에 표시된 점자를 읽는 여성도 있습니다). 또는 전체 스크린 리더 기능 없이 텍스트 음성 변환 기능을 사용하거나 브라우저의 글꼴 또는 화면 확대기의 일부에서 화면 확대/축소 기능만 사용할 수도 있습니다. 또한 운영체제 고대비 모드, 고대비 브라우저 확장 프로그램 또는 웹사이트를 위한 고대비 테마와 같은 고대비 옵션을 사용할 수도 있습니다.

고대비 모드
고대비 모드

많은 사용자가 이러한 기능을 조합하여 사용합니다. 제 친구 Laura는 고대비 모드, 브라우저 확대/축소, 텍스트 음성 변환 기능을 함께 사용합니다.

저시력은 많은 사람이 공감할 수 있는 문제입니다. 우선 우리는 나이가 들면서 시력이 악화되는 것을 경험합니다. 따라서 시력이 나빠지는 것을 경험하지 않았더라도 부모님의 불평을 들었을 가능성이 높습니다. 하지만 햇빛이 비치는 창가에서 노트북을 꺼내도 갑자기 아무것도 읽을 수 없게 되는 불편한 경험을 하는 사람들이 많습니다. 또는 레이저 수술을 받았거나 방 건너편에서 무언가를 읽어야 하는 사람이 제가 언급한 보조 도구를 사용했을 수도 있습니다. 그래서 개발자들이 저시력 사용자에게도 쉽게 공감할 수 있다고 생각합니다.

아, 깜빡 잊을 뻔했는데 색각이 좋지 않은 사람도 있습니다. 남성의 약 9% 는 일종의 색각 이상이 있습니다. 여성은 약 1% 입니다. 빨간색과 초록색 또는 노란색과 파란색을 구별하는 데 어려움을 겪을 수도 있습니다. 다음에 양식 유효성 검사를 설계할 때 이 점을 고려하시기 바랍니다.

운동 장애는 어떨까요?

예. 운동 장애, 수동기민성 장애입니다. 이 그룹은 RSI 또는 무언가가 있어서 고통스러워서 마우스를 사용하지 않으려는 사람부터 신체적 마비를 겪고 신체 일부 부위의 움직임 범위가 제한되는 사람까지 다양합니다.

시선 추적 기기를 사용 중인 사람입니다.
시선 추적 기기

운동 장애가 있는 사용자는 키보드, 스위치 기기, 음성 제어 또는 시선 추적 기기까지 사용하여 컴퓨터와 상호작용할 수 있습니다.

시각 장애와 마찬가지로 운동 장애는 일시적이거나 상황적 문제일 수 있습니다. 마우스 손의 손목이 부러졌을 수도 있습니다. 노트북의 트랙패드가 고장났거나 흔들리는 기차를 타고 있을 수도 있습니다. 사용자의 이동성이 저하되는 상황이 많이 있을 수 있습니다. 따라서 Google에서는 이러한 사용자를 배려해 영구적인 장애가 있는 사용자뿐만 아니라 일시적으로 포인터 기반 UI를 사용할 수 없는 모든 사용자에게도 환경을 전반적으로 개선합니다.

좋습니다.청각 장애에 관해 이야기해 볼까요?

이 그룹은 청각 장애가 있는 사람부터 난청인 사람까지 다양합니다. 시각과 마찬가지로 청력은 나이가 들수록 악화되는 경향이 있습니다. 많은 사용자가 보청기와 같은 일반적인 보조기를 사용하여 도움을 받습니다.

하단에 자막이 표시된 TV
화면 자막

청각 장애가 있는 사용자를 위해 소리에 의존하지 않도록 해야 합니다. 그러므로 동영상 자막과 스크립트 등을 사용하고 소리가 인터페이스의 일부인 경우 다른 방법을 제공해야 합니다.

시각 및 운동 장애에서 보았듯이 청각에 이상이 없는 사람도 이러한 조절 장치가 도움이 될 수 있습니다. 제 친구들은 동영상에 자막과 스크립트가 있는 것이 좋다고 말합니다. 오픈 플랜 사무실에서 헤드폰을 가져가지 않아도 동영상을 시청할 수 있기 때문입니다.

알겠습니다. 인지 장애에 관해 간단히 설명해 주시겠어요?

ADD, 난독증, 자폐증과 같은 다양한 인지 질환이 있으며, 사람들은 다른 방식으로 접근하길 원하거나 필요로 할 수 있습니다. 당연히 이러한 그룹을 위한 조정은 매우 다양하지만, 읽기나 집중을 더 쉽게 하기 위해 확대/축소 기능을 사용하는 등 다른 영역과 겹치는 부분이 있습니다. 또한 이러한 사용자는 주의 분산 행동과 인지 부하를 최소화하므로 최소한의 디자인이 가장 적합하다는 것을 알 수 있습니다.

누구나 인지 과부하의 스트레스에 공감할 수 있습니다. 따라서 인지 장애가 있는 사람에게도 효과를 발휘할 수 있는 콘텐츠를 만들면 모두에게 즐거운 경험을 선사할 것입니다

그렇다면 접근성에 관해 어떻게 생각하시나요?

사람들의 다양한 능력과 장애를 살펴보면 완벽한 시력, 청각, 수동기민성, 인지력을 갖춘 사람들을 위한 제품을 설계하고 개발하기란 의외로 제한적이라는 것을 알 수 있습니다. 모든 사용자에게 더 스트레스가 많고 덜 유용한 환경을 만들고, 일부 사용자에게는 실제로 자신을 완전히 배제하는 환경을 만들고 있기 때문에 이는 거의 자폐적입니다.

이 인터뷰에서 Victor는 장애의 범위를 파악하여 크게 시각, 운동, 청각, 인지의 4가지 카테고리로 분류했습니다. 또한 모든 유형의 장애는 상황적, 일시적, 영구적일 수 있다고 지적했습니다.

접근 장애의 실제 사례를 살펴보고 이러한 카테고리와 유형 중 어디에 속하는지 알아보겠습니다. 일부 장애는 둘 이상의 카테고리 또는 유형에 속할 수 있습니다.

상황별 임시 영구
영상 뇌진탕 실명
모터 아기를 안고 부러진 부문, RSI* RSI*
청력 시끄러운 사무실
인지 뇌진탕

반복성 긴장성 장애(예: 수근관 증후군, 테니스 팔꿈치, 방아쇠)

다음 단계

이미 많은 내용을 배웠습니다! 다음에 대해 읽었습니다.

  • 접근성의 정의와 모든 사람에게 접근성이 중요한 이유
  • WCAG 및 WebAIM 접근성 체크리스트
  • 고려해야 할 다양한 유형의 장애

이 가이드의 나머지 부분에서는 액세스 가능한 웹사이트를 만드는 실질적인 측면에 대해 알아봅니다. 이 내용은 크게 3가지 주제로 구성할 예정입니다

  • 포커스: 마우스 대신 키보드로 작동할 수 있는 것을 만드는 방법을 살펴봅니다. 이는 운동 장애가 있는 사용자에게 중요하지만 모든 사용자에게 좋은 UI를 만드는 데도 중요합니다.

  • 시맨틱: 다양한 보조 기술과 호환되는 강력한 방식으로 사용자 인터페이스를 표현합니다.

  • 스타일 지정: 시각적 디자인을 고려하고 인터페이스의 시각적 요소를 가능한 한 유연하고 사용하기 쉽도록 만드는 기법을 알아봅니다.

각 주제는 전체 과정을 이룰 수 있으므로 접근성이 우수한 웹사이트를 만드는 방법을 모두 다루지는 않을 것입니다. 하지만 시작하는 데 충분한 정보를 제공하고 각 주제에 관해 자세히 알아볼 수 있는 몇 가지 유용한 곳을 안내해 드립니다.