aria-hidden 2

[웹접근성]웹접근성을 고려한 마크업(WAI-ARIA)-2

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

IT 2023.03.05

[웹접근성]웹접근성을 고려한 마크업(WAI-ARIA)-1

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

IT 2023.03.05