웹 접근성 품질마크 (사전심사) > 기술자료

• 목록

웹 접근성 품질마크 사전심사   (자료제공: 한국정보화진흥원)

사전심사 내용
웹 접근성 품질마크 사전심사 기준 5개 항목
- 항목1 : 대체텍스트 제공 (KADO-WAH, 90% 이상)
- 항목2 : 테이블 의미테그 제공 (수동심사, 70% 이상)
- 항목3 : 온라인서식 레이블 제공 (수동심사, 90% 이상)
- 항목4 : 적절한 페이지타이틀 제공 (수동심사, 70% 이상)
- 항목5 : 스킵네비게이션 제공 (수동심사, 50% 이상)

※ 웹 접근성 품질마크 심사단계
사전심사 : 웹 접근성 품질마크 사전심사 5개 항목 ,  KADO (사무국)
전문가심사 : 웹 접근성 품질마크 인증심사기준 18개 항목 ,  실사팀 (전문가)
사용자심사 : 사용자(장애인)에 의한 사용성 심사


항목1 : 이미지의 의미나 목적을 이해할 수 있도록 적절한 대체 텍스트를 제공해야 한다.
■ 자동평가도구(KADO-WAH)로 대체텍스트 관련 항목의 전수조사를 실시하여 결과가 준수기준 이상인지 평가


항목2 : 데이터 테이블을 제공할 경우, 제목 셀과 내용 셀을 구분할 수 있어야 한다.
■ 데이터 테이블에 필요한 마크업(thead, th, tbody 등) 사용 여부 조사


항목3 : 온라인 서식을 제공할 경우, 레이블(<label>)을 제공해야 한다.
■ 로그인, 회원가입 등 온라인 서식에 적절한 레이블 제공 여부 조사
■ 모든 양식 제어 요소에는 이름에 해당하는 레이블을 붙여야 함
  양식 요소에는 고유한 id 속성 값을 주어야 하고, <label> 요소에는 id 속성 값과 동일한 값을 for 속성 값을 주어야 함
  ※ 레이블 텍스트를 클릭해도 입력 서식에 초점이 이동 됨


항목4 :  해당 페이지를 잘 이해할 수 있도록 페이지 제목(<title>)을 제공해야 한다.
■ 각 웹페이지의 특성을 나타내는 고유한 제목을 가져야 함
잘못된 예)  "###", "≪≪≪" 문자와 같이 시각적인 꾸밈과 "~에 오신것을 환영합니다."와 같은 불필요한 요소
■ URL을 고정시키기 위해 의미 없는 프레임을 사용한 경우, 포함 페이지들의 제목이 적절하게 제공되었다고 하더라도 실제 사용자가 보게 되는 화면은 제목이 고정되어 있기 때문에 준수하지 못한 것으로 판정함
- 단, URL을 고정시키기 위한 의미 없는 프레임이 사용된 경우라도, 서버측 프로그램을 이용하여 타이틀을 바꾸어 준다면, 준수한 것으로 인정


항목5 : 반복되는 링크를 건너뛸 수 있도록 건너뛰기 링크(skip, navigation)를 제공해야 한다.

■ 화면에서 감춰진 스킵네비게이션
- HTML
 <div id="SkipToContent">
  <a href="#content">메뉴 건너뛰기</a>
 </div>
- CSS
 #SkipToContent {
  font-size: 0;
  height: 0;
  font-size: 0;
 }
※ 화면에서 감춰진 스킵네비게이션의 경우, 키보드로 콘텐츠를 접근하지만 화면을 함께 보아야 하는 장애(지체장애 등)에는 도움이 되지 못함

■ 키보드로 접근했을 때만, 화면에 보이게 하는 방법
- HTML
 <div id="SkipToContent">
  <a href="#content">메뉴 건너뛰기</a>
 </div>
 
-CSS 경우1 : 화면을 아래로 밀어내는 방법
 #skipToContent a { display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; text-align:center; color:#000; white-space:nowrap; }
 #skipToContent a:focus,
 #skipToContent a:active { height:auto; width:auto; padding:5px; margin-bottom:10px; }

- CSS 경우2 : 화면 특정위치에 표시되는 방법
 #skipToContent { position:absolute: left:0; top:0; }
 /* left 값과 top 값을 지정하여 건너뛰기 링크가 화면에 표시될 위치를 정의 */
 #skipToContent a { display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; text-align:center; color:#000; white-space:nowrap; }
 #skipToContent a:focus,
 #skipToContent a:active { height:auto; width:auto; }

■ 항상 화면에 보이도록 스킵네비게이션을 제공하는 방법은 시각장애인 및 지체장애인 등 키보드로 콘텐츠를 접근하는 모든 사람에게 도움이 될 수 있어, 더욱 바람직함