# 접근성

## Content

현재 Wijmo의 주요 컨트롤(FlexGrid, Input 등)은 이미 [WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/) AA 표준을 준수하고 있습니다. 이러한 컨트롤을 특별한 설정 없이 사용할 경우, 접근성 테스트 도구([Axe-DevTools](https://www.deque.com/axe/devtools/extension/) 등)를 통과할 수 있으며 스크린 리더([NVDA](https://www.nvaccess.org/download/)등)에 보다 풍부하고 정확한 콘텐츠를 제공할 수 있습니다.
이는 Wijmo를 사용하는 장애인의 사용자 경험을 크게 향상시키며, 애플리케이션이 특정 국제 접근성 가이드라인을 충족하는 데에도 도움이 됩니다.
컨트롤 접근성에 대한 주요 지원 사항은 다음과 같습니다.

1. DOM 노드에 대한 WAI 레이블(`role`, `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-disabled` 등)을 전반적으로 강화하고, 이러한 레이블에 대응하는 값의 정확성을 수정했습니다.
2. UI 디자인에 영향을 주지 않으면서 입력 컨트롤에 가시적인 레이블을 추가했습니다.
3. 컨트롤의 색상 대비를 가능한 한 4.5:1 비율에 맞추도록 조정했습니다.
4. 시스템의 고대비 모드에서 컨트롤의 UI 성능을 강화했습니다.
5. 마우스에 의존하지 않고도 최대한 컨트롤을 조작할 수 있도록 보조 키보드 동작을 추가했습니다.


***

또한, 일부 과도하게 유연한 사용자 시나리오는 Wijmo 컨트롤 내에서 직접 지원하기에 적합하지 않지만, 목표를 달성할 수 있도록 몇 가지 가능한 해결 방법을 제공하고 있습니다.

#### 시나리오: “autocomplete” 속성 추가

HTML autocomplete 속성은 웹 개발자가 [사용자 에이전트](https://developer.mozilla.org/en-US/docs/Glossary/User_agent)가 폼 필드 값 자동 완성을 제공할 수 있는지 여부와 그 범위를 지정할 수 있도록 하며, 해당 필드에서 기대되는 정보 유형에 대해 브라우저에 가이드를 제공합니다.
예를 들어, ComboBox 컨트롤에 autocomplete=email을 추가하려는 경우입니다.

```javascript
// 1. ComboBox에서 input 요소 가져오기
const input = combobox.inputElement;
// 2. “autocomplete” 속성 설정
input.setAttribute("autocomplete", "email");
```

API 참고 : [Combobox](/wijmo/api/classes/Wijmo_Input.Combobox.html)

#### **시나리오: 동적 상태 메시지**

상태 메시지는 콘텐츠의 중요한 변경 사항을 인지할 수 있도록 하며, 스크린 리더에 의해 읽힙니다.
이러한 유형의 알림 메시지는 전적으로 사용자 시나리오에 따라 달라지며 사용자가 직접 커스터마이징해야 하므로, 여기서는 참조용 구현을 제공합니다.
예를 들어, ComboBox의 텍스트가 변경될 때 스크린 리더가 “Current value: {SOMETHING}“을 읽도록 하려는 경우입니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/6dfe120d-629f-46e0-9be0-9f8dbcccd8a4/image-20251218.c4ded0-20260120.13865e.png)

```html
// 1. HTML 부분: 알림용 DOM 요소 준비 
<div id="valueAnnouncer" role="status" aria-live="polite" aria-atomic="true"></div> 
```

```css
// 2. CSS 부분: 레이아웃에 영향을 주지 않도록 알림 요소 숨기기
<style> 
#valueAnnouncer { 
    width: 0; 
    height: 0; 
    overflow: hidden; 
} 
</style> 
```

```javascript
// 3. JS 부분: combobox 변경 시 알림 요소의 textContent 변경
const announcer = document.getElementById('valueAnnouncer');
combobox.textChanged.addHandler((sender, e) => {
    let text = sender.text; 
    // 표시 값
    announcer.textContent = Current value: ${text};
});
```