웹 사이트 접근성 향상을위한 10 가지 도구
의심 할 여지없이, 많은 사용자가 웹 사이트에 액세스 할 수 있어야한다는 것을 이해하고 있습니다. 그러나 모든 지침과 표준을 읽는 것은 약간 압도적 일 수 있습니다. 최신 W3C 권장 사항을 여기에서 찾을 수 있지만 모든 단어를 알고 모든 지침을 따라야합니까?
오늘은 웹 사이트 접근성을 개선하는 데 도움이되는 일부 도구와 리소스를 사용하여 조금 더 쉽게 만들려고 노력할 것입니다.
충분한 시각적 대비, 스크린 리더를 통해 액세스 할 수있는 사이트 또는 액세스 가능한 전자 메일을 만들려는 사이트 등 다양한 서비스를 제공합니다.
1. 색상 안전
Color Safe를 사용하면 텍스트 및 배경 색상 대비에 대한 WCAG 지침에 따라 액세스 가능한 색상 팔레트를 확인하고 만들 수 있습니다. 도구와 표준은 비율 기반 공식을 사용하여 누구나 읽을 수있는 색상 조합을 결정합니다.
WCAG 가이드 라인은 작은 (본문) 텍스트의 경우 4.5, 큰 텍스트 (24 포인트 이상)의 대비 비율은 4.5입니다.
16 진수 코드를 기반으로 글꼴 선택 및 크기를 입력하고 팔레트를 생성하기 만하면됩니다. 확인하기 위해 즉각적인 비율을 얻고 다른 유사한 색상을 볼 수 있습니다. 서체와 크기에 따라 비슷한 것이 더 좋은 옵션인지 확인하십시오.
2. 노 커피
NoCoffee는 시각 장애가있는 사람이 볼 수있는 것과 같은 방식으로 디자인을 시각화하는 데 도움이되는 Google Chrome 브라우저 확장 프로그램입니다. (이러한 방식으로 보는 것과 같이 접근성의 중요성을 강조하는 것은 없습니다.)
다음을 확인하고 표시 할 수 있습니다.
- 작은 텍스트 또는 클릭 대상으로 낮은 시력
- 텍스트 및 배경 요소의 저 대비 문제
- 색맹
- 눈, 섬광, 고 스팅 및 백내장
- 눈의 빠른 비자발적 움직임 인 Nystagmus
- 가려진 시야
3. 대조 검사기
대비 검사기를 사용하면 화면에 배경색과 전경색을 입력하고 즉시 색으로 구분 된 패스 / 실패로 여러 시각적 표준을 즉시 확인할 수 있습니다.
이 도구의 멋진 기능에는 색상 및 회색조 옵션 간 전환, 수표 샘플 공유 및 이미지에서 색상 추출 기능이 포함됩니다. PDF 샘플을 저장할 수도 있습니다. 누구나 빠르게 사용할 수있는 다양한 기능을 갖춘 간편한 도구입니다.
또한 WCAG 지침에 요약 된 색상 비율을 제공합니다.
4. Tota11y
Tota11y는 문서의 하단 모서리에 작은 버튼을 넣는 JavaScript 파일입니다. 다양한 접근성 검사를위한 여러 플러그인이 포함 된 도구 모음으로 확장됩니다.
- 제목 및 제목 순서 위반
- 대비 (또는 부족)
- 누락되거나 혼동되는 링크 텍스트
- 입력에서 누락 된 레이블
- 대체 텍스트가없는 이미지
- 라벨은 ARIA 랜드 마크입니다
- 스크린 리더는“원합니다”. 스크린 리더처럼 사이트를“읽을”수 있습니다
5. 파도
WAVE (웹 접근성 평가 도구)는 한 곳에서 강력한 검사 모음입니다.
이 도구는 사이드 바의 정보와 관련된 아이콘의 시각적 오버레이를 사용하여 색상 대비에서 중복 타이틀, HTML 및 구조 요소에 대한 링크에 이르기까지 모든 정보를 제공합니다.
무료 검사기는 단일 페이지에 대해 알아야 할 거의 모든 것을 제공하지만 WAVE에는 여러 사이트 소유자 또는 한 번에 한 페이지 이상을 원하는 사용자를위한 유료 엔터프라이즈 레벨 도구도 포함되어 있습니다. 또한 개인 환경에서 인트라넷, 암호로 보호되거나 동적으로 생성되거나 민감한 웹 페이지를 확인할 수있는 Chrome 및 Firefox 브라우저 확장 프로그램도 포함되어 있습니다.
6. 508 검사기
508 Checker는 URL을 테스트하여 웹 사이트가 미국의 508 규정 준수에 대한 지침을 충족하는지 확인합니다.이 지침은 연방 기금을받는 모든 조직에 법률로 요구됩니다.
이 도구는 무료이지만 스캔의 전체 결과를 보려면 등록해야합니다.
이 사이트에는 조직이 고등 교육, 비영리 단체 및 정부 기관을위한 508 준수 및 특정 리소스의 적용을 받는지 확인할 수있는 퀴즈를 비롯하여 다른 도구와 리소스도 포함되어 있습니다.
7. HTML_CodeSniffer
HTML_CodeSniffer는 소스 코드를 확인하고 정의 된 표준 위반을 찾는 클라이언트 측 스크립트입니다. 웹 콘텐츠 접근성 지침 2.0과 미국 섹션 508을 모두 확인합니다.
웹 사이트에 직접 코드를 붙여 넣어 확인하거나 북마크를 사용하십시오.
사용하기 쉬우 며 표시 할 정보 유형 (오류, 경고 또는 알림)을 선택하고 검사의 문제를 자세히 설명하는 보고서를 볼 수 있습니다.
8. 접근 가능한 이메일
액세스 가능한 이메일은 온라인 검사기 및 HTML 편집기로, 이메일 뉴스 레터를 발송하기 전에 코드를 향상시키는 데 도움이됩니다. 과거 / 보낸 캠페인도 확인할 수 있습니다.
전자 메일을 통해 많은 디지털 커뮤니케이션과 리드 생성이 이루어 지므로 접근성 측면에서 잊혀진 웹 사이트 요소 중 하나가 아니어야하지만 종종 그런 경우가 많습니다. 웹에서의 접근성에 대한 동일한 규칙이 이메일 전송에도 적용됩니다.
이 도구는 이메일 마케팅 접근성 및 유용성을 촉진하기 위해 무료로 사용하도록 설계되었습니다.
9. 아마라
Amara는 비디오 자막 및 자막을 만드는 도구입니다.
소리없이 또는 다른 언어로 연결하는 방법을 제공하면 특히 비디오가 디자인의 핵심 요소 인 경우 더 많은 사람들에게 디자인 요소를 열 수 있습니다.
이 도구에는 무료 및 엔터프라이즈 옵션이 포함되어있어 YouTube와 같은 웹 사이트 및 비디오 스트리밍 플랫폼에서 작동하는 읽기 쉬운 형식으로 화면에 언어를 쉽게 넣을 수 있습니다.
10. MobiReady
MobiReady는 시각적 형식 및 결과 보고서와 함께 모바일 접근성 테스트를 제공하므로 웹 사이트가 가장 작은 장치에서 부족한 위치를 확인할 수 있습니다.
세계 최고의 웹 사이트 순위 인 Alexa 1000과 비교하여 사이트를 벤치마킹 할 수 있습니다. 권장 사항을 통해 자세한 기술 결과를 얻고 상위, 중간 및 하위 계층 장치를 포함한 다양한 화면에서 웹 사이트 렌더링을 볼 수 있습니다.
이 테스트의 가장 중요한 부분 중 하나는 수십 개의 영역에서 점수가 매겨지며 "실패"로 개선 할 수있는 제안이 있다는 것입니다.
결론
웹 사이트 접근성과 관련하여 모든 유형의 사용자에게 유용성과 가독성을 고려하는 것이 중요합니다. 요소, 캡션 및 자막, 적절한 HTML 및 구조의 색상, 크기 및 배치를 고려하고 최대한 많은 사람들이 최상의 경험을 제공 할 수 있도록 이메일을 고려하십시오.
위에서 언급 한 508 준수 표준과 같이 프로젝트에 적용될 수있는 지역 또는 국가 준수 규칙을 확인하는 것도 중요합니다.
의심 스러울 때는 접근성 측면에서 잘못하는 것이 좋습니다. 더 많은 사람들이 화면의 내용을 쉽게 이해할 수 있도록 팔레트에서 색상을 조정하거나 글꼴 크기를 늘려도됩니다.
