wave accessibility testing tool tutorial
WAVE 웹 접근성 도구 자습서 : WAVE Chrome 및 Firefox 확장 프로그램 사용 방법
크롬을위한 최고의 팝업 차단기
웹 접근성 도구 모음 이전 튜토리얼에서 자세히 설명했습니다. 이 튜토리얼은이 시리즈의 첫 번째 튜토리얼로 이어집니다. 여기에서 확인하십시오. 웹 접근성 테스트 – 1 부 .
이 튜토리얼에서 우리는 접근성이 무엇이며 접근성 테스트 도구를 사용하여 어떻게 평가 될 수 있는지에 대한 몇 가지 기본 개념을 살펴 보았습니다.
이 튜토리얼에서는 WAVE 툴바, JAWS 접근성 도구, 기술 및 세부 사항과 같은 몇 가지 접근성 도구를 더 볼 것입니다.
[영상 출처]
학습 내용 :
웨이브(웹 접근성 평가 도구)
WAVE 도구는 웹 접근성 평가 도구입니다. Firefox 브라우저.
WAVE는 웹 콘텐츠에 액세스 할 수 있는지 여부를 알려줄 수 없습니다. 인간 만이 진정한 접근성을 결정할 수 있습니다. 그러나 WAVE는 웹 콘텐츠의 접근성을 평가하는 데 도움이 될 수 있습니다.
모든 평가는 브라우저 내에서 직접 이루어지며 정보는 WAVE 서버로 전송되지 않습니다. 이를 통해 100 % 비공개 및 보안 접근성보고가 보장됩니다.
WAVE 웹 접근성 도구 모음을 다운로드하려면 http://wave.webaim.org/toolbar/ F로 다운로드 irefox 브라우저 . WAVE 툴바는 Firefox 만 지원하므로 Firefox 브라우저에서 다운로드 URL을 열어야합니다.
WAVE 웹 접근성 도구 모음 사용 방법
다음은 Firefox 브라우저에서 작업하는 동안 사용할 수있는 기능입니다.
#1) 웹 사이트 선택 http://www.easports.com/ 을 클릭 한 다음 '오류, 기능 및 경고'를 클릭하면 접근성 경고 및 오류가있는 페이지가 노란색으로 표시됩니다. 경고에 대한 세부 정보를 보려면 이미지 위로 마우스를 가져갑니다.
( 노트 : 이미지를 클릭하시면 크게보실 수 있습니다.)
#두) 이제 '구조 / 주문보기'를 클릭하면 인라인 프레임 세부 정보가있는 페이지가 나타납니다.
#삼) 이제 '텍스트 전용보기'를 클릭하면 사이트가 이미지, 스타일 및 레이아웃없이 표시됩니다.
# 4) 도구 모음의 '개요보기'아이콘은 제목이 순서대로되어 있는지 여부를 알려줍니다.
# 5) '페이지 재설정'아이콘은 페이지를 새로 고칩니다.
# 6) '스타일 비활성화'를 클릭하면 페이지에서 CSS 스타일이 제거됩니다.
# 7) 'Icons Key'버튼은 추가 세부 정보, 정보 및 권장 사항과 함께 모든 WAVE 아이콘 목록을 표시합니다.
웨이브 도구를 다운로드하지 않고 웹 사이트의 접근성을 평가하고 온라인에서 직접 사용할 수도 있습니다.
웹 사이트의 접근성을 확인하는 단계
1 단계) URL을 클릭하십시오 : http://wave.webaim.org/
2 단계) 들어가다 웹 페이지 주소 에 본문 상자 Enter를 누르십시오. 우리는 사용할 것입니다 와 예로서. 따라서 텍스트 상자에 www.facebook.com 사이트를 입력하고 Enter 버튼을 클릭하십시오.
3 단계) 탐색 왼쪽에서 요약 세부 정보를 찾을 수 있습니다.
- 오류는 카운트와 함께 빨간색으로 표시됩니다. 제 경우에는 13으로 표시됩니다.
- 경고는 개수가 13 인 노란색으로 표시됩니다.
- 기능은 개수가 10 인 녹색으로 표시됩니다.
- 구조 요소는 파란색으로 6 개가됩니다.
- HTML5 및 ARIA는 자주색으로 15입니다.
- 대비 오류는 검정색으로 14 개입니다.
각 아이콘을 클릭하면 위에 표시된 경고 (페이지 중앙)에 표시된 요소에 대한 자세한 정보가 제공됩니다.
이제 다른 범주의 도구를 살펴 보겠습니다.
무료 웹 페이지 접근성 검사기 :
몇 가지 최고의 웹 접근성 검사 도구 :
시각 장애 도구
시력 장애는 시력 상실을 의미합니다. 다양한 종류의 시각 장애가 있습니다.
- 맹목
- 저시력 또는 제한된 시력
- 색맹
시각 장애가있는 사용자는 콘텐츠를 소리내어 읽는 보조 기술 소프트웨어를 사용합니다.예를 들어Window 운영 체제 용 JAWS, Window 운영 체제 용 NVDA, Mac 용 Voice Over 시력이 약한 UA 사용자는 브라우저 설정이나 운영 체제의 멋진 설정으로 텍스트를 더 크게 만들 수도 있습니다. 돋보기 및 JAWS 도구를 사용하여 이러한 기능을 학습 할 것입니다.
A) 돋보기
1) 확대 / 축소 텍스트 돋보기 컴퓨터 화면의 모든 것을 확대하고 응용 프로그램을 쉽게보고 사용할 수 있도록합니다. 다음에서 다운로드 할 수 있습니다. 이 링크 .
이것이 어떻게 작동하는지에 대한 좋은 아이디어를 얻으려면 무료 평가판을 다운로드하고 실험하는 것이 좋습니다.
두) 창의 돋보기 또한 화면의 다른 부분을 확대합니다. 바탕 화면에서 시작 버튼을 클릭 한 다음 돋보기를 입력하여 열 수 있습니다. 프로그램 돋보기를 클릭하십시오. 웹 페이지에 마우스를 올려 놓으면이 도구는 화면 크기를 확대하여 표시합니다.
삼) 일반 컴퓨터 모니터를 사용할 수없는 시각 장애인 컴퓨터 사용자는 새로 고침 가능한 점자 디스플레이 또는 점자 터미널을 사용하여 텍스트 출력을 읽습니다.
에 따르면 위키 백과 , 새로 고침 할 수있는 점자 디스플레이 또는 점자 터미널은 일반적으로 평평한 표면의 구멍을 통해 돌출 된 둥근 끝 핀을 사용하여 점자 문자를 표시하는 전자 기계 장치입니다.
C ++ 버블 정렬 알고리즘
B) JAWS- 음성으로 작업 액세스
JAWS는 시각적으로 손상된 사용자가 화면을 읽을 수 있도록하는 Windows 운영 체제에서 웹 페이지를 테스트하는 데 사용되는 화면 판독기입니다. JAWS는 모든 버전의 운영 체제를 지원하고 새로 고칠 수있는 점자 디스플레이를 제공합니다.
다음은 JAWS를 사용하는 키보드 명령입니다.
JAWS의 도움으로 테스트되는 기본 기능은 다음과 같습니다.
- JAWS는 웹 페이지를 탐색하기위한 키 입력 수를 제공합니다. 예를 들어 화살표 키, Page Up 및 Down 키, Home, End 및 기타 여러 JAWS 탐색 키.
- 링크, 이미지 및 이미지 맵 : JAWS는 웹 페이지의 한 링크에서 다른 링크로 이동할 수있는 키 입력을 제공합니다.
- HTML 양식 필드 및 컨트롤 : JAWS는 양식 요소 사이를 탐색하기위한 키 입력을 제공합니다.
- HTML 프레임 : 키보드로 프레임을 탐색합니다.
- 테이블 : 표 셀 탐색
이것은 접근성 평가를 수행하는 데 사용되는 다양한 기술과 도구에 대한 간략한 개요입니다.
개발자 및 테스터를위한 접근성 테스트 팁
- 모든 활성 이미지에 링크 또는 버튼의 기능을 나타내는 대체 텍스트가 있습니까?
- 모든 장식 이미지 및 중복 이미지에 null (alt =””) 대체 텍스트가 있습니까?
- 모든 정보 이미지에 이미지가 제공 한 것과 동일한 정보를 제공하는 대체 텍스트가 있습니까?
- 페이지가 제목으로 구성되어 있습니까? 제목으로 표시되어 있습니까?
- 키보드를 사용하여 모든 것에 액세스 할 수 있습니까?
- 화면 판독기에서 페이지를 논리적 순서로 읽습니까?
- 키보드 액세스를 사용하는 동안 초점이 맞춰진 요소가 분명합니까?
- 비디오의 모든 중요한 정보를 표준 오디오 또는 추가 된 오디오 설명을 통해 사용할 수 있습니까?
개발팀 제품이 코드 검사 및 단위 테스트를 통해 접근성을 준수하는지 확인할 수 있습니다.
일반적인 테스트 사례 :
- 모든 기능이 키보드를 통해서만 사용 가능한지 확인하십시오 (마우스를 사용하지 마십시오).
- 디스플레이 설정이 고 대비 모드로 변경 될 때 정보가 표시되는지 확인하십시오.
- 화면 읽기 도구가 사용 가능한 모든 텍스트를 읽을 수 있고 모든 그림 / 이미지에 이와 관련된 대체 텍스트가 있는지 확인합니다.
- 제품 정의 키보드 동작이 접근성 키보드 바로 가기에 영향을주지 않는지 확인하십시오.
결론
웹 접근성은 장애인에게 많은 기회를 제공합니다. 그러나 우리는 사용자가 웹 사이트의 콘텐츠에 접근하는 것을 방해 할 수있는 모든 종류의 장애 나 어려움에 대해 완전한 접근을 제공하기 어렵다는 사실을 인정해야합니다.
조치를 취할 수 있지만 100 %가 아닐 수도 있습니다. 개발 초기 단계부터이 기사에 설명 된 표준을 따르면 대부분의 사용자가 액세스 할 수있는 웹 사이트를 쉽게 만들 수 있습니다.
아래 의견에 더 많은 접근성 테스트 도구와 팁을 자유롭게 제안하십시오.