퍼블리싱 아카이브

role='button' button 태그를 사용하지 못할 때 button 역할임을 알리고 싶다면 role='button'속성을 사용한다. role="tablist" / role="tab"/aria-selected='true','false'/aria-expanded='true','false' 탭리스트를 하나로 묶을 때 tablist 속성을 사용하며 하나의 탭은 tab으로 속성을 부여한다. 선택됐는지 여부를 확인하기 위해 aria-selected 속성을 사용한다. aria-selected='true'면 해당 탭이 선택되었다는 의미, 'false'면 선택되지 않았다는 의미이다. aria-expanded는 해당 탭을 눌러 설명이 확장되었는지 여부를 알려준다. role="tooltip" input placeho..

숨김 콘텐츠 디자인에서 보이지 않는 정보이더라도 콘텐츠의 정보와 내용을 이해하기 위해 필요함. diplay: none 속성을 이용하면 애니메이션이 통하지 않는 것과 같이 해당 속성을 사용하여 콘텐츠를 숨길 경우, 스크린 리더 등 보조기기가 인식할 수 없는 문제가 생긴다. //화면의 초점이 해당 영역에 머물면서도 스크린 리더가 정보를 읽을 수 있게 함 .ally-hidden{ position:absolute !important; clip:rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); width:1px; height:1px; margin:-1px; overflow:hidden; white-space:nowrap; } 스크린 리더의 가상초점 이용

1. 마우스로 접근할 수 있는 요소는 키보드로도 접근할 수 있어야 한다. 2. button 태그의 경우 figure 태그를 자식 요소로 둘 수 없기 때문에 이 부분을 a 태그로 바꿔 준 뒤, aria 속성을 추가하여 버튼 역할을 할 수 있는 태그로 만들어준다. 서울 경복궁 aria-haspopup='dialog' 눌렀을 때 대화창이 뜨는 경우 aria-pressed = 'false' 해당 버튼이 눌렸는지 안눌렸는지 확인 Aria-role: Dialog 상세정보를 기입하는 div 태그는 아무런 의미가 없는 태그이다. 따라서 role 속성을 부여해 주어야 하며, 레이블링이 필요하다. HTML 기반의 애플리케이션의 다이얼로그 또는 콘텐츠를 분리하는 창 또는 다른 웹 애플리케이션의 UI 혹은 페이지를 마크업하는..

웹의 힘은 보편성에 있다. 장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것은 필수적인 요소이다. -Tim Berners-Lee 1. 웹접근성의 필수요소 1. 인식의 용이성 2. 운용의 용이성 3. 이해의 용이성 4. 견고성 2. 웹접근성을 고려한 마크업 1) 한국어 언어표시 (주로 사용하는 언어를 기본으로 명시해야 한다는 이해의 용이성 원칙 준수) 2) title은 고유하면서 명료하게(특수문자 지양) 티스토리 홈입니다. 3) HTML 시맨틱 태그 요소와 WAI-ARIA role 속성을 통해 콘텐츠의 내용을 표시할 수 있다. 둘 중의 하나의 방법만을 사용하고 혼용하지 않는 것을 권한다. 메인 콘텐츠 (O) 메인 콘텐츠 (O) 메인 콘텐츠 (x) 4) 논리적인 순서: 콘텐츠를 탐색하는 선형화된 순서를..