마크업 정리

• 버튼은 button태그. anchor태그는 페이지 이동.
• input에 label을 매칭 못할 때는 title 사용.
• a링크 텍스트에 aria-label="" a href="javascript:void(0)"
• 대체텍스트는 aria-label 적용.
• aria-label적용이 아닐 시 sr-only 클래스 적용.

.sr-only {
	position:absolute;
	overflow:hidden;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0px;
	clip:rect(0,0,0,0);
}

• 마크업은 탭 포커스 위치로 만든다.(팝업의 닫기버튼은 마지막에 적용되야 함)

부트스트랩은 마크업 웹접근성을 참고하기 좋다.

Q. sr-only가 있는데 왜 font-size:0px을 사용할까?

A. font-size는 공간을 잡아주는데 sr-only은 공간을 잡아주지 못한다. 즉, sr-only은 display:none의 상태처럼 공간이 사라진다.(하지만 텍스트는 읽혀짐)

/* bootstrap */
.sr-only{
 position:absolute;
 width:1px;
 height:1px;
 padding:0px;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 border:0;   
}

.sr-only-focusable:focus{
	position:relative;
	width:auto;
	height:auto;
	clip:initial;
	margin:inherit;
	padding:inherit;
	border:initial;
}