앱의 접근성 높이기

장애인을 포함한 모든 사람이 App Maker 앱을 사용할 수 있어야 합니다. 개인의 앱 사용에 영향을 미치는 일반적인 장애로는 실명 또는 시력 저하, 색맹, 난청 또는 청각 손상, 제한된 운동능력 등이 있습니다.

접근성을 염두에 두고 앱을 개발하면 장애가 있는 사용자 뿐만 아니라 모든 사용자의 사용자 경험이 향상됩니다.

접근 가능한 디자인

접근 가능한 디자인에는 앱 레이아웃, 크기, 색상, 탐색은 물론 적응형 기술 및 보조 기술과의 상호 작용이 포함됩니다.

모든 사용자가 앱을 제대로 사용하도록 하려면 머티리얼 디자인 접근성 권장사항을 이용하세요. 다음 표에는 접근성 고려사항 및 디자인의 주요 원칙이 설명되어 있습니다.

접근 가능한 디자인 권장사항
명확하고 조정 가능한 레이아웃 및 디자인 간단하고 명확하며 깔끔한 레이아웃을 사용하여 사용자가 앱을 쉽게 사용할 수 있도록 합니다. 특히 다음 내용이 해당됩니다.
  • 고배율에서도 요소를 선명하게 볼 수 있어야 합니다.
  • 다양한 화면 크기에 맞게 레이아웃을 조정하려면 반응형 디자인을 사용합니다.
  • 텍스트, 버튼 등의 요소는 충분한 크기와 충분히 높은 대비로 구성해야 합니다. 색상이 정보를 전달하거나 콘텐츠를 구분하는 유일한 방법이어서는 안 됩니다.
  • 앱에 제한 시간 후 사라지는 요소가 있는 경우 작업 완료에 필요한 요소에는 시간 제한을 설정해서는 안 됩니다.
  • 헤더, 목록, 표의 마크업을 완전하고 올바르게 작성합니다. 적절한 마크업은 적응형 기술이 콘텐츠를 소리내어 읽거나 확대하거나 대비를 변경하거나 다른 방식으로 조정하는 데 도움이 됩니다.
추적하기 쉬운 탐색
  • 탐색에는 명확하고 짧은 작업 흐름이 있어야 합니다.
  • 탐색은 페이지 간에 찾기 쉽고 일관성이 있어야 합니다. 예를 들어 각 페이지에 동일한 메뉴 탐색 및 검색 상자를 제공하는 헤더 템플릿을 사용합니다.
  • 페이지 요소를 논리적 순서로 구성합니다.
  • 설명 헤더 아래에 관련 항목을 그룹화합니다.
UI 요소 설명 라벨 각 대화형 요소의 목적을 사용자에게 설명해 주는 유용하고 고유한 설명 라벨을 제공합니다. 이러한 라벨을 사용하면 스크린 리더가 이러한 서비스를 사용하는 사용자에게 특정 제어의 기능을 올바르게 설명할 수 있습니다.
미디어에 대한 대체 텍스트 또는 설명 정보가 포함되어 있지 않은 이미지나 비디오의 경우, 콘텐츠를 간략하게 설명하는 대체 텍스트를 제공합니다.

이미지에 차트나 다이어그램과 같이 사용자가 알아야 하는 정보가 포함된 경우 데이터에 대한 설명을 추가합니다.

정보가 포함된 비디오에는 캡션을 추가하거나 전체 텍스트 스크립트를 제공합니다.
사운드 및 비디오 제어 사용자는 일시중지, 중지, 볼륨 조절 뿐만 아니라 가능한 경우 캡션 끄기/켜기 기능을 사용할 수 있어야 합니다.
키보드 제어 사용자가 키보드(일반적으로 Tab 또는 화살표 키 사용)만으로 앱을 탐색하고 사용할 수 있도록 앱을 구성합니다.

키보드 포커스는 가시적이어야 하며 페이지를 통해 직관적이고 작업 중심인 시퀀스를 따라야 합니다. 사용자가 대화상자를 닫거나 양식을 제출할 때 포커스를 잃지 않아야 합니다.

[App Maker](https://appmaker.google.com/){:.external target="_blank"}를 열고 키보드만 사용해 앱 여기저기를 이동하여 확인해 봅니다.
오류 도움말 가능하다면 오류 메시지에 대해 문제점 해결 방법을 포함하는 설명 텍스트를 제공합니다.

사용자가 중요한 작업을 취소하거나 계속 진행하기 전에 확인을 하도록 합니다. 예를 들어 사용자에게 데이터 삭제를 원하는지 확인을 요청한 후 계속 진행합니다.
데이터 수집 자동화 클라이언트 스크립트를 사용하여 사용자의 사용자 이름, 이메일 또는 레코드가 작성된 날짜와 같은 세션 정보를 자동으로 가져올 수 있습니다. 예를 들어 다음 스크립트는 사용자 이메일을 가져와 'user' 필드에 저장합니다. 또한 날짜를 가져와 'date' 필드에 저장합니다.

    record.user = Session.getActiveUser().getEmail();
    record.date = new Date();
    

App Maker 접근성 도구

App Maker를 사용하면 다음의 몇 가지 방법으로 접근 가능한 앱을 디자인할 수 있습니다.

  • 기본 머티리얼 디자인 테마는 대비 및 크기 권장사항을 충족합니다.
  • App Maker 요소에는 ariaLabel 속성이 있습니다. 이 속성을 WAI-ARIA(Accessible Rich Internet Applications) 시맨틱스에 사용할 수 있으며 기본 스크린 리더 동작을 재정의하거나 커스텀 위젯에 ARIA 라벨을 추가해야 하는 경우가 그러한 예시입니다.
  • 테이블 행 삭제 완료 같은 사용자의 작업 결과가 스크린 리더에 자동으로 표시되지 않는 경우 app.accessibility.announce() Client API 기능을 이용하여 스크린 리더에 텍스트를 제공할 수 있습니다. 자세한 내용은 접근성에서 확인하세요.

ARIA 레이블로 UI 설명 맞춤설정

App Maker 페이지의 각 요소는 ARIA label 속성을 가집니다. ariaLabel 속성은 ARIA 라벨 HTML 속성을 설정하며 이 속성은 보조 기술이 위젯의 목적을 시각 장애인에게 알리는 데 사용됩니다.

스크린 리더는 HTML 마크업에서 직접 컨텍스트와 라벨을 가져오도록 설계되었습니다. 대부분의 경우 ARIA 라벨을 명확하게 입력할 필요가 없습니다.

ARIA 라벨을 설정하는 경우는 다음과 같습니다.

  • 스크린 리더 사용자를 위해 버튼에 보다 구체적인 이름을 제공하는 것처럼 요소의 기본 이름을 재정의하려는 경우
  • 스크린 리더가 감지할 수 없는 작업으로 커스텀 위젯을 만드는 경우. 예를 들어 표시/ 숨기기 토글로 축소형 패널을 생성하는 경우, 패널 상태를 설명하는 텍스트를 제공하고 키보드 포커스가 패널을 통해 또는 패널 안으로 이동하거나 패널에서 멀어지도록 하는 방법을 지정해야 합니다.

위젯의 ariaLabel 속성을 설정하려면 다음을 수행합니다.

  1. 위젯을 선택하고 속성 편집기 탭으로 이동합니다.
  2. 기타를 클릭합니다.
  3. 다음과 같이 텍스트 값을 입력하거나 값을 결합합니다.

    • 값을 입력하려면 ariaLabel 상자를 클릭합니다.
    • 값을 결합하려면 아래쪽 화살표를 클릭하고 소스를 선택합니다.

스크린 리더에게 텍스트 제공

스크린 리더는 대화상자, 팝업 또는 메뉴가 열리는 경우처럼 여러 앱 UI 변경 사항을 알려줍니다. 테이블 행을 생성하거나 스피너 위젯을 여는 것처럼 일부 사용자 작업의 결과로 앱 인터페이스가 변경되면 시각 장애가 있는 사용자가 변경 사항을 인식하지 못할 수도 있습니다.

사용자에게 알리려면 이 기능 app.accessibility.announce을 사용하는 스크립트를 추가하여 스크린 리더가 작업의 일부로 공지를 설정할 수 있습니다.

예를 들어 표가 있는 앱을 만든다고 가정해 보겠습니다. 표에서 레코드를 삭제하려면 앱 사용자가 단추를 클릭하고 행을 삭제합니다. 스크린 리더가 행이 삭제되었다고(또는 작업이 성공하지 않아 행이 삭제되지 않았다고) 공지하도록 하려면 버튼의 onClick 동작을 다음과 같이 설정합니다.

widget.datasource.deleteItem({
      success: function (record) {
        app.accessibility.announce(‘Record was deleted and removed from the table.');
        console.info('Record with ID ' + record.id + ' was deleted from the database.);
      },
      failure: function (error) {
        app.accessibility.announce("The record wasn't deleted. Please try again");
        console.info('Record with ID ' + record.id + ' couldn't be deleted.');
      }
    });
    

이 샘플에서는 비동기식 콜백 함수를 사용하여 사용자에게 작업의 성공 여부를 알려줍니다.