'웹 접근성 고려한 &ldquo;관련사이트 바로가기&rdquo; 구현 방법' 태그의 글 목록

제목에서는 “관련사이트 바로가기”라고 했지만 정확히 이를 뭐라고 부르고 있는지 모르겠습니다. “백문이불여일견” !! 바로 보시는게 낫겠습니다.

#1. 문제점

SELECT 양식에 대한 설명이 필요합니다 . (KWCAG 1.0 항목 3.3 온라인 서식 구성)
키보드만 이용할 때, 해당 컨트롤로 포커스가 이동하고 이동 키(↓↑)를 이용해 그 목록을 보려 하면 바로 첫 번째 항목의 사이트로 이동해 버립니다. (KWCAG 1.0 항목 2.4 키보드로만 운용 가능)

#1. 개선

SELECT 양식에 대한 LABEL 추가
onchange 이벤트 제거
[이동] 버튼 추가
[이동] 버튼 클릭 시 해당 사이트로 이동하도록 변경.

개선된 코드는 다음과 같습니다.

<!-- 코드 #2 -->
<p> 
<label for="relSites">관련사이트 바로가기<label> 
<select id="relSites"> 
<option value="">관련사이트목록</option> 
<option value="http://twitter.com/yangkun7">양군의 트위터</option> 
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option> 
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option> 
</select> 
<input type="button" value="이동" onclick="window.open(document.getElementById('relSites').value);"/> 
</p>

#2. 문제점

여전히 문제가 남아 있습니다.

자바스크립트가 지원되지 않는 환경에서는 위의 기능을 사용할 수 없습니다. (KWCAG 1.0 항목 4.1 신기술의 사용)

#2. 개선

SELECT 양식 값을 전달할 수 있도록 FORM 삽입
SELECT 양식에 name 설정
SELECT 양식 값을 전달할 수 있도록 일반 버튼을 submi 버튼으로 변경
전달받은 URL로 이동할 수 있는 서버측 로직 구성

개선된 코드

<!-- 코드 #3 -->
<p> 
<form action="redirect.php" method="post" target="_blank"> 
<label for="relSites">관련사이트 바로가기<label> 
<select id="relSites" name="url"> 
<option value="http://twitter.com/yangkun7">양군의 트위터</option> 
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option> 
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option> 
</select> 
<input type="submit" value="이동"/> 
</form> 
</p>

서버측 코드

<?php 
// redirect.php 
// 필요하면 카운팅 로직 추가 
header('Location: ' . $_POST['url']); 
?>

개선점

#3의 코드는 그대로 완벽한 것 같지만 개선의 여지가 남아 있습니다.

코드대로 실행하면 선택한 사이트가 새창으로 열리게 되는데 이에 대해 알리는 부분이 없습니다. (KWCAG 1.0 항목 2.6 반응시간의 조절기능)
자바스크립트가 사용 가능한 환경에서는 굳이 서버 로직을 거치지 않고 선택한 사이트로 이동하게 하고 싶을 수도 있습니다.

최종 개선 코드

<!-- 코드 #4 -->
<script type="text/javascript"> 
function gotoUrl(id) { 
window.open(document.getElementById(id).value); 
return false; 
} 
</script> 
<p> 
<form action="redirect.php" method="post" target="_blank" onsubmit="return gotoUrl('relSites');"> 
<label for="relSites">관련사이트 바로가기<label> 
<select id="relSites" name="url"> 
<option value="http://twitter.com/yangkun7">양군의 트위터</option> 
<option value="http://picasaweb.google.com/yangkun7">건이네 웹앨범</option> 
<option value="http://www.greenfarm.pe.kr/">푸른농장 (준혁,서영이네)</option> 
</select> 
<input type="image" src="btn_move.gif" alt="이동 (새창)"/> 
</form> 
</p>

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

개발자(開發者) a developer

'웹 접근성 고려한 “관련사이트 바로가기” 구현 방법'에 해당되는 글 1건

웹 접근성 고려한 “관련사이트 바로가기” 구현 방법

#1. 문제점

#1. 개선

#2. 문제점

#2. 개선

개선점

관련 지침

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바