접근성 규칙
Semantic Markup
구획 컨텐츠와 제목 컨텐츠 등을 활용하여 문서 개요 체계에 알맞는 HTML Markup을 사용합니다.
구획 컨텐츠인 Section 태그의 경우 각각의 섹션을 구분할 수 있는 Heading 태그가 필요합니다.
<h1>유저 정보</h1>
<section>
<h2>기본 정보</h2>
<section>
<h3>연락처 정보</h3>
</section>
<section>
<h3>주소 정보</h3>
</section>
</section>
<section>
<h2>결제 정보</h2>
<section>
<h3>계좌 정보</h3>
</section>
<section>
<h3>현금영수증 정보</h3>
</section>
</section>
이미지
의미있는 대체 텍스트를 제공합니다.
<!-- 좋음 - 대체 텍스트 제공 -->
<img src='bbodek.png' alt='뽀득' />
<!-- 좋음 - 대체 텍스트 제공 -->
<a href='https://www.bbodek.com'>
<img src='qr_code.png' alt='https://www.bbodek.com 바로 가기 QR코드' />
</a>
<!-- 좋음 - 대체 텍스트 제공 -->
<a href='/'>
<img src='bbodek.png' alt='' />
<span className='sr-only'>뽀득</span>
</a>
<!-- 나쁨 - 대체 텍스트 중복 제공 -->
<a href='/'>
<img src='bbodek.png' alt='뽀득' />
<span className='sr-only'>뽀득</span>
</a>
만약, 의미 없는 이미지일 경우에는 alt를 빈 값으로 제공합니다.
<img src='nothing.png' alt='' />
자동 재생
비디오, 오디오 등 자동 재생을 하지 않습니다.
비디오, 오디오 등 자동 재생이 될 시 스크린리더 음성과 겹치게 되면서 페이지의 내용을 인식하기 어렵습니다.
불가피하게 제공할 경우 하기의 방안을 사용합니다.
- 3초 내에 정지
- ESC 키 선택 시 정지
- 소스 상 가장 먼저 제공하여 정지 기능 실행 가능하도록 구현
HTML Markup 문법
HTML Markup 문법을 준수하여 해석 오류를 방지합니다.
self-closing이 가능한 단일 태그를 제외한 모든 태그는 시작과 종료를 명확히 합니다.
<!-- 나쁨 - 종료 태그 누락 -->
<div>
<span>...</span>
<div>
<span>...</span>
</div>
<!-- 좋음 -->
<div>
<span>...</span>
</div>
<div>
<span>...</span>
</div>
태그 간 포함 관계가 어긋나지 않도록 합니다.
<!-- 나쁨 -->
<a href='...'><span>이동</a></span>
<!-- 좋음 -->
<a href='...'><span>이동</span></a>
중복된 속성을 사용하지 않습니다.
<!-- 나쁨 -->
<div id='id' className='px-1' class='px-1'>...</div>
<!-- 좋음 -->
<div id='id' className='px-1'>...</div>
동일한 id 값을 사용하지 않습니다.
<!-- 나쁨 -->
<div id='id'>...</div>
<div id='id'>...</div>
<!-- 좋음 -->
<div id='id-1'>...</div>
<div id='id-2'>...</div>
레이블
입력에 대한 용도 또는 역할을 명확히 합니다.
<!-- 나쁨 - label 미제공 -->
<input type='text' />
<!-- 좋음 -->
<label for='name'>이름</label>
<input type='text' id='name' />
만약, 시각적으로 label을 사용할 수 없는 상황이라면 title을 제공합니다.
<input type='text' title='이름' />