728x90
반응형
alt과 title의 차이점
alt 속성이란?
이미지를 볼 수 없는 환경에서도 내용을 확인할 수 있게 합니다. 즉, 대체 텍스트라고 합니다.
title 속성이란?
해당 객제에 대한 제목이나 특성을 설명하기 위한 것(참고의 의미)
title 속성과 alt 속성의 의미는 전혀 다르므로 의미에 맞게 사용하셔야 합니다. 또한, title 속성을 alt 속성 대신 사용해선 안됩니다.
alt 속성
alt 속성을 사용할 수 있는 태그
<img />, <area />, <input />
alt 속성 사용시 유의사항
- 명쾌하고 짧은 대체 텍스트를 제공
- 파일명을 대체 텍스트로 제공 지양
- 이미지 맵에 대한 대체 텍스트 제공
- 의미없는 이미지에는 공백으로 대체
- 의미를 제대로 파악할 수 없는 대체 텍스트 지양
- 의미있는 이미지에 무의미한 대체 텍스트 제공 지양
- '~ 하십시오.', '~ 됩니다.' 등 친절한 설명을 자제하고 간단 명료하게
- '링크', '여기', '클릭', '바로가기' 등의 목적지를 구체적으로 알려주지 않는 단어 사용하지 말자
잘못된 예
<img src="bullet.gif" alt="블릿" />
<img src="naver.gif" alt="바로가기" />
<img src="next.gif" alt="버튼을 누르시면 다음페이지로 이동됩니다." />
<img src="photo.jpg" alt="사진 1" />
<img src="model.jpg" alt="model" />
<img src="logo.png" alt="로고" />
<ol>
<li><img src="text1.gif" alt="" /></li>
<li><img src="text2.gif" alt="" /></li>
<li><img src="text3.gif" alt="" /></li>
</ol>올바른 예
<!-- 의미없는 이미지일 경우 -->
<img src="bullet.gif" alt="" />
<!-- 대체 텍스트 사용 예제 -->
<img src="naver.gif" alt="네이버" />
<img src="next.gif" alt="다음페이지" />
<img src="photo.jpg" alt="튤립" />
<img src="model.jpg" alt="꽃무늬 원피스를 입고 있는 모델" />
<img src="logo.png" alt="블루웨이브" />
<input type="image" src="btn_writ.gif" alt="글쓰기" />
<!-- 이미지 맵에 대한 대체 텍스트 -->
<img src="languge.gif" alt="언어" usemap="#language" />
<map name="language">
<area sshape="rect" coords="10,5,66,19" href="/en/" alt="English">
<area sshape="rect" coords="10,17,66,32" href="/ko/" alt="Korean">
</map>
<!-- 다이어그램 또는 그래프 경우 -->
<img src="graph.gif" alt="2004년 반도체 수출액 2,538억원, 수입액 265억원, 2005년 반도체 수출액 3,538억원, 수입액 302억원" />title 속성
title 속성을 사용할 수 있는 태그
<html>, <head>, <title>, <base>, <basefont>, <meta>, <script>, <param>을 제외한 모든 태그에 사용할 수 있습니다.
a 태그
이동할 목적지에 대해서 좀 더 명확하게 이해할 수 있게 title를 제공해야 합니다.
<a href="http://www.naver.com" title="네이버(새창)" target="_blank"><img src="naver.gif" alt="네이버" /></a>abbr 태그
약자로 'WWW', 'URL', 'HTML', 'IT' 등 한 문자씩 발음하는 단어를 정의하는 태그
<abbr title="World Health Organization">WHO</abbr>acronym 태그
두문자어로 'NATO', 'NASA', 'SOHO' 등 한 단어로 발음하는 단어를 정의하는 태그
HTML5 에서는 삭제되는 태그, abbr의 의미와 혼동 되어 abbr로 통합해서 사용됩니다.
<acronym title="North Atlantic Treaty Organization">NATO</acronym>input 태그
input 종류 : button, checkbox, file, image, password, radio, text, submit 등
<input type="file" name="" value="" title="파일을 선택하세요" />
<input type="text" name="" value="" title="텍스트를 입력하세요." />
<input type="radio" name="" value="" />
<input type="image" name="" src="이미지 주소" alt="" />
<input type="button" name="" value="button" />
<input type="submit" name="" value="submit" />
<input type="checkbox" name="" value="" />
<input type="password" name="" value="" title="비밀번호 입력하세요." />iframe 태그(사용을 가능한 지양합니다.)
프레임 제목은 프레임의 내용을 인식할 수 있도록 짧고 간결하게 제목을 제공해야 합니다.
또한, 내용이 없는 빈 프레임의 경우에도 title="빈 프레임" or "내용 없는 프레임" 과 같이 title를 제공해야 합니다.
<iframe src="briefing.html" title="국정브리핑 정책속보" name="briefing"></iframe>위의 내용을 제외한 웹접근성 향상을 위한 방법
- 테이블의 내용을 이해할 수 있도록 summary 속성, caption 태그를 제공해야 한다.
- 테이블을 제공할 경우, 머리글<thead>, 바닥글<tfoot>, 본문<tbody>을 구분하여야 한다.
<table class="tbl_view" summary="1월부터 12월까지의 평균 강수량을 나타낸 표, 장마 기간이 있는 6~7월에 강수량이 가장 많고, 11월~2월 사이의 강수량이 가장 낮다.">
<caption>한국의 월별 강수량</caption><!-- 생략 -->- * 주의사항 : <thead>, <tfoot>, <tbody> 순으로 작업되어야 합니다.
- 서식을 제공할 경우 <label>을 제공해야 한다.
* <label> 태그의 for와 <input />의 id가 동일하여야 합니다.
* <label>이 <input>, <select> 등의 입력창과 제목을 연결시켜 문서 파악을 용이하게 합니다.
* checkbox와 radio 경우 <label>을 이용하여 텍스트를 클릭해도 선택되게 작업할 수 있으며, 사용자들은 클릭영역이 넓어져 사용이 편리해집니다. - <form>안에 여러 컨트롤(입력 받는 서식)이 있을 떄, <fieldset>으로 그룹화 하고 <legend>로 제목을 표기합니다.
<table class="bbs_list" summary="공지사항 리스트">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>제목</td>
<td>2012-05-15</td>
<td>111</td>
</tr>
</tbody>
</table>
<table>
<caption>3일 일기예보</caption>
<tbody>
<tr>
<th>오늘<br />5.15(화)</th>
<td><img src="p_02.gif" alt="구름 조금" /></td>
<td>구름 조금</td>
</tr>
<tr>
<th>예상기온/th>
<td colspan="2">최고 33도 / 최저 24도</td>
</tr>
</tobdy>
</table><dl>
<dt><label for="uid">아이디</label></dt>
<dd><input type="text" id="uid" title="아이디 입력" /></dd>
</dl>
<dl>
<dt><label for="upw">비밀번호</label></dt>
<dd><input type="password" id="upw" title="비밀번호 입력" /></dd>
</dl><fieldset>
<legend>로그인 </legend>
<dl>
<dt><label for="uid">아이디</label></dt>
<dd><input type="text" id="uid" title="아이디 입력" /></dd>
</dl>
<dl>
<dt><label for="upw">비밀번호</label></dt>
<dd><input type="password" id="upw" title="비밀번호 입력" /></dd>
</dl>
</fieldset>- 웹접근성을 향상하기 위해선 위 방법 말고도 많은 부분이 더 있는데요~
그 부분들은 http://biew.co.kr/17 여기에서 참고하세요~
마치며
많은 분들이 웹퍼블리싱 작업을 하시면서 헷갈려 하시는 부분을 위주로 정리를 해보았습니다.
저 또한 매번 작업을 할 때 마다 헷갈리는 부분이 많았는데요.~ 다른분들께서도 이 글을 보시고 조금이나마 도움이 되셨으면 좋겠습니다.
728x90
반응형
'JAVA HTML JAVASCRIPT > 소오스' 카테고리의 다른 글
| 자바 암호화와 복호화 (0) | 2021.04.23 |
|---|---|
| JAVA SHA-256 암호화 방법 (0) | 2021.04.23 |
| alt속성과 title 속성 비교 (0) | 2021.04.21 |
| HTML 이미지에 ALT 태그 속성값을 반드시 넣어줘야 하는 이유 (0) | 2021.04.21 |
| HashSet이란? (0) | 2021.04.17 |
