접근성

현재 Wijmo의 주요 컨트롤(FlexGrid, Input 등)은 이미 WCAG 2.1 AA 표준을 준수하고 있습니다. 이러한 컨트롤을 특별한 설정 없이 사용할 경우, 접근성 테스트 도구(Axe-DevTools 등)를 통과할 수 있으며 스크린 리더(NVDA등)에 보다 풍부하고 정확한 콘텐츠를 제공할 수 있습니다.

이는 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 속성은 웹 개발자가 사용자 에이전트가 폼 필드 값 자동 완성을 제공할 수 있는지 여부와 그 범위를 지정할 수 있도록 하며, 해당 필드에서 기대되는 정보 유형에 대해 브라우저에 가이드를 제공합니다.

예를 들어, ComboBox 컨트롤에 autocomplete=email을 추가하려는 경우입니다.

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

API 참고 : Combobox

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

상태 메시지는 콘텐츠의 중요한 변경 사항을 인지할 수 있도록 하며, 스크린 리더에 의해 읽힙니다.

이러한 유형의 알림 메시지는 전적으로 사용자 시나리오에 따라 달라지며 사용자가 직접 커스터마이징해야 하므로, 여기서는 참조용 구현을 제공합니다.

예를 들어, ComboBox의 텍스트가 변경될 때 스크린 리더가 “Current value: {SOMETHING}“을 읽도록 하려는 경우입니다.

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

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

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