주요 HTML 속성
- alt: 이미지의 대체 텍스트를 제공합니다.
- title: 요소에 대한 추가 정보나 설명을 제공합니다 (툴팁으로 표시될 수 있음).
- href: 링크의 목적지 URL을 지정합니다.
- src: 이미지, 오디오, 비디오 등의 자원의 경로를 지정합니다.
- id: 요소의 고유 식별자를 제공합니다.
- class: 요소를 스타일링하기 위한 클래스 이름을 지정합니다.
- style: 요소에 인라인 스타일을 지정합니다.
- tabindex: 요소의 탭 순서를 명시적으로 지정합니다.
- type: input 요소의 타입을 지정합니다 (예: text, checkbox, radio 등).
- name: input 요소의 이름을 지정합니다.
ARIA 속성
ARIA (Accessible Rich Internet Applications)는 웹 콘텐츠와 웹 애플리케이션의 접근성을 개선하기 위해 W3C에서 만든 표준입니다. ARIA는 주로 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 더 나은 접근성을 제공하기 위해 HTML 요소에 추가하는 속성 집합입니다. 여기에서는 주요 ARIA 속성과 그 설명을 제공합니다.
역할 속성 (role)
- role: 요소의 의미나 목적을 지정합니다. 예를 들어, button, checkbox, dialog, navigation 등의 값을 가질 수 있습니다.
상태 및 속성
- aria-activedescendant: 현재 활성화된 자식 요소의 ID를 나타냅니다.
- aria-atomic: 업데이트 시 스크린 리더가 내용을 전체적으로 읽어야 하는지 부분적으로 읽어야 하는지 여부를 지정합니다.
- aria-autocomplete: 자동 완성 기능의 상태를 지정합니다. 값으로는 inline, list, both, none이 있습니다.
- aria-busy: 요소가 현재 업데이트 중임을 나타냅니다.
- aria-checked: 체크박스, 라디오 버튼 또는 트리 아이템의 체크 상태를 나타냅니다. 값으로는 true, false, mixed, undefined가 있습니다.
- aria-colcount: 표나 그리드에서 총 열 수를 나타냅니다.
- aria-colindex: 표나 그리드에서 현재 열의 인덱스를 나타냅니다.
- aria-colspan: 표나 그리드에서 열 병합(span) 수를 나타냅니다.
- aria-controls: 요소가 제어하는 요소들의 ID를 나타냅니다.
- aria-current: 현재 요소가 현재 상태임을 나타냅니다. 값으로는 page, step, location, date, time, true, false가 있습니다.
- aria-describedby: 다른 요소의 설명을 제공하는 요소들의 ID를 나열합니다.
- aria-details: 현재 요소에 대한 자세한 설명을 제공하는 요소의 ID를 지정합니다.
- aria-disabled: 요소가 비활성화되어 있음을 나타냅니다.
- aria-dropeffect: 드래그 앤 드롭 작업에서 허용되는 드롭 효과를 지정합니다.
- aria-errormessage: 오류 메시지를 제공하는 요소의 ID를 지정합니다.
- aria-expanded: 요소가 확장되었는지 축소되었는지를 나타냅니다.
- aria-flowto: 요소의 읽기 순서를 변경할 때 사용합니다.
- aria-grabbed: 요소가 현재 드래그되어 있는지를 나타냅니다.
- aria-haspopup: 요소가 팝업 메뉴 또는 대화 상자를 호출할 수 있음을 나타냅니다. 값으로는 menu, listbox, tree, grid, dialog이 있습니다.
- aria-hidden: 요소가 접근성 트리에서 숨겨져 있는지를 나타냅니다.
- aria-invalid: 입력 요소의 값이 잘못되었음을 나타냅니다.
- aria-keyshortcuts: 요소에 사용 가능한 키보드 단축키를 나타냅니다.
- aria-label: 요소의 접근성 레이블을 제공합니다.
- aria-labelledby: 요소의 레이블을 제공하는 다른 요소들의 ID를 나열합니다.
- aria-level: 요소의 계층 구조에서의 레벨을 나타냅니다.
- aria-live: 요소의 업데이트 빈도를 지정합니다. 값으로는 off, polite, assertive가 있습니다.
- aria-modal: 요소가 모달 대화 상자임을 나타냅니다.
- aria-multiline: 요소가 여러 줄 입력을 지원하는지를 나타냅니다.
- aria-multiselectable: 요소가 다중 선택을 지원하는지를 나타냅니다.
- aria-orientation: 요소의 방향을 지정합니다. 값으로는 horizontal, vertical이 있습니다.
- aria-owns: 요소가 소유한 자식 요소들의 ID를 지정합니다.
- aria-placeholder: 입력 요소의 플레이스홀더 텍스트를 나타냅니다.
- aria-posinset: 셋에서 현재 요소의 위치를 나타냅니다.
- aria-pressed: 버튼의 눌림 상태를 나타냅니다. 값으로는 true, false, mixed, undefined가 있습니다.
- aria-readonly: 요소가 읽기 전용임을 나타냅니다.
- aria-relevant: 스크린 리더가 중요한 변화를 알리는 데 사용할 이벤트 유형을 지정합니다. 값으로는 additions, removals, text, all이 있습니다.
- aria-required: 요소가 필수인지 여부를 나타냅니다.
- aria-roledescription: 사용자 정의 역할의 설명을 제공합니다.
- aria-rowcount: 표나 그리드에서 총 행 수를 나타냅니다.
- aria-rowindex: 표나 그리드에서 현재 행의 인덱스를 나타냅니다.
- aria-rowspan: 표나 그리드에서 행 병합(span) 수를 나타냅니다.
- aria-selected: 요소가 선택되었는지를 나타냅니다.
- aria-setsize: 셋에서 총 항목 수를 나타냅니다.
- aria-sort: 열의 정렬 상태를 나타냅니다. 값으로는 none, ascending, descending, other가 있습니다.
- aria-valuemax: 범위 내 최대 값을 나타냅니다.
- aria-valuemin: 범위 내 최소 값을 나타냅니다.
- aria-valuenow: 현재 값을 나타냅니다.
- aria-valuetext: 현재 값의 텍스트 대체를 제공합니다.
정보접근성 향상을 위한 W3C 국제표준 WAI-ARIA 사례집
2016.12.14-WAI-ARIA.pdf
17.02MB
728x90
