시멘틱하고 접근성을 해치지 않는 FAQ 목록 만들기.
보통 FAQ 목록은 내용을 동적으로 생성하지 않고 미리 준비된 콘텐트를 게시판 형식으로 출력하는 경우가 많습니다. 이에 접근성을 해치지 않고 FAQ 목록을 출력하는 예제를 준비해 보았습니다. 사용된 Javascript는 제목을 클릭했을 때 관련 내용을 보이거나 숨겨주는 기능을 지원하고 있지만 Javascript가 지원되지 않는 환경에서도 문서의 구조와 기능은 유지됩니다. 앵커에 대한 href 속성의 값으로 유효한 값 ‘#1, #2 …’ 를 지정하는 것이 핵심입니다.
문서의 <head> 영역에 포함되어야 할 코드.
<style type="text/css">
#faqList dd { display:none; }
</style>
<script type="text/javascript">
//content toggle
function showBx(id)
{
var bx = document.getElementById(id);
if (bx.style.display == 'block')
{
bx.style.display='none';
}
else
{
bx.style.display='block';
}
}
</script>
문서의 FAQ 목록에 포함되어야 할 코드.
<dl id="faqList">
<dt><a href="#a1" onclick="showBx('a1'); return false">첫 번째 질문입니다.</a></dt>
<dd id="a1">첫 번째 답변입니다.</dd>
<dt><a href="#a2" onclick="showBx('a2'); return false">두 번째 질문입니다.</a></dt>
<dd id="a2">두 번째 답변입니다.</dd>
</dl>
안녕하세요 찬명님~
찬명님 블로그에는 자주 방문하는데 처음으로 댓글을 쓰게 되네요 ^^;
제 개인적인 생각에는 위의 코드로 실행할때 자바스크립트가 구동이 안되는 상황에서는 초기 display:none 된 dd의 컨텐츠를 볼 수 없기 때문에 dd의 초기 display 상태 또한 자바스크립트로 제어하는 것이 좋지 않을까 합니다
날씨가 춥네요..
감기조심하세요~~
아.. 네 맞는말씀이세요^^ dd 블럭을 숨기는 명령도 javascript로 제어해야 맞네요. 조만간 코드를 개선해 올려야겠습니다. 감사합니다. (__)
안녕하세요! 많이 바쁘셨는지 오랜만에 새로운 글을 보게 되었네요. 항상 좋은 글 감사드립니다. ^^
hoi♡님 말씀대로 display 속성을 자바스크립트에서 제어할 경우 자바스크립트의 실행 타이밍에 대한 언급도 있었으면 좋겠습니다. 예를 들어 HTML 문서의 onload 이벤트를 통해 display 속성을 제어할 경우 일반 사용자들이 해당 영역이 나타났다가 사라지면서 페이지가 출렁거리는 걸 보게 될 위험성이 있다는 내용이나요.
아.. 또 그말도 맞네요. 스크립트로 display:none 시켰을땐 스크립트가 늦게 로드되면 한번 출렁~ 하겠군요. 하지만 접근성 이슈를 해결하는데 더 우선순위를 두다보면 어떨 수 없는 부분이고.. 그래도 언급은 해드려야겠네요 ^^
시멘틱하고 접근성을 해치지 않는 FAQ 목록 만들기….
보통 FAQ 목록은 내용을 동적으로 생성하지 않고 미리 준비된 콘텐트를 게시판 형식으로 출력하는 경우가 많습니다. 이에 접근성을 해치지 않고 FAQ 목록을 출력하는 예제를 준비해 보았습니…
제로보드 XE로 사이트 제작중인 컴맹입니다.
우연히 사이트 구경을 하게 되어 좋은 팁을 배우고 갑니다.
많이 늦었지만 새해 복 많이 받으십시요.