WCAG 2.1 항공사 WAI-ARIA 적용 사례
  • 모두를 위한 디자인
  • 항공사의 웹 접근성 준수 의무
  • 국내 접근성과 국제 접근성은 어떻게 다를까?
  • 항공사 접근성 위배로 인한 벌금 부과 사례
  • AOA 2023~
    • 주요 UI별 ARIA 적용 사례 (2022~2024)
      • 호버 콘텐츠 적용사례
      • 입력 글자 수 제한 사례
      • 🕹️Form 그룹의 오류 적용 사례
      • 비밀번호 실시간 오류 적용 사례
      • 🖼️SVG 이미지의 접근성 향상 방법
      • 오류메시지 종류별 적용 사례
      • 스낵바(Snack bar) 적용 사례
  • AOA 2019
    • 주요 UI별 ARIA 적용 사례 (2019)
      • 스핀 버튼 적용 사례
      • 페이지 네비게이터 적용 사례
      • 메인 네비게이션 구현 사례
      • 메뉴 적용 사례
      • 캐러셀 적용 사례
      • 채팅 상담 적용 사례
      • 툴팁 적용 사례
      • 그룹명 필수 항목 적용 사례
      • 이해하기 쉬운 데이터 테이블 적용 사례
      • 날짜 입력 적용 사례
    • 알아두면 좋은 TIP!
      • dl, dt, dd 태그를 남용하지 마세요.
      • 제발 나를 무시해 주세요.
      • 띄어쓰기를 주의하세요!
  • AOA 2018
    • 주요 UI별 ARIA 적용 사례 (2018)
      • 로딩 적용 사례
      • Date Picker 적용사례
      • 좌석선택 적용사례
      • 탭 UI 적용 사례
      • 모달 다이얼로그 적용 사례
      • 확장과 축소 콘텐츠 적용 사례
      • 정렬할 수 있는 table 적용 사례
      • 자동완성 적용 사례
      • 접근성 주요 개선 항목
        • 버튼을 왜 링크로 쓰는거지?
        • 그룹에게는 그룹명을 알려주자
        • 에러메세지는 왜 보이기만 하지?
        • 이해하기 어려운 폼 레이블
        • 화면을 보는 스크린리더 사용자
        • 전환되지 않는 페이지의 포커스
        • 동일한 기능의 서로 다른 UI
    • 알아두면 좋은 것들
      • role=application은 언제 사용할까?
      • 대문자로만 표현해야 할 때
      • 화면의 정렬을 위해 중복 태그를 사용하지 말 것
    • Screen Reader 테스트
      • Screen Reader와 Browser 조합
      • Screen Reader 버그
  • WAI-ARIA
    • Landmark Role
    • Widget Role & Attributes
  • Contact
    • 무엇이 궁금하세요?
Powered by GitBook
On this page
  • role="banner"
  • role="main"
  • role="complementary"
  • role="search"
  • role="region"
  • role="contentinfo"
  • role="navigation"
  • role="form"

Was this helpful?

Edit on Git
  1. WAI-ARIA

Landmark Role

랜드마크 탐색키 - JAWS : R키, NVDA : D키

role="banner"

banner

웹 사이트의 로고나 사이트 제공자, 웹 페이지의 검색 기능을 포함하는 영역으로 웹 페이지의 상단의 영역을 뜻한다. role="banner"는 웹 페이지에서 1개만 사용 가능하며 최상위 레벨로 사용한다.

role="main"

main region

주요 정보를 포함하거나 직접적인 연관이 있는 영역에 사용하는 landmark로 웹 페이지 상단에서 "메인 콘텐츠로 이동" 과 같은 스킵네비게이션에서 메인으로 갈 때 사용하는 목적지이다.

role="complementary"

complementary information

웹 사이트 내에서 보조 정보 영역에 사용하는 landmark로 날씨나 주식정보 등 주요 정보가 아닌 영역에 사용하는 landmark이다.

role="search"

search region

웹 사이트의 검색 기능을 수행하는 입력박스와 검색 버튼 등이 조합된 영역에 사용한다.

role="region"

main, complementary, navigation 등의 landmark 를 사용하지 않은 곳으로 사용 목적이 불분명한 영역에 제한적으로 사용한다.

role="contentinfo"

content information

copyright와 개인정보 관련 링크가 포함된 영역에 사용하는 landmark이다.

role="navigation"

navigation region

웹 사이트 탐색을 위한 링크의 집합과 같은 영역에 사용하는 landmark이다.

role="form"

검색 영역과 구분하여 사용해야 하며, aria-labelledby 속성을 사용하여 시각적으로 보이는 레이블을 연관되게 사용한다. 일반적으로 submit이 발생하지 않아야 하는데 발생하는 경우에는 사용자에게 알려주어야 한다.

PreviousScreen Reader 버그NextWidget Role & Attributes

Last updated 5 years ago

Was this helpful?