웹사이트 접근성을 보장하기 위해 웹 디자이너가 직면한 과제

게시 됨: 2018-04-19

지난 몇 년 동안 접근성은 웹 디자인에서 가장 많이 논의되는 주제 중 하나가 되었습니다. 그리고 그것은 좋은 일입니다. 일상 생활의 더 많은 부분이 온라인으로 이동함에 따라 콘텐츠와 서비스를 가능한 한 많은 사람들이 사용할 수 있도록 하는 것이 중요합니다. 그렇게 해야 하는 의무는 도덕적이며 어떤 경우에는 법적입니다.

디자이너의 문제는 접근성의 일부 부분이 상당히 분명하지만(예: 이미지에 대체 텍스트 추가) 다른 측면은 널리 홍보되지 않는다는 것입니다. 또한 규정 준수를 주장할 수 있는 테마, 플러그인 등과 같은 타사 항목에 의존하는 경우가 많습니다. 하지만 실제로 어떻게 알 수 있습니까?

많은 디자이너가 가질 수 있는 또 다른 질문은 다음과 같습니다. 웹사이트에 언제 충분히 액세스할 수 있습니까? 다시 말해, 사이트가 액세스할 수 있는 임계값을 어느 지점에서 초과합니까?

디자이너(당신을 포함하여)는 접근성에 대해 많은 질문을 가지고 있습니다. 그래서 우리는 해당 주제에 대해 박식하고 열정적인 접근성 컨설턴트인 Joe Dolson의 도움을 받았습니다. 그는 우리가 직면한 가장 성가신 질문에 대한 통찰력을 제공할 것입니다.

웹 접근성을 더 잘 이해하고 올바른 방향으로 안내하는 몇 가지 유용한 리소스를 찾으려면 계속 읽으십시오.

누락된 조각

접근성은 우리가 생각하는 것보다 훨씬 더 많은 관행과 기술을 포괄합니다. 접근성 문제를 적절하게 처리하고 있다고 생각하는 사람들조차도 몇 가지 중요한 요소를 놓치고 있을 수 있습니다.

"개발자와 디자이너는 접근성 문제에 대해 배우기 시작할 때 일반적으로 시각 장애인을 위한 문제에 초점을 맞추는 것으로 시작합니다." "라고 돌슨은 말합니다. "이는 다른 장애가 있는 시각 장애인에게 중요한 두 가지 접근성 영역을 놓치는 결과를 초래합니다."

시각적 초점
Dolson 목록의 첫 번째 항목은 Visual Focus입니다. 그는 다음과 같이 설명합니다.

“시각적 초점은 키보드를 사용하여 탐색할 때 페이지의 현재 위치를 시각적으로 식별하는 기능입니다. 탭 키를 눌러 페이지의 링크, 양식 필드 및 버튼을 탐색하면 현재 페이지의 위치를 ​​구분할 수 없는 경우가 많습니다. 이는 시각적 초점이 부족하기 때문입니다."

Visual Focus에 대해 자세히 알아보기: http://oregonstate.edu/accessibility/focus

확대된 텍스트
디자인에서 놓친 또 다른 요소는 사용자가 텍스트를 확대하면 어떻게 됩니까? 돌슨은 다음과 같이 설명합니다.

“텍스트를 확대하는 것은 시력이 약한 사람들에게 매우 중요하며, 텍스트를 읽을 수 있으려면 텍스트를 정상 크기의 몇 배까지 확대해야 할 수도 있습니다. 이로 인해 발생할 수 있는 몇 가지 다른 문제가 있습니다. 겹치는 텍스트, 전체 페이지를 보기 위한 가로 스크롤 또는 텍스트가 모든 몇 문자를 감싸는 매우 좁은 열로 인해 페이지를 사용하기가 매우 어려울 수 있습니다."

접근 가능한 콘텐츠 전략

웹 사이트에 콘텐츠를 추가할 때 때로는 텍스트를 간략하게 작성하고 더 많은 정보가 포함된 첨부 파일(예: PDF)에 대한 링크를 작성하는 것이 더 쉽습니다. 그러나 이것이 접근성에 대한 모범 사례입니까?

Dolson은 첨부 파일에 액세스할 수 있어야 한다고 말합니다. 그러나 “액세스할 수 있어야 하는 것은 문서의 내용이며 다양한 방법으로 수행할 수 있습니다. 액세스할 수 있는 웹 페이지가 액세스할 수 없는 PDF의 대안이 될 것이라고 주장할 수 있습니다.”

따라서 PDF 파일 등의 콘텐츠에 액세스할 수 있어야 하지만 동일한 콘텐츠를 HTML로 가져오는 것이 여전히 바람직할 수 있습니다.

액세스 가능한 PDF 파일 생성에 대해 자세히 알아보기: http://webaim.org/techniques/acrobat/

WAVE 도구가 작동 중입니다.

잠재적인 문제를 찾기 위한 도구 활용

액세스 가능한 웹 사이트를 만드는 데 있어 가장 큰 발전 중 하나는 문제를 감지하는 데 도움이 되는 도구를 사용할 수 있다는 것입니다. Dolson에 따르면 이러한 도구는 "...웹 접근성을 평가하는 과정에서 매우 중요한 역할을 합니다." 그러나 그는 "...그들이 중요하긴 하지만 결코 인간의 판단과 검토를 대신할 수 있는 것은 아니다"라고 경고한다.

WAVE(웹 접근성 평가 도구)는 가장 잘 알려진 솔루션 중 하나입니다. 사이트의 URL을 붙여넣으면(또는 Chrome이나 Firefox 확장 프로그램을 사용하는 것이 더 좋습니다.) WAVE는 페이지에 무엇이 좋고 무엇이 좋지 않은지에 대한 일종의 히트 맵과 함께 로드됩니다. Alt 태그 누락, 양식 레이블과 같은 것을 포착하고 색상 대비 문제도 지적합니다. 그런 다음 특정 오류를 클릭하고 현재 테스트 중인 페이지에서 강조 표시된 오류를 볼 수 있습니다.

특정 항목을 놓치는 것이 얼마나 쉬운지 실제로 보여주는 도구입니다. 그러나 타사 플러그인 및 테마의 결함을 지적하는 데에도 좋습니다.

WAVE와 같은 도구가 문제를 발견하면 수동으로 수정 사항을 적용하는 프로세스를 진행할 수 있습니다. 그러나 Dolson은 도구가 반드시 감지하지 못하는 대체 텍스트에 약간의 문제가 있을 수 있다고 지적합니다. 그는 "...자동 도구는 이미지에 대체 텍스트가 제공되는지 여부만 알 수 있습니다. 그것이 할 수 없는 것은 텍스트가 이미지에 대한 진정으로 적절한 대안인지 판단하는 것입니다.”

따라서 WAVE와 같은 도구를 사용하면 삶이 훨씬 쉬워지지만 접근성을 보장하기 위해 약간의 조사를 해야 합니다.

대체(ALT) 텍스트에 대해 자세히 알아보기: http://oregonstate.edu/accessibility/alttext

적절한 명암비를 확인하면 텍스트를 더 쉽게 읽을 수 있습니다.

규정을 준수하고 있습니까?

다음은 디자이너와 사이트 소유자에게 실제로 약간의 혼란을 야기할 수 있는 질문입니다. 사실 접근성 전문가도 절대적인 선언을 할 수는 없습니다. Dolson은 도전 과제를 다음과 같이 설명합니다.

“첫 번째 과제는 웹사이트의 접근성에 대해 법률이 실제로 지시하는 사항을 식별하는 것입니다. 이것은 누가 귀하의 웹사이트에 비용을 지불하는지, 귀하가 속한 산업 부문, 귀하의 웹사이트가 책임을 지는 국가(별도의 훨씬 더 복잡한 질문입니다!)에 따라 달라집니다. 미국 내에서 접근성은 1990년 미국 장애인법(ADA)에 따라 크게 규제됩니다.

ADA는 사업장이 장애인에게 평등한 편의를 제공해야 한다고 규정하고 있습니다. 그러나 법 시행일로부터 짐작할 수 있듯이 실제로 액세스 가능한 웹 사이트를 구성하는 요소에 대한 정보는 포함되어 있지 않습니다. 1998년 재활법 섹션 508에 설명된 미국 연방 정부 웹 사이트를 다루는 특정 지침이 있지만 이는 완전히 별개의 법률이며 ADA가 동일한 지침을 따르거나 따라야 한다는 결론을 내릴 수 없습니다.”

그래서 한마디로 복잡합니다. Dolson의 관점에서 WGAC(Web Content Accessibility Guidelines) 2.0을 따르면 법적으로 문제가 발생할 경우 최소한 어느 정도 건전한 방어를 할 수 있습니다.
* 항상 그렇듯이 귀하의 상황에 맞는 조언을 얻으려면 법률 전문가와 상담하십시오.

NVDA 스크린 리더 소프트웨어

사이트 테스트를 위한 조언

자동화된 도구를 통해 오류를 테스트하고 수정하는 것 외에도 스스로 몇 가지 테스트를 수행하는 것이 좋습니다. 이렇게 하면 최소한 사용자 경험이 어떤 것인지 감을 잡을 수 있습니다. Dolson의 제안 중:

스크린 리더 사용
Mac 또는 iOS 사용자는 VoiceOver 기능을 활성화할 수 있습니다. Windows 10에는 내레이터 기능이 내장되어 있습니다. 또는 NVDA와 같은 타사 앱을 설치할 수 있습니다.

마우스 연결 해제
키보드만 사용하여 사이트를 탐색해 보세요. 다음은 키보드 액세스를 활성화하기 위한 몇 가지 팁입니다.

글꼴 늘리기
사이트를 확대하여 텍스트를 400%로 만들고 레이아웃에 미치는 영향을 확인합니다.

브라우저 확장 설치
NoCoffee는 색맹 및 기타 시력 문제를 시뮬레이션하는 무료 Chrome 확장 프로그램입니다. RGBlind는 Firefox 사용자를 위해 유사한 작업을 수행합니다.

이러한 방법을 활용하는 것은 귀하의 사이트가 얼마나 액세스 가능한지 최소한 스스로에게 아이디어를 제공하는 좋은 방법입니다. 그러나 완전한 시뮬레이션으로 간주되어서는 안 됩니다. Dolson은 이러한 도구가 가치가 있지만 항상 정확한 표현은 아니라고 조언합니다. 예를 들어, 스크린 리더의 숙련된 사용자는 사이트에서 다른 경험을 하게 될 것입니다. 특히 이러한 소프트웨어를 직접 사용하는 데 익숙하지 않은 경우에는 더욱 그렇습니다.

색맹 및 기타 시각 장애를 에뮬레이트하는 데 사용할 수 있는 도구가 있습니다.

노력할 가치가있는

이미 배웠듯이 접근성과 관련하여 고려해야 할 사항이 많습니다. 고맙게도 우리가 의지할 수 있는 매우 유용한 도구, 리소스 및 전문가가 있어 올바른 방향으로 나아갈 수 있습니다.

이상적으로는 위에서 논의한 방식과 개념이 일반적인 사이트 디자인 및 빌드 프로세스의 또 다른 부분이 되어야 합니다. 그렇게 하면 HTML이나 CSS처럼 제2의 천성이 됩니다. 느리지만 확실하게, 그것은 우리를 더 접근하기 쉬운 웹으로 이끄는 데 도움이 될 것입니다.