wai-aria란?

wai-aria란? 

 

WAI-ARIA(웹 접근성 증가 및 상호 운용성)는 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키는 데 사용되는 기술입니다. 이는 장애를 가진 사용자들이 더 나은 웹 경험을 할 수 있도록 도와줍니다. WAI-ARIA는 HTML, XHTML, XML 및 SVG와 같은 다양한 마크업 언어에서 사용할 수 있으며, 스크린 리더와 같은 보조 기술과 함께 사용될 때 웹 콘텐츠의 의미론적 정보를 향상시킵니다.

여기서 몇 가지 WAI-ARIA 속성과 그 예시를 살펴보겠습니다:

 

1. **role 속성**: 역할 속성은 요소의 역할을 정의하는 데 사용됩니다. 일반적으로 스크린 리더는 요소의 역할을 사용하여 사용자에게 해당 요소의 의미를 전달합니다.

```html
<button role="button" onclick="alert('Hello World!')">Click me</button>
```

위의 예제에서 "button" 역할은 버튼 역할을 나타냅니다. 이 버튼은 사용자에게 클릭 가능한 버튼임을 나타내며, 클릭 시 "Hello World!" 라는 경고창이 나타납니다.

 

2. **aria-label 속성**: aria-label 속성은 요소에 대한 명시적인 레이블을 제공합니다. 이것은 요소가 의미론적으로 레이블이나 텍스트를 가지고 있지 않을 때 유용합니다.

```html
<button aria-label="Close" onclick="closeModal()">X</button>
```

위의 예제에서 버튼은 "Close"라는 레이블을 가집니다. 이 레이블은 사용자에게 모달을 닫는 버튼임을 명확하게 전달합니다.

 

반응형

3. **aria-labelledby 속성**: aria-labelledby 속성은 요소에 여러 레이블을 제공할 때 사용됩니다. 이 속성은 다른 요소의 ID를 참조하여 해당 요소에 대한 레이블을 정의합니다.

```html
<div id="heading">Frequently Asked Questions</div>
<ul aria-labelledby="heading">
  <li>What is WAI-ARIA?</li>
  <li>How can I use WAI-ARIA?</li>
</ul>
```

위의 예제에서 목록은 "Frequently Asked Questions"이라는 제목을 가집니다. aria-labelledby 속성을 사용하여 이 목록의 레이블을 "heading" 요소로 지정합니다.

 

4. **aria-describedby 속성**: aria-describedby 속성은 요소에 대한 설명을 제공합니다. 이 속성은 다른 요소의 ID를 참조하여 해당 요소에 대한 설명을 제공합니다.

```html
<input type="password" aria-describedby="password-desc">
<div id="password-desc">Password must be at least 8 characters long.</div>
```

위의 예제에서 입력 필드는 "password-desc"라는 요소의 설명을 가집니다. 이 설명은 사용자에게 비밀번호가 최소 8자 이상이어야 함을 알려줍니다.

이러한 예시들은 WAI-ARIA가 어떻게 웹 콘텐츠의 접근성을 향상시키는 데 사용될 수 있는지를 보여줍니다. 이러한 속성들은 장애를 가진 사용자들이 웹 콘텐츠를 이해하고 상호 작용할 수 있도록 돕는 데 중요한 역할을 합니다. WAI-ARIA는 웹 접근성을 개선하기 위한 매우 강력한 도구 중 하나이며, 웹 개발자들은 이를 적극적으로 활용하여 더 나은 웹 경험을 제공할 수 있습니다.