alt로 대체 텍스트 제공
텍스트가 있는 이미지를 이미지 요소로 마크업할 때 대체 텍스트는 이미지 요소의 alternative 속성인 'alt'에 적용해주시면 됩니다.
<img src="160314.png" alt="주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대">비장애인들은 이미지를 보면 시각적으로 내용 인식이 가능하지만 시각적으로 인식이 불가능한 사용자들은 청각적으로 내용을 인식할 수 있도록 보는 것과 듣는 것이 동등하게 대체 텍스트를 제공해야 합니다.
스크린 리더로 들으면 alt 값을 읽어줍니다. img 요소뿐만 아니라 추가적으로 input의 type이 image이거나 button인 경우, 또는 이미지맵의 area에도 대체 텍스트가 존재한다면 alt로 제공해 주시면 됩니다.
마크업으로 대체 텍스트 제공
대체 텍스트가 너무 긴 경우에는 이미지에는 대체 텍스트를 빈 값으로 제공하고 대체 텍스트를 마크업으로 제공하는 방법도 있습니다.
<img src="160314.png" alt="">
<p class="blind">
주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외
2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대
</p> 예를 들어 이미지 내부 콘텐츠가 리스트로 되어 있어서 ul, li로 마크업하면 스크린리더에서 목록이라고 알아서 읽어주며 기본적으로 스크린리더는 해당 요소에 따라 내용을 읽어주기 때문에 구조적 마크업이 가능한 콘텐츠는 마크업으로 대체 텍스트를 제공해주는 것이 좋습니다.
여기서 주의할 점은 해당 마크업을 보이지 않게 처리할 때 "display:none"이나 "visibility:hidden"을 사용하면 스크린리더에서 읽어주지 않기 때문에 다른 방법으로 보이지 않게 처리해야 합니다.
데이터 차트나 복잡한 콘텐츠
데이터 차트나 복잡한 콘텐츠도 사용자가 해당 콘텐츠의 의미를 충분히 파악할 수 있도록 대체 텍스트를 제공해야 합니다. 현재는 콘텐츠가 데이터 차트 이미지이기 때문에 테이블 마크업으로 다음과 같이 대체 텍스트를 재공해주고 있습니다.
<img src="graph.png" alt="" />
<table class="blind">
<caption>...</caption>
<thead>
<tr>
<th scope="col">년도</th>
<th scope="col">학과</th>
<th scope="col">지원 수</th>
</tr>
</thead>
<tbody>
<tr>
<td>2003</td>
<td>언어학</td>
<td>10200명</td>
</tr>
...
</tbody>
</table>의미 있는 이미지
의미 있는 이미지의 경우에도 대체 텍스트를 시각적으로 보는 것과 동등하게 제공해야 합니다.
<img src="btn_next.png" alt="다음 콘텐츠 보기">
배경 이미지
의미 있는 이미지가 이미지 요소가 아닌 배경으로 처리된 경우에도 다음와 같이 대체 텍스트를 제공해야 합니다.
<a href="#" class="link_next">다음 콘텐츠 보기</a>
.link_next{
background-image:url('./img/icon_next.png');
}의미 없는 이미지
의미 없는 이미지는 alt를 제공하지 않아도 될까요?
우선 기본적으로 이미지 요소에는 alt속성을 필수로 제공해야 합니다. alt속성을 아예 제공하지 않으면 스크린리더는 src에 있는 파일명을 읽어줍니다.
또한 alt 속성을 제공하지만 alt 값에 띄어쓰기가 하나라도 적용되어 있는 경우도 마찬가지로 파일명을 읽어줍니다.
따라서 단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우는 대체 텍스트로 공백 문자, 즉 다음와 같이 파일명을 읽는 일이 없이 아무것도 읽어주지 않도록 alt를 빈 값으로 제공해야 합니다.
<img src="123456.jpg" alt="">이모티콘 이미지
이모티콘의 의미가 다 다른 만큼 ‘미안해하는 브라운’처럼 시각적으로 인식하는 것과 동일하게 대체 텍스트를 제공해야 합니다.
<img src="brown_img_5.png" alt="미안해하는 브라운"> QR코드 이미지
QR코드의 경우 비장애인들은 이미지를 찍어서 링크를 연결할 수 있지만 시각적으로 인식할 수 없는 사용자들은 해당 링크 주소를 알 수 있도록 대체 텍스트를 제공해야 합니다.
<a href="http://www.naver.com">
<img src="qr_code.png" alt="http://www.naver.com 바로 가기 QR코드">
</a> 썸네일 이미지
썸네일 이미지와 텍스트를 각각 링크로 구현하는 경우 이미지의 대체 텍스트와 링크 텍스트가 중복이 되기 때문에 스크린리더에서 동일한 내용을 2번 읽어줍니다.
따라서 다음과 같이 이미지와 텍스트를 하나의 링크로 묶어주고 대체 텍스트가 이미 존재하기 때문에 이미지에는 alt를 빈 값으로 제공해 주는 것이 좋습니다.
<a href="…">
<img src="thumb01.jpg" alt="">
<span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a>
캡차 이미지
캡차란 사용자가 실제 사람인지 컴퓨터 프로그램인지를 구별하기 위해 사용되는 방법입니다.
캡차 이미지에 대체 텍스트로 이미지에 있는 텍스트를 제공하면 스크린리더를 사용하는 분들에게는 정답을 알려주는 것이 되므로 캡차 이미지에는 대체 텍스트로 '캡차' 또는 '보안 문자'라고 제공하고 따로 음성으로 들을 수 있도록 청각적 캡차를 제공해야 합니다.
<img src="text.jpg" alt="보안 문자">사용자가 업로드하는 이미지
사용자가 업로드하는 이미지의 경우 사용자가 직접 대체 텍스트를 작성할 수 있도록 안내와 함께 툴을 제공해야 합니다. 사용자가 입력한 내용이 대체 텍스트로 제공되도록 구현하면 됩니다.
초점 이동
초점 이동 순서 : 레이어 팝업 노출시키는 컨트롤 > 레이어 팝업 내부 > 레이어 팝업 닫기 > 레이어 팝업 노출시키는 컨트롤
오류 사례에서는 보통 초점이 레이어 내부로 가지 않고 노출만 시킨 상태로 다음 컨트롤로 이동하기 때문에 초점이 레이어 뒤로 가서 가려지는 경우가 있습니다.
초점이 보이지 않으면 키보드 사용자는 페이지를 잘 이용할 수 없으므로 논리적으로 초점을 이동시켜야 합니다.
반복 영역 건너뛰기 제공 방법
- 마크업 상 최상단에 위치
- 건너뛰기 링크가 페이지 내에 존재
- 키보드 접근 시 화면에 노출
- "하단 메뉴로 바로 가기"와 같은 위치 정보 제공은 부적절
<body>
<div id="skip_nav">
<a href="#content">본문 바로 가기</a>
<a href="#menu">주 메뉴 바로 가기</a>
…
<div id="content">
…
<div id="menu">
…
</body>정리하자면 반복 영역 건너뛰기는 마크업상 최 상단에 위치해야 하고 건너뛰기 링크가 페이지 내에 존재해야 합니다.
즉, 본문 바로 가기를 선택하면 이 content를 id로 가진 영역이 페이지 내에 있어야 한다는 것입니다.
키보드 접근이 가능하고 접근 시 화면에 보이도록 구현해야 하며, 키보드 접근이 불가능하면 8번 키보드 접근 보장에도 영향을 미칩니다.
반복 영역 건너뛰기 링크에 "하단 메뉴로 바로 가기"와 같이 위치 정보를 제공하면 하단이 어디인지 인식하기 힘들기 때문에 부적절합니다. 이는 4번 명확한 지시 사항 제공에도 영향을 미칩니다.
페이지 제목 제공
웹 페이지의 제목은 유일하고 서로 다르게 제공해야 합니다.
그렇게 제공하면 여러 페이지가 열려 있는 경우 비장애인들도 제목만 보고 구분하여 빨리 선택할 수 있습니다.
스크린리더 사용자도 제목이 전부 똑같이 제공되어 있거나 내용과 다르게 제공되어 있으면 인식하기 힘들기 때문에 페이지 제목을 적절하게 제공해야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>로그인</title>
...페이지 제목은 해당 내용을 이해할 수 있도록 제일 하위분류로 적절하게 제공해야 합니다.
뉴스 상세 페이지 제목도 마찬가지로 해당 뉴스에 대한 타이틀을 제목으로 제공해야 하며 게시판의 경우에도 글 읽기, 글 보기, 목록 등 각각의 게시판 용도에 맞게 페이지 제목을 제공해야 합니다.
각 페이지의 핵심 내용을 제목으로 제공해주시면 됩니다.
프레임 제목 제공
프레임이나 아이프레임에도 각 프레임을 설명하는 간단 명료한 제목을 제공해야 합니다.
광고를 아이프레임으로 제공한 경우 다음과 같이 아이프레임의 title을 "광고"라고 제공하면 됩니다.
<iframe src="https://nv.veta.naver.com/fxshow?su=SU10079&nrefreshx=0" title="광고"></iframe>내용이 없는 빈 프레임의 경우에도 title을 다음과 같이 "빈 프레임" 또는 "내용 없음" 등으로 제공해야 합니다.
<iframe data-veta-preview="main_frame" title="빈 프레임" width="0" height="0" >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="initAd()" marginwidth="0" marginheight="0">
</body>
</html>
</iframe>웹 페이지를 구성하는 모든 프레임에 제목을 제공하면 시각 장애인, 지적 장애인, 중증 지체 장애인 등의 사용자가 프레임 제목을 통해 프레임 간을 매우 편리하게 이동할 수 있습니다.
콘텐츠 제목 제공
콘텐츠 블록에도 제목을 제공해야 합니다.
<h3 class="an_tit">
<a href="http://newsstand.naver.com" class="an_ta" target="_blank">뉴스스탠드</a>
</h3>뉴스스탠드 콘텐츠는 헤딩 태그로 콘텐츠의 제목을 "뉴스스탠드"라고 제공하는 것이 적절하며,
여기에서 주의할 사항은 뉴스스탠드랑 동일한 depth에 있는 콘텐츠는 하위나 상위 콘텐츠가 아니기 때문에 동일한 헤딩 태그로 일관성 있게 제목을 제공해야 합니다.
이때 제목을 숨김 처리할 경우 1번 항목에서 언급했듯이 "display:none"나 "visibility:hidden" 속성은 스크린리더에서 읽어주지 않기 때문에 다른 방법으로 보이지 않게 처리해야 합니다.
빈 링크
링크 텍스트를 제공하지 않아 이렇게 빈 링크가 존재하는 경우 스크린리더 사용자는 무슨 링크인지 알 수 없으며 링크가 크기를 갖지 않는 이상 키보드 사용자는 어디에 초점이 갔는지 알 수 없습니다.
따라서 다음과 같이 의미 없는 빈 링크는 제거해야 합니다.
<a href="…" title=""></a> 독립적 이미지 링크
이미지를 독립적 링크로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에 이미지의 alt가 잘못 제공되었거나 빈 값으로 제공된 경우 오류입니다.
따라서 다음와 같이 적절한 링크 텍스트를 제공해야 합니다.
<a href="#">
<img src="btn_next.png" alt="다음 콘텐츠 보기">
</a> 독립적 배경 이미지 링크
1번 적절한 대체 텍스트 제공에서 언급했던 경우인데요, 링크에 의미 있는 배경 이미지를 적용한 경우에도 이미지 대체 텍스트이자 링크 텍스트를 적절하게 제공해야 합니다.
<a href="#" class="link_next">다음 콘텐츠 보기</a>
.link_next{
background-image: url('./img/icon_next.png');
}썸네일 링크
썸네일 링크 또한 1번 항목에서 언급했던 부분인데요, 썸네일 이미지와 텍스트를 각각 링크로 구현하는 경우 링크 텍스트를 각각 제공해야 하기 때문에 내용이 중복됩니다.
따라서 다음와 같이 이미지와 텍스트를 하나의 링크로 묶어주고 중복되지 않도록 이미지에는 alt를 빈 값으로 제공하고 링크 텍스트를 제공해 주는 것이 좋습니다.
<a href="…">
<img src="thumb01.jpg" alt="">
<span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a> 명확한 링크 제공
다음과 같이 방향 지시로 링크 목적을 안내한 경우 스크린 리더 사용자는 키보드로 링크에 접근하게 되면 "여기 링크"라고 읽어주게 되어 이 링크를 클릭하면 어떻게 되는지 알 수가 없습니다.
이는 오류로 진단되고 4번 명확한 지시 사항 제공에도 영향을 미칩니다.
<p>
더 자세한 사항을 보려면
<a href="#">여기</a>를 클릭하세요.
</p>URL만 링크로 제공하는 것보다는 해당 주소의 목적을 함께 제공하는 것이 좋으며,
"더 보기"나 "자세히 보기" 같은 링크의 경우에도 문맥상 알 수 있으나 어떤 콘텐츠의 더 보기인지 명확히 링크 텍스트를 제공해주는 것이 더 좋기 때문에 예를 들면 "공지사항 더 보기"라고 공지사항 텍스트를 숨김 처리로 제공해주는 것이 좋습니다.
즉, 링크의 용도나 목적을 알 수 있도록 적절한 링크 텍스트를 제공해야 합니다.
문서 타입별 기본 언어 표시
HTML 4.01/HTML5 표준
<html lang="ko">XHTML 1.0 표준
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">XHTML 1.1 표준
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">새 창 제공 방법
<a href="…">이용약관<span class="blind">새 창</span></a>또는
<a href="…" title="새 창">이용약관</a>또는
<a href="…" target="_blank">이용약관</a>Window.open을 사용하여 새 창을 띄우는 경우가 많은데요, 이 경우 새 창이 뜬다는 것을 인지할 수 없기 때문에 이를 인지할 수 있도록 이와 같은 방법으로 제공해주셔야 합니다.
다만, title과 target으로 제공하는 방법은 센스리더 외 다른 스크린리더에서는 새 창이라고 읽어주지 않으므로 blind로 새 창이라는 텍스트를 넣어주는 방법이 가장 확실한 해결방안입니다.
컨트롤 선택 시 기능 실행
사용자가 콤보 상자, 라디오 버튼, 체크 상자 등의 컨트롤을 선택했을 때 기능이 실행되거나 서식 제출이 일어나지 않아야 합니다.
즉, 예를 들어 팝업 내부의 "오늘 하루 이 창을 열지 않음" 체크박스를 선택하자마자 팝업이 닫히는 경우 오류이며, 이를 준수를 위해서는 닫기 버튼을 따로 제공하여 체크 후 닫기 버튼 클릭 시 팝업이 닫히도록 구현해야 합니다.
select에 onchange 이벤트 적용
select에 onchange 이벤트가 적용되어 option을 선택하자마자 페이지가 이동된 경우 오류입니다. 이는 키보드로 접근하자마자 페이지가 변경되기 때문에 이후 콘텐츠에 키보드 접근이 불가능하여 8번 키보드 사용 보장에도 영향을 미칩니다.
onFocus나 onKeypress등의 이벤트에 의해, 포커스를 옮기는 동작만으로, 초점을 받은 것만으로, 새 창이나 레이어가 뜨거나 페이지가 바뀌는 경우 모두 사용자가 원하지 않은 기능이 실행되는 것이므로 오류입니다.
즉, 사용자가 의도하지 않은 기능이 실행되지 않도록 구현해야 합니다.
탭 제목-내용 콘텐츠
탭 메뉴가 나열되어 있고 탭에 대한 내용이 있는 경우 시각적으로는 클릭하면 해당 내용이 보이기 때문에 쉽게 인식할 수 있습니다.
스크린리더 사용자는 메뉴와 내용을 따로 마크업하는 경우 메뉴를 다 읽어주고 나서야 내용을 읽어주기 때문에 어떤 메뉴에 대한 내용인지 인식할 수 없습니다.
따라서 메뉴 내용 메뉴 내용 순으로 마크업하거나 메뉴끼리 내용끼리 마크업하되 내용에 해당 메뉴 제목을 제공해 주어야 합니다.
1) 탭 1제목 > 탭 1내용 > 탭 2제목 > 탭 2내용
<a href="…">상품</a>
<div>상품 내용</div>
<a href="…">쇼핑몰</a>
<div>쇼핑몰 내용</div>
…2) 해당 탭 콘텐츠에 제목 제공
<ul>
<li><a href="…">상품</a></li>
…
</ul>
<div>
<h2 class="blind">상품</h2>
상품 내용
</div>제목-내용-더 보기 콘텐츠
제목, 내용, 더 보기가 있는 콘텐츠를 많이 보셨을 텐데요,
보이는 순서대로 공지사항, 더 보기 버튼, 내용 순으로 마크업 된 경우 오류입니다.
논리적인 순서는 제목 다음, 내용 다음, 더 보기 버튼 순이므로 마크업도 이 순서대로 해주셔야 합니다.
<div class="noti_section">
<h3><span class="blind">공지사항</span></h3>
<ul class="lst_noti">
<li>
<a href="…">[복구완료] 10/19 (금), '뮤직'...</a>
</li>
<li>
<a href="…">[복구완료] 10/17 (수), '지도'...</a>
</li>
</ul>
<a href="…"><span class="blind">공지사항</span>더보기</a>
</div>표의 구성
제목 셀과 내용 셀 구분
제목과 요약 정보 제공
제목 셀은 th로 내용 셀은 td로 마크업하면 됩니다.
또한 제목 셀이 가로, 세로로 있는 경우 scope로 행 제목인지 열 제목인지 구분 가능하도록 제공해야 합니다.
XHTML, HTML4
caption으로 제목을 제공, table의 summary 속성으로 요약 정보를 제공
<table summary="부서별 직원 수, 합계 정보">
<caption>직원 관리 현황 표</caption>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">부서</th>
<th scope="col">직원 수</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">합계</th>
<td></td>
<td>15명</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>총무부</td>
<td>5명</td>
</tr>
<tr>
<td>2</td>
<td>인사부</td>
<td>4명</td>
</tr>
<tr>
<td>3</td>
<td>기획부</td>
<td>6명</td>
</tr>
</tbody>
</table>HTML5
HTML5부터는 summary 속성이 없어졌으므로 caption에 제목과 요약 정보를 모두 제공
- caption 내부에 있는 태그는 시각적으로 제목과 요약 정보를 구분하기 위한 태그로 필수는 아닙니다.
<table>
<caption>
<strong>직원 관리 현황 표</strong>
<span>부서별 직원 수, 합계 정보</span>
</caption>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">부서</th>
<th scope"col">직원 수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>총무부</td>
<td>5명</td>
</tr>
…
</table> 복잡한 표
id와 headers 속성을 이용하여 제목 셀과 내용 셀을 보다 정확하게 연결
<thead>
<tr>
<th rowspan="2" scope="col" id="date">기준일</th>
<th colspan="2" scope="col" id="gsale">경기도 매매가</th>
</tr>
<tr>
<th scope="col" id="price">면적단가</th>
<th scope="col" id="change">변동액</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="d20181020">2018.10.20</th>
<td headers="date d20181020 gsale price">902</td>
<td headers="date d20181020 gsale change">유지 0</td>
</tr>
<tr>
<th scope="row" id="d20181021">2018.10.21</th>
<td headers="date d20181021 gsale price">904</td>
<td headers="date d20181021 gsale change">상승 2</td>
</tr>
</tbody> 제목 셀마다 각각 다른 id 값을 부여하고, 내용 셀과 관련이 있는 제목 셀의 id 값을 headers에 나열해주시면 됩니다.
스크린리더에서는 headers에 나열된 id 값 순서대로 제목 셀을 읽어줍니다.
즉, 이 "902"를 그냥 "902"라고 읽어주는 것이 아니라, "기준일 2018년 10월 20일 경기도 매매가 면적단가 902"라고 읽어주게 됩니다. 제목들을 연결해서 읽어주는 것입니다.
레이아웃 테이블
데이터 테이블은 테이블 태그로 마크업하는 것이 맞으나, 데이터 테이블이 아닌 레이아웃 테이블은 테이블로 마크업하지 않고 구조적으로 마크업하는 것이 좋습니다. 만약 테이블로 마크업할 경우 데이터 테이블로 착각하여 혼란을 줄 수 있기 때문에 caption, summary, th를 제공하지 않아야 합니다.
레이블이 시각적으로 노출되어 있는 경우
1) 레이블과 입력 서식이 1:1 매칭인 경우
: 레이블을 제공하고 label for 값과 input의 id 값을 동일하게 제공
<label for="user_id">아이디</label>
<input type="text" id="user_id" />
<label for="user_pw">비밀번호</label>
<input type="text" id="user_pw" />이렇게 제공하게 되면 입력 서식 선택 시 초점이 가는 것은 물론이고 레이블을 선택해도 입력 서식에 초점이 가게 됩니다.
2) 레이블과 선택 서식이 1:1 매칭인 경우
<label for="user_gender">성별</label>
<select id="user_gender">
<option value selected>성별</option>
<option value="0">남자</option>
<option value="1">여자</option>
</select>3) 레이블과 라디오 버튼, 체크 박스가 1:1 매칭인 경우
<input type="radio" id="gender_male" />
<label for="gender_male">남자</label>
<input type="radio" id="gender_female" />
<label for="gender_female">여자</label>
<input type="checkbox" id="agree" />
<label for="agree">이용약관에 동의합니다.</label>라디오 버튼과 체크 박스는 컨트롤 크기가 매우 작은데요,
이렇게 레이블을 매칭 시켜주면 레이블만 선택하더라도 컨트롤이 선택되기 때문에 편리합니다.
4) 레이블과 입력 서식이 1:다 매칭인 경우
: 각 입력 서식에 대해 title을 제공
<input type="text" title="생년월일 중 년 4자리 입력" />
<input type="text" title="생년월일 중 월 입력" />
<input type="text" title="생년월일 중 일 입력" />레이블이 시각적으로 노출되지 않은 경우
: 각 입력 서식에 대해 title을 제공
<input type="text" title="아이디" />
<input type="text" title="비밀번호" />스크린리더는 레이블과 타이틀을 둘 다 읽어주지만 둘 다 제공한 경우 스크린리더에 따라 레이블을 읽어주기도 하고 타이틀을 읽어주기도 합니다.
따라서 중복 제공은 피하고 클릭할 수 있는 범위가 늘어나기 때문에 1:1매칭인 경우는 우선적으로 레이블을 제공하고 이외의 경우에는 타이틀로 설명을 제공해주시면 됩니다.
요소의 열고 닫음
오류 사례)
<ol>
<li>첫 번째 목록</li>
<li>두 번째 목록</li>
<li>세 번째 목록</li>
<ul>
<li>첫 번째 목록</li>
<li>두 번째 목록</li>
<li>세 번째 목록</li>
</ul>요소의 열고 닫음이 일치해야 합니다.
현재 예시에서는 ol 태그가 열려만 있고 닫혀 있지는 않아 오류입니다.
마크업 언어로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고는 시작 요소와 끝나는 요소가 정의되어야 합니다.
img 요소와 같이 단일 태그가 아닌 열고 닫힘이 존재하는 태그의 경우 열고 닫음이 일치해야 합니다.
준수 사례)
<ol>
<li>첫 번째 목록</li>
<li>두 번째 목록</li>
<li>세 번째 목록</li>
</ol>
<ul>
<li>첫 번째 목록</li>
<li>두 번째 목록</li>
<li>세 번째 목록</li>
</ul>요소의 중첩
오류 사례)
<a href="…"><span>바로가기</a></span>요소가 중첩된 경우 오류인데요,
이와 같이 a 태그가 열리고 span 태그가 열렸으면 span 태그를 먼저 닫고 a 태그를 닫아야 합니다.
즉, 시작 요소와 끝나는 요소의 나열 순서는 포함 관계가 어긋나지 않아야 합니다.
준수 사례)
<a href="…"><span>바로가기</span></a>중복된 속성 사용
오류 사례)
<img src="apple.jpg" alt="" class="img_box" class="img_01">이와 같이 img 요소에 class 속성이 중복된 경우 오류이며, 하나의 요소 안에서 속성을 중복하여 선언하지 않아야 합니다.
준수 사례)
<img src="apple.jpg" alt="" class="img_box img_01" >id 속성 값 중복
오류 사례)
<div id="main_menu" class="lnb">
…
</div>
<ul id="main_menu" class="menu">
<li>로그인</li>
<li>회원가입</li>
</ul>하나의 마크업 문서에 같은 id 값을 중복하여 선언하면 오류입니다. 페이지 내 id 값이 중복 선언되지 않도록 제공해야 합니다. 레이블과 매칭된 서식의 id가 중복된 경우는 21번 레이블 제공에도 영향을 미칩니다.
준수 사례)
<div id="main_menu_left" class="lnb">
…
</div>
<ul id="main_menu" class="menu">
<li>로그인</li>
<li>회원가입</li>
</ul>