WAI-ARIA 요소 - menu role

웹페이지의 탐색을 돕기 위해 사용되거나 또는 복잡한 웹 앱에서 빠질 수 없는 요소인 메뉴 위젯을 ARIA를 사용하여 바르게 마크업하는 방법 및 주의점에 대해 살펴보겠습니다. 또한, 스크린 리더 사용자, 키보드 사용자의 메뉴 탐색을 위한 키보드 적용에 대해서도 살펴봅니다. 웹페이지 및 SPA(single page application)에서의 메뉴는 크게 두 가지로 정의할 수 잇습니다. 첫 번째로, 일반적인 웹페이지 탐색 시 사용되는 주메뉴, 서브메뉴와 같은 사이트 탐색에 필요한 네비게이션 형태이며, 두 번째로, 구글 문서와 같은 웹 앱에서의 파일 열기, 도구 메뉴와 같은 데스크톱 형태의 메뉴로 구분할 수 있습니다. 일반적으로 메뉴를 마크업할 때 ul 요소를 메뉴 컨테이너로 사용하며, ul 요소에 포함된 l..

2023.01.24

스크린리더가 이미지를 무시하는 방법 4가지

1. CSS의 background 속성 사용 .image {background-image: url(bg.gif);} 2. 태그에 alt 속성을 빈 값으로 사용 3. aria-hidden="true" 사용 4. role="presentation" 사용 참고:) https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/ignore#less-than-img-greater-than-aria-hidden 제발 나를 무시해 주세요. - WCAG 2.1 항공사 WAI-ARIA 적용사례 1번 방법으로 사용하게 되면 스크린리더는 해당 영역을 "p"로 읽게 되어 스크린리더 사용자는 무엇을 읽는지 알 수 없게 된다. 2번 방법으로 사용하면 스크린리더는 해당 문구를 읽으려고 부단히 aoa.gitbo..

2023.01.03

WAI-ARIA 접근성: role, properties, states

ARIA role (역할) 특정 요소에 역할 정의, 사용자에게 정보 제공, 부여한 역할 동적 변경 불가 ARIA role 속성 role="application" 동일요소x, div 요소와 같이 그룹역할을 하는 요소로 대체 role="banner" 비슷한 의미로 사용 가능 로 사용 시 1페이지에서 1개만 사용하기를 권장 role="navigation" 와 동일 role="main" 과 동일 1페이지 내에 1개만 사용 가능하다. 본문의 주요 컨텐츠 영역 role="aside" 와 동일, 주요 컨텐츠와 연관이 적은 의미를 가진 영역 role="form" 과 동일 서버에 전송될 수 있는 컨텐츠, 폼 관련 요소의 모임 role="search" 검색 역할을 담당하는 서식 영역, 또는 에 사용 권장 role="con..

2023.01.03

WAI-ARIA 접근성: role

WAI-ARIA 란? WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)는 W3C에서 만든 기술로, WAI-ARIA 혹은 ARIA로 불린다. 마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, JavaScript, Ajax, Vue, React 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다. ex) 버튼을 클릭하여 페이지를 새로고침이나 링크 이동으로 전환되는 것이 아닌 컨텐츠 내용이나 구조가 바..

2023.01.03