Fiori 개발자 80%가 놓치는 ARIA 접근성 속성 #shorts #SAP #Fiori

ARIA 접근성이 Fiori 개발에서 중요한 이유

SAP Fiori 앱은 장애인 접근성 표준(WCAG 2.1 AA)을 준수해야 합니다. 특히 공공기관, 대기업 프로젝트에서는 접근성 감사가 필수입니다. UI5 컨트롤에는 기본 ARIA 지원이 내장되어 있지만, 커스텀 개발 시 개발자가 직접 ARIA 속성을 추가해야 하는 경우가 많습니다.

놓치기 쉬운 ARIA 1: 다이얼로그의 aria-label

// 잘못된 패턴: Dialog에 레이블 없음
const oDialog = new sap.m.Dialog({
  content: [new sap.m.Text({ text: "처리 중..." })]
});
// 스크린 리더: "Dialog" 만 읽음 — 목적 불명확

// 올바른 패턴: ariaLabelledBy 또는 title 설정
const oTitle = new sap.m.Title({
  id: "dialogTitle",
  text: "주문 확인",
  level: sap.ui.core.TitleLevel.H2
});

const oDialog = new sap.m.Dialog({
  content: [
    oTitle,
    new sap.m.Text({ text: "선택한 주문을 확정하시겠습니까?" })
  ],
  ariaLabelledBy: ["dialogTitle"],  // ARIA 레이블 연결
  beginButton: new sap.m.Button({
    text: "확인",
    type: sap.m.ButtonType.Emphasized,
    press: () => { oDialog.close(); }
  }),
  endButton: new sap.m.Button({
    text: "취소",
    press: () => { oDialog.close(); }
  })
});

놓치기 쉬운 ARIA 2: 상태 변화를 스크린 리더에 알리기

// ARIA Live Region — 동적 상태 변화 알림
// XML View
// <VBox>
//   <core:InvisibleText id="statusAnnouncer"
//                       ariaLive="polite" />
//   <Button text="주문 제출" press="onSubmit" />
// </VBox>

// Controller
onSubmit: function() {
  // 처리 시작 알림
  this.byId("statusAnnouncer").setText("주문을 처리하는 중입니다...");

  submitOrder().then(() => {
    // 완료 알림 (스크린 리더가 읽어줌)
    this.byId("statusAnnouncer").setText("주문이 성공적으로 제출되었습니다. 주문번호: SO-2026-001");

    // 3초 후 초기화 (다음 알림을 위해)
    setTimeout(() => {
      this.byId("statusAnnouncer").setText("");
    }, 3000);
  }).catch((err) => {
    this.byId("statusAnnouncer").setText("주문 제출 실패: " + err.message);
  });
}

놓치기 쉬운 ARIA 3: 아이콘 버튼에 툴팁과 ARIA 레이블

// 잘못된 패턴: 아이콘만 있는 버튼 (의미 불명확)
<Button icon="sap-icon://delete" press="onDelete" />
// 스크린 리더: "button" 만 읽음

// 올바른 패턴: tooltip과 ariaLabel 추가
<Button icon="sap-icon://delete"
        press="onDelete"
        tooltip="선택 항목 삭제"
        ariaLabel="선택한 주문 항목 삭제" />
// 스크린 리더: "선택한 주문 항목 삭제, 버튼"

놓치기 쉬운 ARIA 4: 테이블/리스트 헤더와 캡션

// XML View
<Table id="orderTable"
       ariaLabelledBy="orderTableTitle">
  <headerToolbar>
    <Toolbar>
      <Title id="orderTableTitle"
             text="미처리 주문 목록 (총 {/count}건)"
             level="H2" />
      <ToolbarSpacer />
      <Button icon="sap-icon://add"
              tooltip="주문 추가"
              press="onAddOrder" />
    </Toolbar>
  </headerToolbar>
  <columns>
    <Column><Text text="주문번호" /></Column>
    <Column><Text text="고객명" /></Column>
    <Column><Text text="금액" /></Column>
    <Column><Text text="상태" /></Column>
  </columns>
</Table>

놓치기 쉬운 ARIA 5: 필수 필드 명시

// 잘못된 패턴: 필수 표시만 시각적으로
<Input placeholder="주문번호" />
<Text text="* 필수" />

// 올바른 패턴: required + ariaDescribedBy
<Label text="주문번호" required="true"
       labelFor="orderIdInput" />
<Input id="orderIdInput"
       required="true"
       ariaDescribedBy="orderIdHint"
       valueState="Error"
       valueStateText="주문번호는 필수입니다." />
<core:InvisibleText id="orderIdHint"
                    text="SO- 형식으로 입력하세요. 예: SO-001" />

접근성 테스트 도구

• axe DevTools (Chrome 확장): ARIA 오류를 자동으로 감지
• NVDA (Windows 무료 스크린 리더): 실제 스크린 리더로 테스트
• VoiceOver (macOS/iOS 내장): Apple 기기 테스트
• SAP Fiori Accessibility Validator: UI5 앱 전용 도구

공식 문서

UI5 접근성 가이드는 UI5 Accessibility Support에서 확인하세요. ARIA 표준은 W3C ARIA Authoring Practices를 참고하세요.