A11Y 101: WAI-ARIA 상태

이제 가능한 모든 ARIA 속성을 살펴보았으므로 모든 상태에 대해 동일한 작업을 수행해 보겠습니다.

요소가 있는 현재 상태를 추가하기 위해 상태가 있다는 것을 기억하는 것이 좋습니다.

WAI-ARIA 상태 목록

aria-checked: 이 상태를 가질 수 있는 입력 필드의 현재 선택된 상태를 나타냅니다

.

aria-disabled: 요소가 현재 비활성화된 경우 설명됨

aria-expanded: 요소가 확장되었는지 또는 축소되었는지 설명합니다.

aria-haspopup: 요소에 팝업이 있는지, 어떤 유형인지 설명하고 값은 false , true , menu , listbox , tree , grid 또는 dialog 입니다.

aria-hidden: 요소가 보이지 않는 경우 표시

aria-invalid: 입력이 유효하지 않은지 설명합니다.

aria-modal: 요소가 활성 모달인지 여부를 나타냅니다.

aria-multiline: 텍스처가 여러 줄을 허용하는지 여부.

aria-multiselectable: 다중 선택 목록과 같이 다중 선택 가능한 옵션이 있는 요소를 설명하는 데 사용됩니다.

aria-pressed: 현재 요소가 눌렸는지 설명합니다.

aria-readonly: 입력 요소가 읽기 전용인지 설명합니다.

aria-required: 요소가 필요한지 여부를 설명합니다.

aria-selected: 현재 옵션 요소가 선택되었는지 여부.

aria-busy: 해당 영역이 아직 로드 중이거나 작업 중인지 나타내는 데 사용됩니다.

aria-atomic: 라이브 영역에서 콘텐츠의 전체 또는 일부만 발표하는지 설명합니다.

aria-grabbed: 끌어서 놓기 활성 요소에 대한 잡기 상태를 설명합니다.

또한 사용할 수 있는 의미론적 대안이 없는지 항상 확인해야 합니다.

대부분의 양식 필드가 이에 해당합니다. 예를 들어 aria-readonly 및 aria-required를 살펴보겠습니다.

입력 필드의 경우 다음을 수행할 수 있습니다.

<input readonly required />

주요 테이크 아웃은 의미 체계가 조건을 처리하기에 충분하지 않은 경우에만 이러한 아리아 상태를 사용하는 것입니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나