끄적이는 퍼블리셔♥

1. 바로가기가 왜 필요한가? 스크린리더 사용자나 키보드를 이용한 사용자 같은 경우 여러 링크가 있을 경우 원하는 콘텐츠까지 도달하기 매우 부담이 될 수 있다. 이런 불편한 부분을 해소하기 위해 본문 바로가기[skip-navigation]이 필요합니다. 2. 태그안의 최상단에 a 태그 "본문 바로가기" 만들기 본문 바로가기 /* Skip to content */ .skip-to { position:absolute; top:-99px; left:0; background:#333; color:#fff; width:100%; padding:10px 0; text-align:center; text-decoration:none; z-index:999; } .skip-to:hover, .skip-to:focus, ..

1. WAI-ARIA란? Web Accessibility Initiative - Accessible Rich Internet Applications 웹접근성에 대한 표준 기술 규격을 의미 스크린 리더기 프로그램으로 들어보면 의미가 다르게 전달됨 HTML5 섹션 태그 LandMarkRole 설명 role="naviation" role="main" role="form" role="banner" 요소와 비슷한 의미 role="search" 검색의 역할을 담당하는 서식 영역 role="contentinfo" 요소와 비슷한 의미 role="tab" -> 버튼의 역할이 "탭"이라고 명시해주고, 선택된 요서 정보도 함께 전달해 줄 수 있다. 2. aria-required / aria-label / aria-live ..

시멘틱(Sementic: 의미론적인) 마크업은 웹접근성 측면에서 필수적이다. 시멘틱 마크업을 하면 태그들을 키워드로 간주하기 때문에 검색엔진 최적화에 유리하다. 뿐만 아니라 코드 가독성에 따른 유지보수에도 용이하다. 시멘틱 마크업을 하는 법헤더 푸터에 header, footer 태그 사용메인 컨텐츠에는 , 태그 사용(main 태그는 보통 하나만 쓰기)를 이용하여 독립적인 컨텐츠(예를 들면 블로그에서 포스팅 각각 한개씩)를 마크업최상위 제목으로 태그ul li는 순서가 없는 목록으로 사용내비게이션에 태그 사용strong은 다른내용이 강조되어야 할때, b나 em은 글자색을 진하게만 할때로 구분해서 사용 태그를 이용하여 주요 콘텐츠 이외의 참고가 될 수 있는 컨텐츠(사이드바, 배너바 등 위치는 사이드에 위치하는..