나라디자인

WCAG 3.5

문서의 구조를 나타내기 위해 제목 요소(header elements)를 쓰되, 사양에 맞게 사용한다. [중요도2]

제목태그를 이용한 마크업은 스크린 리더의 음성변화(고저)에 영향을 주거나 또는 그것이 읽혀질 때 ‘제목’ 이라는 설명을 달아 줄 수 있기 때문에 웹 문서의 접근성이 높아 집니다. 또한 <title> 요소와 함께 검색엔진으로부터 중요한 키워드로 인식되어 피 검색될 활률을 높여 줍니다. 그것이 설사 이미지라 하더라도 제목일 때에는 header 요소로 마크업 하는 것이 표준 마크업 입니다. 문서의 내용과는 관계 없이 서체의 크기 또는 굵기를 변경 할 목적으로 header 요소를 사용하는 것과 제목의 순차적인 단계를 건너 뛰는(h1 다음에 바로 h3 를 사용하는 일) 것은 잘못된 사용예 입니다.

드림위버는 <h1>~<h6> 요소에 이르기 까지 각각의 단축키가 기본값으로 설정되어 있어 제목을 마크업 하는 것이 매우 쉽습니다. 아래 목록은 드림위버에 기본 으로 설정되어 있는 제목태그에 대한 단축키 입니다.

1. <h1> = Ctrl+1
2. <h2> = Ctrl+2
3. <h3> = Ctrl+3
4. <h4> = Ctrl+4
5. <h5> = Ctrl+5
6. <h6> = Ctrl+6

이렇게 쉽습니다. 이제는 제목태그를 사용 안할래야 안할 수가 없겠지요. 제목 스타일에 bullet 이 들어가 있는 경우 background 속성을 이용하여 각각의 제목 아이콘을 각각의 제목 단계에 걸맞는 배경이미지로 처리할 수 있습니다. 또는 border-bottom 속성을 이용하여 제목의 아래부분을 line 으로 처리하는 방법도 있습니다. 이와 관련된 CSS 예제 코드는 다음과 같습니다.

h3 {padding:8px 0 5px 35px; background:#EEE url(h3_ bullet.gif) no-repeat 5px center; border-bottom:1px solid #CCC }

이와같이 CSS 속성이 미리 정의되어 있는 제목태그를 단축키를 이용하여 마크업 하게 되면 동료들로부터 부러움과 존경의 대상이 될 것입니다. 단축키 한번에 bullet 아이콘과 line 스타일이 제목 단계별로 다르게 적용되어 나타나기 때문에 작업속도는 매우 빨라지고 게다가 코드까지 시멘틱 해지는 1석 2조의 효과가 있습니다.

단, 제목을 모두 이미지로 처리해달라는 클라이언트를 만나면 좀 곤란해 지겠지요. <h1> 또는 경우에 따라 <h2> 요소까지는 이미지로 처리하는 것은 불가피 할 수도 있겠지만 가능하다면, 그리고 디자인 퀄러티 담당자와 합의만 된다면 제목요소를 텍스트로 시멘틱하게 처리할때 드림위버 작업에서도 매우 효과적 입니다. 시멘틱 마크업이 이렇게 업무효율도 높여준다면 서둘러 응용해야 하지 않을까요?