ARIA는 언제, 어떻게 사용해야 하나요?

Question

Accepted Answer

**ARIA**(Accessible Rich Internet Applications)는 네이티브 HTML이 표현할 수 없는 accessibility semantic(role, state, property)을 추가하는 attribute 집합입니다. 그러나 가장 중요한 ARIA 규칙은 **네이티브 HTML을 먼저 우선하라**는 것입니다. ## ARIA의 첫 번째 규칙: ARIA를 쓰지 마라 ```html

Save

``` 네이티브 element는 올바른 role, 키보드 동작, 포커스를 무료로 제공합니다. 어떤 네이티브 element도 그 일을 못 할 때만 ARIA를 선택하십시오. ## ARIA의 세 종류 ```html

Tab 1

``` ## Live region — 동적 변경을 알린다 ```html

3 results found

Error saving!

``` 이것은 진정으로 유용한 ARIA입니다. 페이지 리로드 없이 변하는 콘텐츠(검색 결과, 토스트, 유효성 검사 오류)에 대해 스크린 리더에 알려줍니다. ## 가장 큰 죄: 보조 기술에 거짓말하기 잘못된 ARIA는 없는 것보다 **나쁩니다**. 스크린 리더 사용자에게 거짓 정보를 줍니다. 그리고 ARIA는 *semantic*만 바꿀 뿐 동작은 결코 바꾸지 않습니다. `

`의 `role="button"`은 그것을 포커스 가능하거나 클릭 가능하게 만들지 않습니다. `tabindex`와 키 핸들러를 직접 추가해야 합니다. ## 왜 중요한가 95%의 경우에는 semantic HTML을 사용하고, 커스텀 위젯(탭, 콤보박스, 메뉴)의 빈틈을 메우거나 live region을 통해 동적 갱신을 알릴 때 ARIA를 사용하십시오. 규칙을 따르십시오 — 네이티브를 우선하고, 네이티브 semantic을 불필요하게 바꾸지 말며, state를 동기화하고, 완전히 구현하지 않은 role은 절대 적용하지 마십시오.