기본 접근성 감사를 수행하는 방법
게시 됨: 2017-08-09최근에 접근성에 대해 많이 배웠지만 이제는 사이트를 직접 확인하고 개선해야 할 부분을 확인하고 싶습니다. 그 일을 어떻게 합니까? 접근성 감사 시간입니다! 이 자습서에서는 접근성이 더 높은 사이트를 만드는 데 도움이 되는 기본 접근성 감사에 대한 로프를 보여 드리겠습니다.
내 개요 시리즈에서 기억할 수 있듯이 액세스 가능한 웹 사이트는 인지 가능하고 작동 가능하며 이해하기 쉽고 강력합니다. 귀하의 사이트가 4가지 접근성 요소를 모두 충족하는지 확인하는 테스트에는 코딩이 포함되지 않으므로 걱정하지 마십시오. Chrome 확장 프로그램을 한두 개 설치할 수 있지만 나중에 감사할 것입니다. 시작하자!
참고: 이 자습서에서는 Chrome Inspector 또는 제공되는 브라우저의 기본 개발자 도구 사용 방법을 알고 있다고 가정합니다.
감지할 수 있는
사용자가 귀하의 사이트를 인식할 수 없으면 사이트가 존재하는지 모르기 때문에 인식 가능한 것으로 시작하십시오. 여기서는 텍스트 대안, 캡션 및 색상의 세 가지에 중점을 둘 것입니다.
귀하의 사이트에 있는 장식적인 것 이상의 모든 이미지(단순한 향상이 아니라 정보의 중요한 부분임을 의미함)에 대해 이미지에는 alt 속성이 있어야 합니다. 이미지의 소스 코드를 검사하고 속성을 찾으면 이를 확인할 수 있습니다. 거기에 있다면 훌륭합니다! 이제 속성 값이 유용한지 확인해야 합니다. alt 속성은 시각 장애가 있는 사용자에게 알리는 방식으로 이미지를 설명해야 합니다. 이것은 귀하의 사이트에 SEO 키워드를 넣을 기회가 아닙니다. 설명을 짧고 요점에 맞게 작성하세요. 사이트 콘텐츠 자체에 대해 더 긴 설명을 저장해야 합니다.
이미지와 함께하는 것은 비디오 및 오디오 콘텐츠입니다. 두 경우 모두 콘텐츠에 대한 일종의 캡션이나 필사본을 제공해야 합니다. 동영상에 자막이 활성화되어 있거나 미리 자막이 있어야 합니다. 이를 테스트하는 것은 사이트에서 비디오를 시작하고 캡션을 확인하는 것처럼 간단합니다.
마지막으로 색상을 테스트해야 합니다. 이를 위해 그레이스케일 모드를 활성화하는 Chrome 확장 프로그램을 설치합니다. 설치가 완료되면 사이트를 다시 로드하고 확장 프로그램을 켭니다. 읽기 어려운 부분에 주의하십시오. 이것은 대조적인 관점에서 문제가 있는 곳입니다. 거기에서 회색조를 비활성화하고 Snook 색상 대비 검사기를 사용하여 점수를 확인하십시오. 16진수 값이 없으면 인스펙터를 사용하여 16진수 값을 가져와야 합니다. 4.5(큰 텍스트의 경우 3.0) 미만이면 문제가 됩니다.
실시 가능한
다음 단계는 사이트가 작동 가능한지 확인하는 것입니다. 이것은 우리가 키보드 기능을 테스트할 것임을 의미합니다. 이렇게 하려면 사이트를 엽니다. 페이지가 로드되면 탭 키를 누르십시오. 무슨 일이야? 건너뛰기 링크가 표시되기를 바랍니다. 그렇지 않은 경우 페이지의 첫 번째 링크 주위에 최소한 개요가 있어야 합니다. 이상적으로는 사용자 지정 스타일의 :focus 상태가 있지만 최소한의 것은 브라우저에서 제공하는 것이어야 합니다. 거기에서 탭 키를 계속 눌러 페이지에 나타나는 순서대로 링크에서 링크로 이동하는지 확인하십시오. 포커스가 계속 이동하는 경우 해결해야 하는 탭 인덱스 문제가 있는 것입니다. 양식 플러그인은 종종 여기에서 범인입니다.
이해할 수 있는
다음으로 사이트를 읽을 수 있는지 확인합니다. 결국, 사용자가 귀하의 콘텐츠를 읽을 수 없다면 그것을 갖는 것이 무슨 의미가 있습니까? 요구 사항은 매우 간단합니다. 사이트의 언어를 코드로 결정할 수 있습니까? 확인하려면 인스펙터를 열고 기본 <html> 태그를 확인하세요. lang 속성이 있나요? 그렇다면 명확합니다. 또한 다른 언어로 된 세그먼트에 lang 속성이 적용되었는지 확인해야 합니다.
가독성에 대한 다른 AAA 수준 검사가 있지만 이는 기본 감사의 범위를 벗어납니다. 그러나 일반적으로 대상 청중이 더 높은 수준의 교육을 받지 않는 한 콘텐츠를 6학년 읽기 수준으로 유지하고 싶을 것입니다.
사이트 불안정성의 다른 중요한 측면은 오류 메시지 및 컨텍스트 변경과 관련된 것입니다. 더 구체적으로, 그것의 부족. 사용자가 포커스를 주거나 입력을 활성화하면 큰 변화가 일어나지 않아야 합니다. 사용자에게 어떤 식으로든(화살표 아이콘, 도우미 텍스트 등) 경고가 표시되지 않는 한 페이지가 건너뛰지 않아야 합니다. 다음은 키보드로 테스트할 때 알아차렸을 것입니다.
양식을 테스트할 때 오류 메시지도 마찬가지입니다. 오류는 사용자에게 명확하게 표시되어야 하며 오류를 수정할 수 있도록 화면에 남아 있어야 합니다. 이것은 심지어 큰 웹사이트에서도 항상 틀리는 것입니다. 그들은 오류가 있는 페이지 부분에 초점을 맞추는 것을 잊거나 최소한 어떻게든 표시합니다. 양식에 오류가 있는지 테스트하고 메시지가 명확한지 확인하십시오. 솔리드 양식 플러그인을 사용하면 이 작업에 많은 도움이 되지만 모든 작업을 플러그인에 의존하지 마십시오. 또한 오류를 나타내기 위해 색상(일반적으로 빨간색)만 사용하고 있지 않은지 확인해야 합니다. 실제 텍스트 "오류"는 특히 적색/녹색 색맹이 있는 사람들에게 매우 중요합니다.
오류 외에도 양식과 입력에는 명확한 지침이 있어야 합니다. 사이트의 각 입력을 살펴보고 사용자가 수행해야 하는 작업이 충분히 명확한지 확인하십시오. 예를 들어 검색 양식에는 돋보기 외에 다른 것이 있어야 합니다. 간단한 "검색" 레이블이면 충분합니다. 사용자가 대화형 요소로 무엇을 해야 하는지 확인하십시오. 절대 가정하지 마십시오.
건장한
마지막으로 사이트가 견고해야 합니다. 이것이 의미하는 바는 사이트가 스크린 리더와 같은 보조 기술과 함께 사용할 수 있다는 것입니다. 사이트가 HTML로 잘 구성되어 있다면 괜찮습니다. Chrome을 포함한 일부 최신 브라우저는 기본 HTML 오류를 수정하거나 최소한 수정을 시도한다는 점을 기억하십시오. 사이트의 견고성을 테스트하는 가장 빠른 방법은 Safari에서 사이트를 로드하고 내장 스크린 리더인 VoiceOver를 활성화하는 것입니다. 사이트가 작동하지 않으면 해당 문제를 해결해야 합니다.
마무리
이 감사 자습서는 빠르지만 요점입니다. 사이트에 액세스할 수 있고 필요한 도구가 최소한인지 확인하는 데 그리 오랜 시간이 걸리지 않습니다. 기억해야 할 중요한 점은 일반 사용자로서 당연하게 여길 수 있는 능력이 없는 사람의 입장이 되고 싶다는 것입니다. 이러한 마음가짐을 유지하면 감사를 통해 사이트에 더 쉽게 액세스할 수 있습니다.
놓친 경우 접근성에 대한 이 시리즈를 확인하세요.
- 접근성 소개: 1부
- 접근성 소개: 2부
- 접근성 소개: 3부