웹 접근성 디자인의 기본 사항에 대한 디자이너 안내서

웹은 모든 사람이 세계 어느 곳에서나 동일한 콘텐츠에 액세스 할 수있는 장소 여야합니다. 반응 기술은 먼 길을 간다. 장치 불가지론 적 설계. 하지만 어때? 접근성에 의존하지 않는 디자인?

웹 접근성은 수년 전부터 있었지만 구현을 위해서는 기술 및 웹 개발에 새로운 진보가 필요합니다. 많은 개발자들이 도움을 원하지만 액세스 가능성을 위해 설계하는 방법을 이해하는 것은 어렵습니다. 움직이는 부분이 너무 많기 때문입니다. 고 대비 텍스트, 시각 장애인 용 오디오 페이지, 최적화 된 미디어 및 비 JS / CSS 브라우저 용 대체 페이지가 포함됩니다..

이 글에서는 접근성 디자인의 기본 사항, 개념, 해결하고자하는 목표, 시작하기 위해 취할 수있는 단계에 대해 설명하겠습니다. 이것은 매우 상세한 주제이며, 완전히 이해하려면 수개 또는 수년 간의 연습이 필요합니다. 그러나 이점은 노력할 가치가 있으며, 모든 웹 프로젝트는 모든 방문자에게 액세스 가능한 컨텐츠에 대한 지속적인 인상을 남깁니다..

내게 필요한 옵션 소개

일반적으로 액세스 가능성은 콘텐츠를 제작하여 누구에게나 소비 될 수있다.. 여기에는 읽을 수없는 시각 장애인이 포함될 수 있으며 신체 장애가있는 사람도 마우스 나 키보드를 조작 할 수 없거나 (또는 ​​둘 다).

하지만 경미한 결핍 시력. 사람들과 난독증 또는 독해 문제. 사실, “웹 접근성” 포함하다 누군가가 웹 사이트와 상호 작용하거나 웹 사이트를 사용하는 방식에 영향을 줄 수있는 모든 가능한 장애.

아마도 위키 피 디아 정의에서 설명한 것처럼 웹 접근성이 제공 할 수있는 것이 더 중요합니다.

그러나 앤 깁슨 (Anne Gibson)은 Wikipedia의 정의가 너무 모호하다는 점을 List Apart에서 주장합니다. 다만 장애인에 대해. 정말 각자 모두 웹에서 전 세계에서 인터넷에 최적의 액세스 권한이 없을 수 있습니다..

많은 개발자들은 접근성은 읽을 수없는 시각 장애인을위한 것이라고 생각합니다. 그러나 실제로 웹 접근성의 네 가지 기본 범주가 있습니다.

1. 비쥬얼 - 저시력 또는 열악한 / 시력 없음
2. 귀의 - 청각 장애인 또는 청각 장애인
3. 인지 적 - 정보를 이해하거나 소비하는 문제
4. 모터 - 키보드 또는 음성 명령 프로그램과 같은 특수 입력 장치가 필요할 수있는 물리적 인 접근성 문제

이 카테고리에는 각각 다음과 같은 광범위한 기술이 있습니다. 웹 표준만큼 빠르게 변화한다.. 그러나 WCAG (웹 콘텐츠 접근성 지침)에 비준 된 이러한 표준에 대한 안정감이 있습니다..

다음과 같은 일부 웹 사이트 : 정부 기관은 법률에 따라이 가이드 라인을 준수해야합니다.. W3C를 통해 국제적으로 적용됩니다..

웹 접근성의 관료주의를 살펴본 다음 적용 가능한 디자인 팁에 대해 살펴 보겠습니다..

W3C 및 접근성있는 디자인

상당수가있다. 웹 접근성과 관련된 두문자어. 당신이 주제에 아주 새로운 경우에 이들은 복잡 할 수 있고, 그러나 간단하게 한 번 나는 더 감각을 만들 것이라는 점을 희망한다.

• W3C (월드 와이드 웹 컨소시엄) - 프로토콜, 언어 및 규정에 대한 웹 표준을 정의하는 국제 그룹. 모든 공식 접근성 가이드 라인은이 조직에 속합니다..
• WAI (웹 접근성 이니셔티브) - 접근성에 관한 모든 것을 다루는 공식 프로그램. 이 포괄 용어는 현대 접근성을위한 모든 규칙, 지침 및 기술을 포함합니다..
• WCAG (웹 콘텐츠 접근성 지침) - 디자이너가 접근성 수준에 따라 웹 사이트를 평가할 수 있도록 도와주는 표준 및 규칙 그룹.
• 아리아 (Accessible Rich Internet Applications) - JavaScript / Ajax 및 유사한 기술에 의존하는 액세스가 가능한 풍부한 응용 프로그램을 빌드하는 방법을 정의하는 특정 표준. 이 게시물에 대한 자세한 내용은 Anna Monus.

다른 가이드 라인은 WAI 우산 아래있다. UAAG 사용자 에이전트 용 과 ATAG 웹 저작 도구 용. 현재 WAI가 제안한 제안과 WCAG라는 이름으로 WAI의 규칙 집합에 제시된 지침에 가장 관심을 가져야합니다..

더 많은 것을 배우기위한 훌륭한 자료는 W3C의 장애 게시물에서 장애인이 인터넷에 액세스하는 방법에 대한 이야기를 공유하는 것입니다. 복잡한 문제를 모두 이해하는 것은 어려울뿐만 아니라 해결 방법도 이해할 수 있습니다. 그러나 가장 좋은 소식통은 매일 이러한 문제에 직면 한 사람들로부터 온 것입니다..

이해해야 할 또 다른 중요한 주제는 WCAG 적합성입니다. 이것은 웹 사이트의 접근성 수준 다양한 요인을 다루고 있습니다. 레벨은 A, AA 및 AAA 등급 시스템. 웹 접근성 검사기 도구를 사용하여이를 확인할 수 있습니다. 가장 좋은 점수는 AAA입니다..

이 가이드 라인에 대한 자세한 내용을 보려면 W3C의 WCAG 2.0 이해 소개 기사를 확인하십시오. 자세한 내용은 관련 링크를 참조하십시오.

• WCAG 2.0 단순화
• 섹션 508 WCAG 성능

접근 가능한 설계 단계

실용적인 접근성을위한 A11Y 프로젝트 웹 사이트 방문을 적극 권장합니다. A11Y (또한 수비수이기도 함)는 GitHub에서 호스팅되는 무료 오픈 소스 프로젝트입니다., 접근 가능한 웹 디자인을위한 기술 제공.

액세스 가능성 항목의 체크리스트 또는 드롭 다운, 탭, 아코디언, 버튼 및 모달 창 (다른 항목 중에서)과 같은 요소에 대한 디자인 패턴 모음을 탐색 할 수 있습니다..

이 모든 것을 배우고 동시에 구현하는 것은 어렵습니다. 단계별로 살펴보고 혼란 스러울 때 더 많은 것을 조사해보십시오..

시작하기위한 A11Y의 방법과 빠른 팁을 확인하십시오. 콘텐츠로 바로 가기 링크와 고 대비 색 구성표와 같은 구체적인 제안에 부딪 힐 수 있습니다. 이 기술은 각각 고유 한 수준의 세부 정보를 가지므로 구현은 대부분 무엇이 작동하는지 테스트하는 것입니다..

자동화 된 콘텐츠 리더를 사용하는 시각 장애인을 고려하십시오. 또한 오디오 번역기가 있거나 마우스가 아닌 키를 사용하여 웹을 탐색 할 수있는 특수 키보드가있을 수도 있습니다. 이는 이유 적절한 의미 론적 HTML (이 기사를 살펴보십시오)와 같은 속성이 너무 중요합니다. 탭 색인 과 액세스 키.

다이빙을 원하면 접근성이 좋은 테마를 선택하는 것이 좋습니다. 아키텍처를 연구하고 프로젝트에 맞게 디자인을 사용자 정의 할 수 있습니다..

접근성 테스트 도구

시작하려는 경우 액세스 가능성 영역을 선택하고 시도해보십시오. 그런 다음 테스트 도구를 사용하여 성공 수준을 측정 할 수 있습니다..

이 프로세스를 언급 할 가치가 있습니다. 좌절 할 수있다.. 고려해야 할 부분이 너무 많아서 WCAG 가이드 라인을 이해하기가 어려워 정보 과부하로 끝날 수도 있습니다..

중요한 것은 계속 움직이는 것입니다. 하나의 접근성 영역을 선택하고 집중하십시오. 그런 다음이 도구를 사용하여 작업을 조정하고 개선하십시오..

예를 들어 WCAG의 대조 명세로 작업 해보십시오. 가독성 향상. 색상을 선택했으면이 무료 명암비 검사기를 사용하여 함께 작동하는지 확인하십시오..

불행하게도 WCAG 2.0 가이드 라인은 혼란 스럽기 때문에 요구 사항을 이해하기 어려울 수 있습니다. 그러나 더 많이 시도할수록 배울수록 더 많이 이해할 수 있습니다..

이미 온라인 상태 인 사이트를 테스트하려면 WAVE를 확인하십시오. 그것은 무료 시각 검사기 경고, 명암 문제 및 기타 웹 사이트의 특성을 표시합니다. 사이드 바에서 시각적 인보기 및 문제 목록을 볼 수 있습니다..

Cynthia Says 웹 사이트에는 또 다른 무료 앱이 있습니다. WCAG의 A, AA, AAA 등급에 대한 웹 사이트 확인, 과 정부 준수를위한 섹션 508.

오픈 소스를 사용하고 있다면 GitHub에서 무료 접근성 테스트 도구.

• HTML CodeSniffer
• 자동화 된 접근성 테스트 도구
• WCAG 검사기

브라우저 부가 기능

브라우저 부가 기능은 접근성 테스트를위한 가장 빠르고 쉬운 방법을 제공 할 가능성이 높습니다. 진정으로 유용한 결과를 얻으려면 웹 사이트의 모든 컴퓨터에서 실행할 수 있습니다..

Firefox 용 AInspector는 접근성을위한 필수품으로 간주됩니다. 이것은 모든 것을 검사하고 WAVE 테스터보다 훨씬 철저합니다..

Mozilla 사용자는 또한 무료 부가 기능인 WCAG Contrast Checker를 좋아할 것입니다..

Chrome 사용자에게는 AInspector가 없지만 Google에서 공식적으로 만든 접근성 기능 도구가 있습니다. 이것은 접근성 지침을 검사하기 위해 검사기 창에 추가 도구를 추가합니다..

Chrome 사용자는 색상 대비를위한 광도 검사기 및 기타 무료 확장 기능을 제공합니다..

불행히도 Safari 사용자에게는별로 도움이되지 않지만 WCAG 2.0 준수 여부를 확인하는 Opera 확장 기능을 하나 찾았습니다. Google을 열심히 검색하려는 경우 더 많은 도구를 찾을 수 있습니다..

더 읽을 거리

웹 접근성을 배우는 것이 중요하다면 긴 길을 준비하십시오. 쉽지는 않지만 매우 만족 스럽습니다..

지금까지 웹 접근성의 실제 정의, 왜 존재하는지, 개발자가 웹 사이트를 개선하기 위해 수행해야 할 사항에 대해 자세히 이해해야합니다. 다음 단계는 이러한 원칙을 워크 플로우에 도입하는 추가 조사 및 실행입니다..

자세한 정보는 다음 게시물을 확인하고 출처에서 직접 지식을 얻으려면 WCAG 지침을 참조하십시오..

• 태그를 사용하여 HTML 테이블 접근성을 향상시키는 방법
• 장애가있는 사용자를위한 액세스 가능한 디자인
• 웹 사이트 접근성 향상을위한 6 가지 팁
• 귀하의 사이트가 시각 장애인이 이용할 수 있는지 확인하십시오.