wat tutorial
접근성 테스트를위한 WAT 또는 웹 접근성 도구 모음 자습서 :
접근성 테스트 도구 이전 튜토리얼에서 자세히 설명했습니다. 접근성 테스트 시리즈 .
WAT (웹 접근성 도구 모음) – 도구 모음입니다. Internet Explorer 브라우저 및 기타 브라우저 – 웹 콘텐츠 접근성 지침 버전 2 (WCAG 2.0)를 준수하는지 웹 페이지를 평가하는 데 도움이 될 수 있습니다.
WAT 도구를 사용하는 방법?
부디 여기에서 다운로드하여 설치하십시오. .
성공적으로 설치하면 주소 표시 줄 바로 아래에 추가 웹 접근성 도구가 표시됩니다.
EAsports 웹 사이트 (http://www.easports.com)를 통해이를 배울 것입니다.
# 1) 페이지 제목 – 브라우저의 창 제목 표시 줄 또는 탭 제목 표시 줄에서 페이지 제목 표시 줄을 확인할 수 있습니다. 탭을 마우스로 가리키면 페이지 제목 정보가 제공됩니다.
http://www.easports.com URL을 입력하고 마우스를 가져 가서 탭 제목 표시 줄에서 페이지 제목을 확인합니다.
# 2) 색상 – 웹 사이트의 색상은 Color Contrast Analyser에서 전달되어야합니다.
색상 비율을 결정하기위한 3 가지 적합성 레벨 (예 : 레벨 A, AA 및 AAA)이 있습니다.
AA 또는 AAA 패스를 받아야합니다. .
“A”는 낮은 수준의 접근성을,“AA”는 중간 수준의 접근성을,“AAA”는 가장 높은 수준의 접근성을 나타냅니다.
URL http://www.easports.com 입력 i 도구 모음에서 색상 탭을 클릭하고 대비 분석기를 선택하고 확인합니다.
# 3) 제목 – 제목은 페이지 내용에 대한 효과적인 개요를 제공합니다. 모든 페이지는 H1 또는 H2 제목으로 시작해야합니다. 제목 텍스트는 웹 페이지에서 더 크고 굵게 표시되어야합니다. 페이지는 'h1'로 시작해야하며 각 페이지에는 적어도 하나의 제목이 있어야합니다.
제목 구조를 확인하려면 http://www.easports.com을 클릭하십시오. 구조 탭을 선택한 다음 제목 구조를 클릭하고 확인합니다. 모든 제목 제목 세부 정보를 제공합니다. 또한 제목이 올바르게 중첩되었는지 여부도 검사합니다.
# 4) 이미지 대체 텍스트 – alt 속성은 모든 주요 브라우저에서 지원됩니다. 모든 이미지에는 연결된 대체 텍스트가 있어야합니다. 이미지 위로 마우스를 가져 가면 alt 속성의 값이 툴팁으로 표시됩니다. 이미지를 표시 할 수없는 경우 이미지의 대체 정보를 제공합니다.
URL을 입력하세요 http://www.easports.com, 이미지 표시를 클릭하고 이미지에 대체 텍스트를 사용할 수 있는지 확인합니다.
아래 팝업이 표시됩니다.
위에서 언급 한 세부 정보를 얻을 수 있습니다.
# 5) 탭 순서 – 탭 순서는 논리적이고 적절하게 표시되어야합니다. 탭 키를 클릭하여 다른 링크로 이동할 수 있습니다. 탭 순서 표시기를 선택한 후 특정 링크에 도달하기 위해 탭 키를 클릭해야하는 횟수를 보여주는 링크 근처의 수를 볼 수 있습니다.
탭 순서를 확인하려면 URL http://www.easports.com을 클릭하십시오. 을 클릭하고 구조를 클릭하고 탭 순서 표시기를 선택합니다.
# 6) 목록 – 목록이 적절한 구조로 표시되어야합니다. 목록 항목이 실제로 하나의 목록에 포함되어 있는지 항상 확인해야합니다. 목록은 두 가지 형식이 될 수 있습니다. 주문 목록 및 정렬되지 않은 명부 . 순서가 지정되지 않은 목록은 요소 및 정렬 된 목록은
요소.
URL http://www.easports.com 입력 i 도구 모음에서 구조를 클릭하고 목록 항목을 선택하고 목록의 순서를 확인합니다.
정렬되지 않은 목록의 예 :
정렬 된 목록의 예 :
# 7) 대비 비율 – 기본적으로 최소 대비가 있어야합니다. 웹 브라우저는 필요한 경우 사람들이 텍스트 및 배경의 색상을 변경할 수 있도록해야합니다.
Google URL 입력 https://www.google.co.in/ 이미지를 클릭하고 Juicy Studio Luminosity Analyser를 선택합니다.
결과 표와 함께 색 대비 분석기라는 제목의 새 창이 열립니다. 마지막 열은 광도 명암비입니다.
YouTube 비디오를 wav 파일로 변환
# 8) 라벨 – 라벨이 올바르게 표시되어야합니다.
URL 입력 https://www.google.co.in/ 도구 모음에서 구조를 클릭하고 옵션으로 fieldset / labels를 선택합니다. 필드 셋 및 레이블 세부 정보가 표시됩니다.
# 9) 기본 구조 검사 –이 검사에서는 이미지, 스타일 및 레이아웃이없는 웹 페이지를 확인합니다.
툴바에서 이미지를 클릭 한 다음 이미지 제거를 클릭합니다.
이제 CSS를 선택한 다음 CSS 비활성화를 클릭합니다.
마지막으로 테이블을 클릭 한 다음 선형화를 선택합니다.
연습 시간 :
이제 샘플 접근성 테스트 작업을 제공하겠습니다. 물론 솔루션이 제공됩니다. 그러나 답변으로 이동하기 전에 직접 시도해 보는 것이 좋습니다.
제목, 대체 텍스트가있는 이미지, 탭 순서 표시기 및 색상 대비를 확인합니다. http://www.cbssports.com
해결책: Internet Explorer에서 http://www.cbssports.com을 클릭하십시오.
표제를 확인하려면 구조를 클릭하고 표제를 확인하기 위해 표제 구조를 선택합니다.
제목이 H1에 없습니다. 모든 헤드 라인은 H2에 있습니다.
대체 텍스트를 확인하려면 이미지를 클릭하고 이미지 표시를 선택하여 대체 텍스트가 이미지에 있는지 확인합니다.
대체 텍스트가있는 이미지는 거의없고 alt 속성이없는 이미지는 거의 없습니다. 대체 텍스트가없는 이미지 세부 정보가 팝업에 표시되고 대체 텍스트가있는 이미지의 세부 정보가 이미지 근처에 표시됩니다.
예를 들면alt = 검색 아이콘 근처에 표시되는 'Search CBS Sports.com'텍스트와 Fantasy 로고 근처에 표시되는 alt = 'CBSSports.com'텍스트입니다.
탭 순서 표시기를 확인하려면 구조를 클릭하고 탭 순서 표시기를 선택하십시오. .
특정 링크를 클릭 할 수있는 시도를 보여주는 링크 근처에 개수가 표시됩니다. 예를 들어 대부분의 NFL 링크를 클릭하려면 키보드에서 탭 버튼을 13 번 눌러야합니다.
이제 마지막으로 색상 대비를 확인하고 색상을 클릭하고 대비 분석기를 선택합니다.
텍스트는 이중 A 즉 AA로 전달됩니다.
이것이 웹 사이트의 접근성을 평가하는 방법입니다.