0. 가이드
1. 한 테그안에 여러 기능을 하는 요소가 담겨 있는 경우
header 태그 내부에 leftmenu,gnb,rightmenu와 같이
여러 요소가 담겨있는경우, 빠르게 요소들의 역활을
파악 하기 위해서
요소들을 감싸는 tag를 선언하고 class이름은 담겨있는 요소들의 이름으로 선언한다.
<header>
<div class="leftmenu-logo-rightmenu">
<!-- menu-logo-flexbox.... 요소들 -->
</div>
<!-- leftmenu-logo-rightmenu -->
</header>2. section,alticle tag
화면상에서 출력되지 않더라도.
class와 hn태그를 사용해서 영역의 제목을 선언 해주고 화면에서는 숨김처리를 할것 .
3. div를 감싸는 a태그
예외적으로 <div> 내부에 많은 요소가 있고, 담겨있는 요소들이 같은 경로를 가르키는 a태그를 선언해야 한다면
코드낭비가 심해지기 때문에 <div>를 감싸는 <a>태그를 선언해서 div영역 전부를 단 하나의 a태그로 링크를 걸 수 있다 .
4.대체 텍스트
- img태그 내의 alt에 대체 텍스트를 입력해 스크린리더기가 읽을 수 있게 해야한다. 이미지에 글 콘텐츠가 포함 돼 있다면 똑같이 적어야 한다.
- 의미 없는 디자인용 이미지같은 경우는 alt를 빈칸으로 남겨둔다.
- QR코드와 같은 이미지는 어떤 QR코드인지 명시해야한다.
- 버튼도 기능을 명시해야 한다.
ir기법
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;}
/* 의미있는 이미지의 대체 텍스트 제공*/
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;}
/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 제공*/
.ir_su {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;}
/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공 */img를 배경 목적인 bg-image로 추가한 경우
- 해당 이미지에 글씨를 넣고 화면에서 글씨를 숨기는 방법을 이용한다. =(ir기법 사용)
- 그리고 배경 이미지는 alt를 리더기에 읽히지 않도록
공백으로 비워 놓을것.
5. Tab 키를 이용해 콘텐츠 선택 기능 추가
사용자의 키보드에 있는 Tab 키를 이용해 콘텐츠 를 자유롭게 이용할 수 있게 한다.
tabindex속성을 이용한다.
그러나 이를 남용하게 되면 탭키를 수 없이 눌러야 다음 메인 콘텐츠로 이동하기 때문에 오히려 불편함을 불러올 수 있다.
탭의 이동 순서도 신경써야 한다. 네비게이션 바에 해당 예시들이 많이 있다.
<p tabindex='0'>탭 키를 이용할 수 있게 함</p>
<p tabindex='-1'>탭 키를 이용할 수 없게 함</p>
<p tabindex='1'>탭 키의 순서를 지정</p>
<p tabindex='2'>탭 키의 순서를 지정</p>
<p tabindex='3'>탭 키의 순서를 지정</p>6. 페이지 언어 지정
<html lang="ko"> <!-- 전체 언어 -->
<p>좀 더 <span lang="en">fancy</span>한 삶을 살고 싶으신가요?</p> <!-- 특정 언어는 span의 속성을 이용한다. -->7. 명도대비
저시력자, 고령자 등도 인식할 수 있도록 콘텐츠와 배경 간의 명도 대비는 4.5:1 이상이어야 합니다.
