웹페이지의 접근성 개선
이 문서 세트는 접근성에 관한 Udacity 과정에서 다룬 콘텐츠의 일부에 대한 텍스트 기반 버전입니다. 동영상 과정을 직접 텍스트로 변환하기보다는 과정의 원본 콘텐츠를 기반으로 접근성 원칙과 관행을 보다 간결하게 다뤄야 한다는 의미입니다.
요약
- 접근성의 의미와 웹 개발에 접근성을 적용하는 방법을 알아봅니다.
- 모든 사용자가 웹사이트를 액세스하고 이용할 수 있도록 하는 방법을 알아보세요.
- 개발에 미치는 영향을 최소화하면서 기본 접근성을 포함하는 방법을 알아봅니다.
- 사용 가능한 HTML 기능과 이러한 기능을 사용하여 접근성을 개선하는 방법을 알아보세요.
- 세련된 접근성 환경을 만들기 위한 고급 접근성 기법에 관해 알아봅니다.
접근성과 접근성의 범위, 영향을 이해하면 더 나은 웹 개발자가 될 수 있습니다. 이 가이드는 모든 사용자가 웹사이트에 액세스하여 이용할 수 있도록 하는 방법을 이해하는 데 도움이 되도록 제작되었습니다.
'접근성'을 한마디로 쉽게 설명하긴 어려울 수 있지만, 완수하기 어려울 필요는 없습니다. 이 가이드에서는 최소한의 노력으로 접근성을 개선하는 데 도움이 되는 몇 가지 방법, HTML에 내장된 기능을 사용하여 더 쉽게 액세스 가능하고 강력한 인터페이스를 만드는 방법, 고급 기술을 활용하여 세련된 액세스 환경을 만드는 방법을 설명합니다.
또한 이러한 기법 중 다수가 장애가 있는 사용자뿐만 아니라 모든 사용자가 더 즐겁고 사용하기 쉬운 인터페이스를 만드는 데 도움이 된다는 것을 알 수 있습니다.
물론 많은 개발자가 접근성이 무엇을 의미하는지 잘 모르는 경우가 많습니다. 정부 계약, 체크리스트, 스크린 리더와 관련이 있나요? 여기저기에는 많은 오해가 퍼져 있습니다. 예를 들어, 많은 개발자가 접근성 문제를 해결하면 즐겁고 매력적인 환경을 만드는 것과 투박하면서도 보기 좋으면서도 접근 가능한 환경을 만들어야 한다고 생각합니다.
물론 전혀 그렇지 않습니다. 본론으로 들어가기 전에 먼저 이 점을 명확히 하는 것이 좋습니다. 접근성이란 무엇이며 여기서 무엇을 배우게 되나요?
접근성이란 무엇인가요?
일반적으로 사이트에 액세스할 수 있다는 것은 사이트의 콘텐츠를 사용할 수 있고 그 기능을 말 그대로 누구나 운영할 수 있음을 의미합니다. 개발자는 모든 사용자가 키보드, 마우스 또는 터치스크린을 보고 사용할 수 있으며 나와 동일한 방식으로 페이지 콘텐츠와 상호작용할 수 있다고 쉽게 가정할 수 있습니다. 이렇게 하면 일부 사용자에게는 만족할 만한 환경을 제공할 수 있지만, 다른 사용자에게는 사소한 성가움에서부터 중단에 이르기까지 다양한 문제를 일으킬 수 있습니다.
접근성이란 '일반적인' 사용자의 좁은 범위를 벗어나는 사용자, 즉 예상과는 다른 방식으로 사물에 액세스하거나 사물과 상호작용할 수 있는 사용자의 환경을 의미합니다. 특히 특정 유형의 장애나 장애를 겪고 있는 사용자를 대상으로 하며 이러한 환경은 비신체적 환경이거나 일시적 환경일 수 있다는 점에 유의해야 합니다.
예를 들어 Google에서는 접근성을 신체적 장애가 있는 사용자를 중심으로 논의하지만, 다른 이유로 액세스할 수 없는 인터페이스를 사용하는 경험과 관련이 있을 수 있습니다. 휴대전화에서 데스크톱 사이트를 사용하는 데 문제가 있거나, '현재 거주 중인 지역에서는 사용할 수 없는 콘텐츠입니다.'라는 메시지가 표시되거나, 태블릿에서 익숙한 메뉴를 찾을 수 없는 적이 있나요? 이게 다 접근성 문제입니다.
자세히 알아보면서 이처럼 더 광범위하고 더 일반적인 의미로 접근성 문제를 해결하면 거의 항상 모든 사용자의 사용자 환경이 개선된다는 것을 알게 될 것입니다. 예를 살펴보겠습니다.
이 양식에는 몇 가지 접근성 문제가 있습니다.
- 텍스트의 대비가 낮아 시력이 낮은 사용자가 읽기 어렵습니다.
- 왼쪽에 라벨을 사용하고 오른쪽에 필드가 있으면 많은 사람들이 라벨을 연결하기가 어려우며, 페이지를 사용하기 위해 화면을 확대해야 하는 사용자는 거의 없습니다. 휴대전화에서 이 이미지를 보고 무엇을 해야 할지 파악하기 위해 이리저리 이동해야 한다고 상상해 보세요.
- '세부정보를 기억하시겠습니까?' 라벨은 체크박스와 연결되어 있지 않으므로 라벨을 클릭하는 대신 작은 정사각형만 탭하거나 클릭해야 합니다. 또한 스크린 리더를 사용하는 사람은 연결을 파악하는 데 어려움을 겪을 수 있습니다.
이제 접근성 지팡이를 흔들어 문제가 해결된 양식을 확인해 보겠습니다. 텍스트를 더 어둡게 하고 라벨을 지정하는 대상과 가까워지도록 디자인을 수정하고 라벨을 클릭하여 전환할 수 있도록 체크박스와 연결되도록 라벨을 수정합니다.
어떤 것을 사용하시겠어요? '접근성 버전'이라고 답했다면 이 가이드의 주요 전제를 이해하고 있는 것입니다. 일부 사용자의 경우 이러한 장애물이 다른 많은 사용자에게도 고통스러워하는 경우가 많으므로 접근성 문제를 해결하면 모든 사용자의 환경이 개선됩니다.
웹 콘텐츠 접근성 가이드라인
이 가이드에서는 '접근성'의 의미를 체계적으로 다루기 위해 접근성 전문가가 마련한 가이드라인과 권장사항 모음인 웹 콘텐츠 접근성 가이드라인(WCAG) 2.0을 참고하세요.
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를 일시적으로 사용할 수 없는 모든 사용자 모두에게 전반적으로 사용 환경을 개선합니다.
좋습니다.청각 장애에 대해 이야기해 볼까요?
이 집단은 난청이 심한 사람부터 난청인 사람까지 다양합니다. 시각과 마찬가지로 청력은 나이가 들면서 감퇴하는 경향이 있습니다. 많은 사람들이 보청기와 같은 일반적인 어포던스를 사용하여 도움을 받습니다.
청각 장애가 있는 사용자를 위해 소리에 의존하지 않도록 해야 합니다. 따라서 음성이 인터페이스에 포함되어 있다면 동영상 자막과 스크립트 등을 사용하고 대체 수단을 제공해야 합니다.
시각 장애와 운동 장애에서 본 것처럼 귀가 잘 작동하는 사람도 이러한 장치를 사용하면 도움이 될 수 있습니다. 제 친구들은 동영상에 자막이 있는 것이 좋다고 말합니다. 개방형 사무실에서 헤드폰을 가져가지 않아도 동영상을 시청할 수 있기 때문입니다.
알겠습니다. 인지 장애에 관해 설명해 주시겠어요?
ADD, 난독증, 자폐증과 같은 다양한 인지 질환이 있으며, 이는 사람들이 다른 방식으로 액세스하고 싶어 하거나 그렇게 해야 함을 의미할 수 있습니다. 이러한 그룹을 위한 시설이 매우 다양하지만, 확대/축소 기능을 사용하여 독서나 집중력을 높이는 등의 다른 영역과 겹치는 부분이 확연히 드러납니다. 또한 이러한 사용자는 산만하고 인지 부하를 최소화하기 때문에 최소한의 디자인이 가장 적합하다는 사실을 알 수 있습니다.
누구나 인지 과부하의 스트레스에 공감할 수 있기 때문에 인지 장애가 있는 사람에게 효과적인 방법을 개발한다면 모두에게 즐거운 경험이 될 것입니다.
그렇다면 접근성에 관해 어떻게 생각하시나요?
사람들이 가질 수 있는 다양한 능력과 장애를 살펴보면 완벽한 시력, 청각, 손재주, 인지 능력을 갖춘 사람들을 위한 제품을 설계하고 개발하는 것이 엄청나게 좁은 것을 알 수 있습니다. 이는 거의 스스로를 해낼 수 있는 일입니다. 왜냐하면 모든 사용자에게 더 스트레스가 많고 덜 사용하기 쉬운 환경을 만들고, 일부 사용자에게는 실제로 완전히 배제되는 환경을 만들고 있기 때문입니다.
이 인터뷰에서 Victor는 장애의 종류를 시각, 운동, 청력, 인지의 네 가지 범주로 분류했습니다. 또한 각 유형의 장애는 상황적, 일시적 또는 영구적 장애일 수 있다고 지적했습니다.
접근 장애의 실제 예를 살펴보고 이러한 범주 및 유형 중 어디에 속하는지 알아보겠습니다. 일부 장애는 둘 이상의 카테고리 또는 유형에 속할 수 있습니다.
| 상황별 | 임시 | 영구 | |
|---|---|---|---|
| 영상 | 뇌진탕 | 실명 | |
| 모터 | 아기 안고 있음 | 부러진 팔, RSI* | RSI* |
| 청력 | 시끄러운 사무실 | ||
| 인지 | 뇌진탕 |
반복적 긴장성 부상: 예: 수근관 증후군, 테니스 엘보, 방아쇠
다음 단계
이미 많은 내용을 다루었습니다! 읽은 도서
- 접근성의 정의와 모든 사람에게 접근성이 중요한 이유
- WCAG 및 WebAIM 접근성 체크리스트
- 고려해야 할 다양한 유형의 장애
이 가이드의 나머지 부분에서는 액세스 가능한 웹사이트를 만드는 실질적인 측면을 살펴보겠습니다. 이 내용은 크게 세 가지로 구성됩니다.
포커스: 마우스 대신 키보드로 작동하게 만드는 방법을 알아봅니다. 이는 운동 장애가 있는 사용자에게 중요하지만 모든 사용자에게 좋은 UI를 만드는 데도 중요합니다.
시맨틱: 다양한 보조 기술과 호환되는 강력한 방식으로 사용자 인터페이스를 표현합니다.
스타일 지정: 시각적 디자인을 고려하고 인터페이스의 시각적 요소를 최대한 유연하고 사용하기 쉽도록 만들기 위한 몇 가지 기법을 살펴보겠습니다.
각 주제는 교육 과정 전체를 채울 수 있으므로 접근성이 좋은 웹사이트를 만드는 방법을 모두 다루지는 않습니다. 시작하는 데 충분한 정보를 제공하고 각 주제에 관해 자세히 알아볼 수 있는 유용한 위치를 안내해 드리겠습니다.