웹 구축을 위한 최소한의 조건, 웹 접근성

접근성을 준수한다는 건 뭘까? 대체 텍스트를 꼼꼼하게 넣는 것? 행정기관 프로젝트 보고서를 읽다보면 "콘텐츠 접근성 지침(국가표준) 24개 검사 항목에 대한 점검을 했는가?","장애유형별(시각,지체,뇌병변,청각) 사용자 평가를 실시하고 장애인 사용자의 어려움을 개선했는가?" 등이 나오는데 이것이 바로 접근성이다. 본 포스트에서는 웹 접근성을 3가지로 정의하고 각 의미에 알맞게 준수해야하는 항목과 항목에 따른 목적,도구, 방법을 설명할 것이다. 또, 실질적인 웹 접근성 개선 방안을 살펴보는 것으로 실제 공공기관에서 겪었던 이슈를 기억하고자 한다.

 

1. 스크린 리더기를 사용하는 장애인과 고령자에게 차별없는 웹을 제공하기 위하여 준수해야하는 것

웹 접근성

• 목적 : "한국형 웹 콘텐츠 접근성 지침"이 존재하며, 이 지침에 따라 견고성,인식의 용이성,이해의 용이성,운용의 용이성 준수
• 도구 : 개발자 도구 / 브라우저 부가 기능인 Openwax,firebug,Web Developer / 응용 소프트웨어 방식인 Colour Contrast Analyser
• 방법 : 접촉이 많은 페이지를 중심으로 임의로 20여개를 선정하여 지침의 4개 원칙에 따른 24개 항목별 진단

실질적인 웹 접근성 개선 방안

 

🖤 <img> 태그에 alt 속성으로 대체 텍스트를 제공(이미지 내용과 동등한 수준으로 제공되는 것이 원칙임)

🖤 Colour Contrast Analyser로 진단 시 컨텐츠 디자인이 최소 명도 대비 값을 준수해야 함

화면 확대 기능 제공 여부	명도 대비 값(최소)
O	3 : 1
X	4.5 : 1

 

🖤 <table> 태그 사용 시 <caption>으로 제목과 요약 정보를 충분하게 제공

<table>
	<caption>
		<strong>공지사항의 제목</strong> <!--제목-->
    	<p>공지사항의 목록으로 번호,제목,등록 일자,작성자 정보를 제공</p> <!--요약정보-->
	</caption>
</table>

 

🖤 blind 기법을 위해 position을 옮기는 대신 display:none;을 사용해야 함(보이지 않는 컨텐츠에 키보드 초점이 잡히는 것을 방지)

🖤 버튼으로 새 창을 열게되는 경우, title속성 또는 target="_blank"를 사용하여 새 창이 열릴 것이라고 사전에 제공해야 함(컨트롤에 대한 정보를 미리 제공)

🖤 그 밖에 사용자가 의도하지 않은 초점 변화나 기능이 발생되어 맥락 상 불편을 주지 않는지 체크

 

 

2. 특정 웹 브라우저에 종속되지 않고 다양한 브라우저에서 웹을 제공하기 위하여 준수해야하는 것

웹 호환성

• 목적 : 다양한 종류의 브라우저에서 동일한 경험을 제공하는지 점검 (모바일 웹에서는 PC와 동등한 기능을 제공하는지, 화면이 동일하게 나오는지, 기능이 호환이 되는지 점검)
• 도구 : W3C HTML,CSS Validator 혹은 firefox 웹 콘솔 / Edge, Whale, Chrome 등 브라우저 
• 방법 : 

웹표준 문법준수 점검	W3C HTML/CSS Validator(HTML5의 경우 Nu Html Checkor/CSS의 경우 Level3으로 진단)
웹호환성 수준 점검	3종 브라우저 진단, 모바일 호환성의 경우 PC Chrome 기준 대비 Android Chrome, iOS Safari 진단
웹표준 기술 준수	비표준 기술제거 여부, 웹표준 기술 사용 여부

 

실질적인 웹 호환성 개선 방안

 

🖤 W3C HTML/CSS Validator으로 코드가 웹표준을 준수하는지 점검

🖤 테스트는 Edge, Whale, Chrome에서 진행

🖤 브라우저로 자바스크립트나 돔 오류가 발생하는지 확인

 

 

3. 서비스 품질 향상을 위하여 준수해야하는 것

웹 접속성

목적 : 메인페이지가 적절한 속도로 로딩되는지, 용량(MB)이 적절한 크기로 제공되고 있는지 점검 (3초, 3MB가 기준이며 낮게 나올수록 수준이 상대적으로 높은 것임)

도구 : https://www.webpagetest.org

방법 : 진단 환경 설정 후 공개된 도구를 가지고 테스트(웹, 모바일)

[진단 환경] Test Location : Seoul, Korea - EC2(크롬,파이어폭스)/Browser : 크롬

웹 개방성

목적 : 특정 검색엔진의 크롤러에 대한 user-agent를 차단하고 있는지 진단하여 검색엔진을 차단하고 있는지 확인

도구 : 브라우저

방법 : 웹사이트 주소 뒤에 "robots.txt"를 추가

 

웹 편의성(UX/UI)

"전자정부 웹사이트 UX/UI 가이드라인" 기준 전문가가 수동 진단

 

실질적인 웹 편의성 개선 방안

 

GUI

🖤 헤더에 들어가야 하는 정보와 들어가지 말아야 할 정보

초기 선택이 필요한 정보 -> 헤더	로그인/회원가입 언어,대상,채널별 사이트 링크 사이트맵 글자크기 원격지원 검색 도움말
헤더에 배치 시 오류	자체 배너, 패밀리 사이트

 

🖤 헤더, 메뉴 등 링크 기능이 들어가 있는 UI는 활성화 상태가 명확히 구분되어야 함 

활성화 상태 표현 방법	언더라인 크기변화 강조(하이라이트 음영,반전) 텍스트 색상 명암비 7:1 이상
활성화 상태로 인정하지 않는 사례	볼드체

 

🖤 외부 사이트 또는 새창으로 연결되는 링크는 아이콘 이미지 등을 활용하여 내부 링크와 명확하게 구분

 

검색

🖤 통합 검색 기능은 링크 대신 검색 상자와 검색 버튼으로 구성해야 함

🖤 개인화 검색기능을 권장하고 있음

 

콘텐츠 업로드, 상세 내용 조회

🖤 콘텐츠 작성/업로드 기능이 있을 경우 콘텐츠 작성방법은 플레이스홀더가 아닌 텍스트로 제공해야 함

🖤 등록 가능한 텍스트 및 파일 크기를 표시해야 함

🖤 입력 세션 유지 시간을 표시해야 함

🖤 상세 내용에서 작성자, 작성일, 출처, 저작권 표시

🖤 콘텐츠에 대한 공유/공감 아이콘을 대상 주변에 제공해야 하며, 공감을 표시한 사용자의 정보는 다른 사용자에게 표시되지 않아야 함

 

도움말

🖤 전자상거래가 포함된 경우, 이용약관을 반드시 표시

🖤 사용자가 자주 겪는 문제를 바탕으로 유용한 답변 정보를 제공할 수 있는 "도움말"을 제공해야 함 (유형 별로 분류하여 제공)

🖤 관리자에게 직접 문의할 수 있는 링크를 제공해야 함

 

운영 및 현행화

 

실질적인 운영 및 현행화 방안

 

🖤 UXUI 품질 유지를 위한 상시적, 정기적인 진단 및 개선 활동에 대한 계획 수립

🖤 현황 자료의 최신화를 유지, "콘텐츠에 대한 관리 및 개선 방안(정책)"이 있다면 그에 맞게 운영하고 정보 표기, 정보에 오류가 있거나 부적절한 내용은 없는지 체크

 

 

-

법적으로 웹은 누구에게나 동등하게 정보를 제공하는 수단이 되어야 한다.

경험에서 느낀 바로는, 사기업에서는 호환성 수준과 편의성을 (다양한 환경에서 쉽게 이용할 수 있는가)

행정기관에서는 접근성과 가이드라인을 이행하고 있는지에 대한 여부 (소외 계층에 대한 배려 및 정책 준수)를 중요시 했다.

운영자, 개발자, 사용자 관점에서 전자정부 웹사이트 가이드라인의 품질점검표가 존재한다는 사실이 놀라우며,

가이드라인에서 요하는 품질의 기준을 준수한다면 품질 문제가 없는 웹사이트가 만들어질 것이라 예상한다.