이런겁니다. 콤보박스가 나오고 목록에서 항목을 선택하면 새창으로 해당 사이트가 열립니다. 코드는 아래와 같습니다.

<!-- 코드 #1 -->
<p>
관련 사이트 바로가기
<select onchange="if(this.value != '') window.open(this.value);">
<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>
</p>

#1. 문제점

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

#1. 개선

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

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

<!-- 코드 #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. 개선

1. SELECT 양식 값을 전달할 수 있도록 FORM 삽입
2. SELECT 양식에 name 설정
3. SELECT 양식 값을 전달할 수 있도록 일반 버튼을 submi 버튼으로 변경
4. 전달받은 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>

관련 지침

• (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.