ARIA 접근성 가이드

적용 예제

컴포넌트 패턴

역할과 속성은 따로 외우는 것보다 실제 컴포넌트 안에서 함께 볼 때 이해가 빠릅니다. 패턴마다 구조, 키보드 동작, 필요한 ARIA, 직접 조작할 수 있는 데모와 점검 항목을 담았습니다.

  • 버튼과 토글 버튼

    누르면 동작을 실행하는 버튼과, 눌림·안 눌림 두 상태를 오가는 토글 버튼을 만드는 방법입니다. 네이티브 <button>이 기본이며, aria-pressed로 토글 상태를 알립니다.

    aria-pressedaria-disabledaria-labelaria-describedby기초

  • 디스클로저(펼치기/접기)

    버튼 하나로 관련 내용을 펼치고 접는 패턴입니다. 버튼의 aria-expanded로 상태를 알리고, 접힌 내용은 hidden으로 숨깁니다. 가장 간단한 대안은 네이티브 <details>입니다.

    aria-expandedaria-controls기초

  • 아코디언

    제목 목록처럼 늘어선 여러 구역을 각각 펼치고 접는 패턴입니다. 각 제목 안의 버튼이 aria-expanded로 상태를 알리고, 패널은 필요하면 role="region"으로 제목과 연결합니다.

    aria-expandedaria-controlsaria-labelledbyaria-disabled중급

  • 탭

    같은 자리에 겹쳐 놓은 여러 패널 가운데 하나를 골라 보여 주는 패턴입니다. tablist·tab·tabpanel 역할과 aria-selected로 구조와 선택 상태를 알리고, 탭 사이는 화살표 키로 이동합니다.

    aria-selectedaria-controlsaria-labelledbyaria-orientation중급

  • 모달 대화상자

    페이지 위에 떠서 사용자의 응답을 받는 동안 나머지 화면을 쓸 수 없게 하는 창입니다. 열면 포커스를 안으로 옮기고, 안에서만 맴돌게 하고, Esc로 닫으며, 닫으면 연 버튼으로 포커스를 돌려줍니다. 네이티브 <dialog>의 showModal()이 가장 좋은 출발점입니다.

    aria-modalaria-labelledbyaria-describedbyaria-label심화

  • 메뉴 버튼

    버튼을 누르면 실행할 수 있는 명령 목록(role="menu")이 열리는 패턴입니다. 데스크톱 앱의 메뉴처럼 화살표 키로 항목을 고릅니다. 사이트 내비게이션의 드롭다운은 메뉴가 아니라 디스클로저로 만듭니다.

    aria-haspopuparia-expandedaria-controlsaria-labelledby심화

  • 콤보박스(자동완성)

    입력란에 글자를 치면 아래에 추천 목록이 뜨고, 화살표로 골라 값을 채우는 패턴입니다. 포커스는 입력란에 둔 채 aria-activedescendant로 목록의 현재 항목을 알리고, 결과 건수는 라이브 리전으로 안내합니다.

    aria-autocompletearia-expandedaria-controlsaria-activedescendant심화

  • 리스트박스

    항상 펼쳐진 목록에서 하나 또는 여러 항목을 고르는 패턴입니다. listbox와 option 역할, aria-selected로 선택 상태를 알리고, 여러 개를 고를 때는 aria-multiselectable을 씁니다. 네이티브 대안은 <select>입니다.

    aria-selectedaria-multiselectablearia-activedescendantaria-labelledby심화

  • 체크박스

    켜짐·꺼짐 두 가지 상태를 고르는 이중 상태 체크박스와, 하위 항목 일부만 선택되었음을 알리는 혼합(mixed) 상태 “전체 선택” 체크박스를 만드는 방법입니다.

    aria-checkedaria-labelledbyaria-describedbyaria-controls기초

  • 라디오 그룹

    여러 선택지 중 하나만 고르는 라디오 버튼 묶음입니다. 묶음 전체가 Tab 한 번으로 들어가고, 안에서는 화살표 키로 이동하며 선택하는 로빙 tabindex 방식을 씁니다.

    aria-checkedaria-labelledbyaria-describedbyaria-required중급

  • 스위치

    설정을 켜짐·꺼짐으로 바로 바꾸는 스위치입니다. role="switch"와 aria-checked로 만들며, 체크박스·토글 버튼과의 차이를 정리합니다.

    aria-checkedaria-pressedaria-labelledbyaria-describedby기초

  • 슬라이더

    정해진 범위 안에서 손잡이를 움직여 값을 고르는 단일 슬라이더입니다. aria-valuenow·aria-valuemin·aria-valuemax로 값을, aria-valuetext로 사람이 읽기 좋은 값을 알립니다.

    aria-valuenowaria-valueminaria-valuemaxaria-valuetext중급

  • 툴팁

    요소에 마우스를 올리거나 키보드 포커스가 갔을 때 짧은 설명을 띄우는 툴팁과, 버튼을 눌러 정보를 여는 토글팁을 접근성 있게 만드는 방법입니다. WCAG 1.4.13의 닫기·호버·유지 조건을 함께 다룹니다.

    aria-describedbyaria-labelledbyaria-labelaria-live중급

  • 브레드크럼(현재 위치)

    사이트 계층 구조에서 현재 페이지의 위치를 상위 페이지 링크 목록으로 보여 주는 브레드크럼을 <nav>, 순서 있는 목록, aria-current="page"로 만드는 방법입니다.

    aria-currentaria-labelaria-labelledby기초

  • 캐러셀(슬라이드)

    여러 콘텐츠를 한 번에 하나씩 보여 주는 캐러셀을 만드는 방법입니다. 자동 넘김 정지·시작 버튼(WCAG 2.2.2), aria-roledescription, 상태에 따라 켜고 끄는 라이브 리전을 다룹니다.

    aria-roledescriptionaria-labelaria-labelledbyaria-live심화

  • 폼 오류 검증

    입력 오류를 텍스트로 알리고 입력란과 연결하며, 제출 시 오류 요약으로 포커스를 옮겨 어떤 칸을 어떻게 고쳐야 하는지 모든 사용자가 알 수 있게 만드는 방법입니다.

    aria-invalidaria-errormessagearia-describedbyaria-required중급

  • 알림 메시지(토스트·상태)

    포커스를 옮기지 않고 결과·경고·새 소식을 알리는 상태 메시지를 status, alert, log 역할로 구분해 만들고, 잠깐 떴다 사라지는 토스트를 접근성 있게 구현하는 방법입니다.

    aria-livearia-atomicaria-relevantaria-label중급

  • 정렬 가능한 표

    <table>, <caption>, <th scope>로 데이터 표의 구조를 전달하고, 열 머리글 안의 정렬 버튼과 aria-sort로 현재 정렬 상태를 알리는 방법입니다.

    aria-sortaria-describedbyaria-live중급

  • 페이지 레이아웃(랜드마크)

    header, nav, main, aside, footer, search로 페이지를 큰 영역(랜드마크)으로 나누고, 건너뛰기 링크와 랜드마크 이름으로 원하는 곳에 빠르게 이동하게 하는 방법입니다.

    aria-labelaria-labelledby기초