05 it세미나 접근성 향상 실행리스트

2023 년 4 월 10 일 月요일 IT 사업팀 엄 대 진

IT 사업팀 개발 표준웹접근성

웹 접근성 정의 품질마크 인증제도 접근성 관계요소 장애 환경 분류 키보드 접근키 접근성 향상 실행리스트 센스리더 리뷰 참조 URL

접근성 향상 실행리스트

1. 이미지와 동일한 콘텐츠를 alt 속성에 표기합니다. 이미지 내용과 동일한 값을 alt 속성에 표기하여, 이미지를 볼 수 없는 환경에서도 내용을 확인할 수 있게 합니다.※ 이미지를 볼 수 없는 환경 : 시각장애인(스크린리더 사용), 이미지서버 장애, 사용자가 직접 이미지를 표시하지 않도록 설정 등실행 내용<img>

<img src="h2_recom.gif" alt="네이버 추천 정보" width="83" height="16"> <input type="image">

<input type="image" src="btn_sch.gif" alt="검색"> <map>

<img src="vs.gif" width="244" height="74" usemap="#vs"><map name="vs" id="vs"><area shape="rect" coords="9,7,69,69" href="spa.nhn" alt="스페인"><area shape="rect" coords="173,8,232,69" href="fra.nhn" alt="프랑스"><area shape="rect" coords="95,43,146,61" href="vs.nhn" alt="전력비교"></map> 텍스트가 없는 정보성 이미지는 다음과 같이 alt 속성 표기

페이지 | 1

http://html.nhndesign.com/accessibility_action_list#wd1

http://html.nhndesign.com/accessibility_reference

http://html.nhndesign.com/accessibility_sensereader_review

http://html.nhndesign.com/accessibility_action_list

http://html.nhndesign.com/accessibility_accesskey

http://html.nhndesign.com/accessibility_disabilities

http://html.nhndesign.com/accessibility_elements

http://html.nhndesign.com/accessibility_certification

http://html.nhndesign.com/accessibility_definition


2. 이미지를 자르지 않고 통째로 사용해야 하는 경우, 숨겨진 대체 콘텐츠를 작성합니다. 실행 내용대체콘텐츠를 display:none 함 장점

마크업이 간결함

단점 o 이미지를 불러오지 못할 경우, 콘텐츠를 볼 수 없음 o <map> 사용 불가

<style type="text/css">.bean{width:612px; height:154px; background:url(bean.gif); text-indent:-1000px;}.bean .alternate{display:none;}</style>

<div class="bean"> <div class="alternate"><h3><strong>콩</strong>이란?</h3><p>콩은 해피빈에서 사용할 수 있는 기부아이템으로 <strong>콩 1 개 = 100 원</strong>의 가치를 지닙니다.<br>콩은 보유 방법에 따라 <strong>충전콩과 후원콩</strong>으로 나뉘며<br>내가 보유한 콩에 대한 정보는 <strong><a href="my.nhn">My 해피빈</a></strong>에서 확인 가능합니다.</p><ul><li>콩 1 개 = 100 원</li><li>콩 10 개 = 1,000 원</li>

페이지 | 2


<li>콩 100 개 = 10,000 원</li></ul></div></div>

background-image 아래에 내용 숨김 장점 이미지나 CSS 를 불러오지 못해도 콘텐츠를 볼 수 있음 단점 <map> 사용 불가 <style type="text/css">.bean{position:relative; width:612px; height:154px;}.bean .content{position:absolute; left:0; top:0; z-index:10; width:612px; height:154px; background:url(bean.gif); text-indent:-1000px;}.bean .alternate{overflow:auto; width:100%; height:124px; padding-top:30px;}</style>

<div class="bean"> <div class="content">콩이란? 기부아이템</div> <div class="alternate"><h3><strong>콩</strong>이란?</h3><p>콩은 해피빈에서 사용할 수 있는 기부아이템으로 <strong>콩 1 개 = 100 원</strong>의 가치를 지닙니다.<br>콩은 보유 방법에 따라 <strong>충전콩과 후원콩</strong>으로 나뉘며<br>내가 보유한 콩에 대한 정보는 <strong><a href="my.nhn">My 해피빈</a></strong>에서 확인 가능합니다.</p><ul><li>콩 1 개 = 100 원</li><li>콩 10 개 = 1,000 원</li><li>콩 100 개 = 10,000 원</li></ul></div></div> 이미지 아래에 내용 숨김 장점

o 이미지나 CSS 를 불러오지 못해도 콘텐츠를 볼 수 있음 o <map>을 사용 가능

단점 o <img> 태그에 width, height 를 작성할 수 없음 (작성할 경우, 콘텐츠가 이미지 아래에

있으므로 마우스 제어 불가) o CSS 를 불러오지 못했을 경우 동일한 내용의 콘텐츠가 2 번 반복됨

콩이란?콩은 해피빈에서 사용할 수 있는 기부아이템으로 콩 1 개 = 100 원의 가치를 지닙니다.콩은 보유 방법에 따라 충전콩과 후원콩으로 나뉘며내가 보유한 콩에 대한 정보는 My 해피빈 에서 확인 가능합니다.

o 콩 1 개 = 100 원

페이지 | 3

http://html.nhndesign.com/my.nhn


o 콩 10 개 = 1,000 원 o 콩 100 개 = 10,000 원

<style type="text/css">.bean{position:relative; width:612px; height:154px;}.bean .content{position:absolute; left:0; top:0; z-index:10;}.bean .alternate{overflow:auto; width:100%; height:124px; padding-top:30px;}</style>

<div class="bean"> <div class="content"><img src="bean.gif" alt="콩이란? 기부아이템" title="" usemap="#bean"><map name="bean"><area shape="rect" coords="377,95,432,112" href="my.nhn" alt="My 해피빈"></map></div><div class="alternate"><h3><strong>콩</strong>이란?</h3><p>콩은 해피빈에서 사용할 수 있는 기부아이템으로 <strong>콩 1 개 = 100 원</strong>의 가치를 지닙니다.<br>콩은 보유 방법에 따라 <strong>충전콩과 후원콩</strong>으로 나뉘며<br>내가 보유한 콩에 대한 정보는 <strong><a href="my.nhn">My 해피빈</a></strong>에서 확인 가능합니다.</p><ul><li>콩 1 개 = 100 원</li><li>콩 10 개 = 1,000 원</li><li>콩 100 개 = 10,000 원</li></ul></div></div>

3. 추가정보가 필요한 경우, 추가정보를 title 속성에 표기합니다. title 속성은 <html>, <head>, <title>, <base>, <basefont>, <meta>, <script>, <param>을 제외한 모든 태그에 사용할 수 있습니다.실행 내용내용이 충분히 전달되지 않을 때

<img src="up.gif" alt="업데이트" title="6 월 12 일 업데이트" width="9" height="9"> 예고 없는 새창을 띄워야 하거나, 이동 경로를 정확히 알 수 없을 때 인쇄하기 <a href="print.nhn" title="새창" target="_blank" >인쇄하기</a> 스크린리더 사용자가 어떤 내용의 <input>인지 바로 알 수 있게 함

<input type="text" title="검색창"> <input type="submit" value="검색"> 학습을 통해서만 알 수 있는 내용인 경우

<input type="text" title="아이디"> <input type="password" title="비밀번호"> <input type="submit" value="로그인">

4. 스크립트를 지원하지 않는 환경에 대비해 <noscript>에 대체 콘텐츠를 작성합니다. 스크립트를 지원하지 않는 환경에서는 <noscript>에 작성된 콘텐츠가 제공됩니다.실행 내용대체 콘텐츠 제공 스크립트가 작동될 때

스크립트가 작동되지 않을 때 학습 게임 재미 부모 <script type="text/javascript" src="http://jr.naver.com/mainlucy/js/menu.js"></script>

페이지 | 4

검색

로그인

http://html.nhndesign.com/parents.nhn

http://html.nhndesign.com/fun.nhn

http://html.nhndesign.com/game.nhn

http://html.nhndesign.com/study.nhn

http://html.nhndesign.com/print.nhn


http://help.naver.com/query/exMailQuestion.jsp?question_gubn=unsound&qppath=04

http://www.w3.org/2008/webapps/charter/

10. 생략된 제목도 표기합니다. 일반 사용자는 활성화 된 디자인을 통해 제목을 인식할 수 있지만,이미지를 볼 수 없는 상황, 특히 스크린리더를 사용하는 시각장애인에게는 생략될 수 없는 내용입니다.따라서 HTML 구조만으로 제목을 파악할 수 없는 내용일 경우 반드시 제목을 표기합니다.실행 내용선택 된 탭의 제목 표기

<style type="text/css">.hd{overflow:hidden; width:0; height:0;}</style><h2 class="hd">순위별 탭 리스트</h2><ul><li class="on"><a href="#url1">국가순위</a></li><li><a href="#url2">개인순위</a></li><li><a href="#url3">종합순위</a></li></ul><h3 class="hd">국가순위</h3>

11. <table>에 <caption>, summary 속성값을 표기합니다.

페이지 | 7

http://www.w3.org/2008/webapps/charter/

http://help.naver.com/query/exMailQuestion.jsp?question_gubn=unsound&qppath=04


<table>에 <caption>으로 제목을 입력합니다. <caption>은 <table> 태그 바로 뒤에 작성해야 합니다.<table>에 제목이 없거나, 제목이 <table>의 성격을 충분히 전달하지 못할 경우, summary 속성에 요약정보를 표기합니다. 실행 내용순위표 <table summary="유로 2008 A 조순위 및 성적"><caption>A 조순위</caption>(중략)</table>

12. <table>에 <thead>, <tfoot>, <tbody>, <th>를 작성합니다. <thead>는 표의 머리글, <tfoot>은 바닥글, <tbody>는 본문을 의미합니다.이 태그를 사용하면 의미를 부여한 마크업을 할 수 있고, 스타일 적용이 용이하며, 긴 표를 인쇄할 때 머리글과 바닥글을 반복적으로 인쇄할 수 있습니다.※ 주의사항: <thead>, <tfoot>, <tbody> 순으로 작업되어야 합니다. 실행 내용종목별 성적 <table summary="올림픽 종목별 메달 성적"><caption>종목별 성적</caption><thead><tr><th>종목</th> <th>금</th> <th>은</th> <th>동</th></tr></thead><tfoot><tr><th>합계</th> <td>9</td> <td>4</td> <td>2</td></tr></tfoot><tbody><tr><th>태권도</th> <td>2</td> <td>1</td> <td>1</td></tr><tr><th>양궁</th> <td>4</td> <td>1</td> <td>1</td></tr><tr><th>핸드볼</th> <td>3</td> <td>2</td> <td>0</td></tr></tbody></table>

13. accesskey 속성에 지정된 단축키를 실행하면 해당 내용으로 포커스가 이동합니다. <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>에 사용할 수 있습니다.브라우저별 accesskey Windows IE: Alt + accesskey Windows Firefox: Alt + Shift + accesskey Mac Firefox&Safari: Ctrl + accesskey Windows&Mac Opera: Shift + Esc + accesskey 실행 내용검색창에 accesskey="S" 속성 적용

<input type="text" title="검색창" accesskey="S"> <input type="submit" value="검색"> 로그인 아이디창에 accesskey="L" 속성 적용

<input type="text" title="아이디" accesskey="L"> <input type="password" title="비밀번호"> <input type="submit" value="로그인">

14. 바로가기 링크를 제공하여 원하는 콘텐츠로 바로 갈 수 있도록 합니다.

페이지 | 8

검색

로그인


바로가기 링크는 시각장애인이 유용하게 사용할 수 있습니다.서비스 전체에 공통으로 사용되는 콘텐츠를 매번 반복해서 읽지 않도록 콘텐츠를 건너뛰는 바로가기 링크를 제공합니다.실행 내용본문, 메뉴, 서브메뉴 바로가기 제공

<a href="#skip_content">본문 바로가기</a><a href="#skip_lnb">메뉴 바로가기</a><a href="#skip_nav">서브메뉴 바로가기</a>

15. 문서가 논리적으로 구성되지 않았을 경우 tabindex 속성을 지정합니다. 키보드로 정보에 접근할 때 논리적으로 이동할 수 있습니다.실행 내용로그인을 <table>로 마크업한 경우

<table><tr><td><input type="text" title="아이디" tabindex="1" /></td><td rowspan="2"><input type="submit" value="로그인" tabindex="3" /></td></tr><tr><td><input type="password" title="비밀번호" tabindex="2" /></td></tr></table>

16. <label>로 입력창과 제목을 연결시킵니다. <label>이 <input>, <select> 등의 입력창과 그에 해당하는 제목을 연결시켜 문서 파악을 용이하게 합니다.또한 제목 텍스트를 클릭해도 입력창이 선택되기 때문에 직관적이며, 클릭영역이 넓어져 사용이 편리합니다.실행 내용아이디, 비밀번호 입력창

아이디

비밀번호 <label for="userid">아이디</label> <input type="text" id="userid"><label for="userpw">비밀번호</label> <input type="password" id="userpw">

페이지 | 9

로그인


언론사 선택

경향신문 문화일보 세계일보 <input type="checkbox" id="npkh"> <label for="npkh">경향신문</label><input type="checkbox" id="npmw"> <label for="npmw">문화일보</label><input type="checkbox" id="npsg"> <label for="npsg">세계일보</label>

17. 콘텐츠가 인쇄되는 것을 고려하여 인쇄용 CSS 를 적용합니다. 인쇄 전용 스타일을 지정해 사용성을 높일 수 있습니다.인쇄용 CSS 적용 방법 방법 1. <link rel="stylesheet" type="text/css" media="print" href="print.css" /> 방법 2. <style type="text/css" media="print">@import url(print.css);</style> 방법 3. @import url(print.css) print; 방법 4. @media print{.layer{display:block; border-top:1px solid #333;}} 실행내용너무 흐리게 인쇄되는 글자색을 진하게 바꿔 줍니다. 웹 페이지 아이디 가입잠금이란 본인의 주민등록번호로 타인이 부정하게 네이버에 회원가입하는 것을 방지하기 위해 네이버 추가 회원가입을 회원 스스로 차단하는 기능입니다.인쇄 페이지 아이디 가입잠금이란 본인의 주민등록번호로 타인이 부정하게 네이버에 회원가입하는 것을 방지하기 위해 네이버 추가 회원가입을 회원 스스로 차단하는 기능입니다.@media print{.info{color:#000;}} 어두운 배경에 밝은 색상의 글자를, 흰색 배경에 어두운 색 글자로 인쇄되도록 합니다. 웹 페이지 아이디 가입잠금이란 본인의 주민등록번호로 타인이 부정하게 네이버에 회원가입하는 것을 방지하기 위해 네이버 추가 회원가입을 회원 스스로 차단하는 기능입니다.인쇄 페이지 아이디 가입잠금이란 본인의 주민등록번호로 타인이 부정하게 네이버에 회원가입하는 것을 방지하기 위해 네이버 추가 회원가입을 회원 스스로 차단하는 기능입니다.@media print{.info{background-color:#fff; color:#000;}} 마우스를 올려야 나타나는 설명 레이어를 표시해 줍니다. 웹 페이지 우리나라 보물 1 호는 ? 인쇄 페이지 우리나라 보물 1 호는 ? 흥인지문 @media print{a.mlayer span{display:inline;}} 색상만으로 구별할 수 있는 링크 디자인을 인쇄 시 밑줄이 나오도록 설정 합니다. 흑백 인쇄 시 링크를 쉽게 구별할 수 있습니다. 웹 페이지 카페지원센터의 알콩달콩 정모현장을 공개합니다. 인쇄 페이지 카페지원센터의 알콩달콩 정모현장을 공개합니다. @media print{a{text-decoration:underline;}} 메뉴, 배너 등을 감춰주고 내용만 인쇄되게 합니다. 웹 페이지

페이지 | 10



http://html.nhndesign.com/ddm.nhn

http://html.nhndesign.com/ddm.nhn


인쇄 페이지

페이지 | 11


@media print{#header, .aside, #footer{display:none;}body, #container, #content{background:none;}#wrap, #container{width:auto;}}

18.클릭 영역이 18px 이상이 되도록 권장합니다. 클릭하고자 하는 대상이 너무 작을 경우 클릭영역을 넓혀서 사용성을 높여줍니다.html 가이드라인 참고 실행내용닫기, 더보기, 다음 버튼 클릭 영역이 이미지 크기와 동일한 경우

CSS 로 클릭 영역을 넓힘

.btn{display:block; width:15px; padding:3px;}<a href="#url" class="btn"><img src="btn_close.gif" alt="닫기" width="15" height="14"></a>

19. 색 구별이 어려운 사용자를 위해서 전경색과 배경색 대비를 명확하게 합니다. 참고: Colour Contrast Analyser(http://juicystudio.com/services/colourcontrast.php), Fujitsu Color Selector(http://www.fujitsu.com/global/accessibility/assistance/cs/)실행내용 (Fujitsu Color Selector 참고)색 구별이 가능한 예 #444444 / #ffffff #438a01 / #ffffff #bbbbbb / #333333 #48401b / #ffde28

페이지 | 12

http://www.fujitsu.com/global/accessibility/assistance/cs/

http://juicystudio.com/services/colourcontrast.php

http://html.nhndesign.com/image_guideline


#ffffff / #255296 색 구별이 어려운 예 #999999 / #ffffff - 백내장을 가진 사람이 보기 힘든 대비 #ff7d27 / #ffffff - 일반인 및 백내장, 녹색맹, 청황색맹을 가진 사람이 보기 힘든 대비 #999999 / #333333 - 백내장, 적녹색맹을 가진 사람이 보기 힘든 대비 #ec5115 / #252525 - 백내장, 적녹색맹을 가진 사람이 보기 힘든 대비 #fdf974 / #83b61b - 일반인 및 백내장, 녹색맹, 청황색맹을 가진 사람이 보기 힘든 대비 #ffffff / #ff892d - 일반인 및 백내장, 녹색맹, 청황색맹을 가진 사람이 보기 힘든 대비

20. 색 구별이 어려운 사용자를 위해서 링크(link, visited, hover, active) 컬러값을 고려합니다.

실행내용색 구별이 가능한 예 링크 a{color:#444;}a:visited{color:#87124f;}a:active{color:#f33;}a:hover{color:#438a01;} 링크 a{color:#000063;}a:visited{color:#87124f;}a:active{color:#f33;}a:hover{color:#0000ff;}

21. <form>안에 여러 컨트롤이 있을때, <fieldset>으로 그룹화 하고 <legend>로 제목을 표기합니다.<fieldset>과 <legend>를 사용하면 시각장애인에게 그룹화 된 콘텐츠 전달이 용이해집니다.실행내용<fieldset>의 제목을 <legend>로 표기.

필수입력이름 나이 선택입력사는곳 취미

<fieldset><legend>필수입력</legend><label for="uname">이름</label> <input type="text" id="uname" /><label for="uage">나이</label> <input type="text" id="uage" /></fieldset><fieldset><legend>선택입력</legend><label for="ulc">사는곳</label> <input type="text" id="ulc" /><label for="uhb">취미</label> <input type="text" id="uhb" /></fieldset>

22. <select>에 onchage 속성 대신 버튼을 사용합니다. 키보드로 셀렉트박스를 선택할 경우, 이동경로를 알지 못한 채 이동하거나 원하는 내용을 선택할 수 없으므로 onchage 속성 대신 버튼으로 실행합니다.실행내용onchage 속성 대신 '조회' 버튼으로 실행

<select onChange="window.open(value,'_blank');"><option>2008</option><option>2007</option></select><select onChange="window.open(value,'_blank');"><option>6 월</option><option>5 월</option></select><input type="image" src="sch.gif" alt="조회">

23. onmouseover 와 onfocus 속성을 함께 사용하여, 키보드만으로도 콘텐츠에 접근할 수 있어야 합니다.

마우스로 제어가능한 액션은 키보드로도 제어 되어야 하므로 onmouse, onkey 속성의 단독 사용은 지양합니다.실행내용onmouseover 와 onfocus 를 함께 사용.

페이지 | 13

http://html.nhndesign.com/accessibility_action_list#url

http://html.nhndesign.com/accessibility_action_list#url


onmouseover<p><a href="#info" onmouseover="view();" onfocus="view();">onmouseover</a></p><div id="info"><p>onmouseover 는 마우스가 올라왔을 때 발생하는 이벤트입니다.</p><p><input type="button" value="닫기" onclick="cls();" /></p></div><script type="text/javascript">var target=document.getElementById('info');target.style.display = "none"; function view(){target.style.display = "block";}function cls(){target.style.display = "none";}</script>

24.움직이는 콘텐츠는 수동으로 제어 가능해야 합니다. 실행내용시간에 따라 페이지가 넘어가는 콘텐츠에 멈춤, 이전, 다음 버튼 제공

25. 이미지를 볼 수 없는 환경에서는 클릭영역을 찾을 수 없기 때문에 <map> 사용을 지양합니다.<map>을 사용하면 이미지에 그려진 버튼 모양에 따라 투명한 링크 영역을 만드는데, 이미지가 보이지 않을 경우 링크 영역도 보이지 않게 되므로 사용을 지양합니다.링크영역이 일반적이지 않을 경우에 주로 사용하며, alt 속성에 반드시 대체 텍스트를 제공합니다.실행내용링크 영역이 반드시 원형이어야 할 경우

26. 다양한 환경에서 콘텐츠 전달이 가능하도록 합니다.다양한 브라우저, 환경에서 모든 콘텐츠의 의미가 전달 되어야 합니다.서비스에 따라서 브라우저의 호환성이 제한 적일 수 있습니다.웹표준화팀 Cross Browsing 단계

페이지 | 14

http://html.nhndesign.com/accessibility_action_list#info


실행내용지정된 Cross Browsing 영역에서 네이버 자동완성 서비스를 동일하게 이용가능

27.

페이지 | 15


속도의 최적화를 위해 이미지 개수를 최소화 합니다.

이미지 개수는 페이지 로딩 속도에 영향을 주므로, 이미지를 자를 때 개수를 줄여주는 방법을 고려합니다.실행내용한 개의 이미지로 투명 라운드 박스 제작

<style type="text/css">.mappop{background:url(bg_box.gif) no-repeat 0 0;}.mappop div{background:url(bg_box.gif) no-repeat 100% 100%;}</style><div class="mappop"><div> <h4>클릭미술학원 분당점</h4> </div></div>

28.[29.] <script>, <style>에 type 속성을 지정합니다. type 속성에 콘텐츠 유형을 지정하여 표준화 된 문서를 제작합니다.실행내용스크립트 <script type="text/javascript"></script> 스타일 <style type="text/css"></style>

29.[30.] 고유한 의미가 있는 태그를 사용합니다.실행내용연락처 정보 <address>Copyright © NHN Corp. All Right Reserved.</address> 콘텐츠 출처 명시 (저작정보, 저작자이름, 저작권대행) <blockquote>인용문구</blockquote> 키보드의 특정 키입력을 설명 <kbd>CTRL+O</kbd> 용어 정리스크린리더 (Screen reader) 컴퓨터 화면의 내용을 소리로 읽어주는 프로그램으로, 앞을 볼 수 없는 시각장애인에게 유용한 도구입니다.

페이지 | 16

http://html.nhndesign.com/wd1


페이지 | 17

05 it세미나 접근성 향상 실행리스트

Documents