PowerApps에서 액세스 가능한 캔버스 앱 만들기Create accessible canvas apps in PowerApps

액세스 가능한 캔버스 앱에서는 시각, 청각 및 기타 장애가 있는 사용자가 앱을 사용할 수 있습니다.An accessible canvas app will allow users with vision, hearing and other impairments to successfully use the app. 여러 정부 및 조직의 요구 사항인 점을 별개로 하더라도 아래 지침을 따르면 사용자의 능력에 상관없이 모든 사용자의 사용 편의성이 개선됩니다.In addition to being a requirement for many governments and organizations, following the below guidelines increases usability for all users, regardless of their abilities.

접근성 검사기 를 사용하여 앱의 잠재적인 접근성 문제를 검토하십시오.Use the Accessibility Checker to help review potential accessibility issues in your app.

레이아웃 및 색Layout and color

상식적이고 복잡하지 않은 디자인을 사용하면 모든 사용자가 앱에 쉽게 액세스하는 데 도움이 됩니다.Common sense and uncomplicated design helps apps be more accessible to all users. 앱의 사용자 지정을 많이 수행하는 경우 아래 제안 사항에 유의하세요.When doing heavy customization of apps take note of the below suggestions. PowerApps 테마는 기본적으로 접근성이 좋습니다.PowerApps themes are by default accessible.

  • 모든 요소가 명확하게 표시되고 텍스트가 충분한 크기인지 확인하세요.Ensure all elements are clearly visible and text is of sufficient size. 모든 콘텐츠를 육안으로 쉽게 읽고 이해할 수 있어야 합니다.All content must be easily read and understood by the naked eye.
  • 항목의 표시 유형 속성을 사용하여 요소를 표시하지 마세요.Avoid using the visibility property of items to bring an element into view. 조건부로 표시해야 하는 항목이 있으면 새 화면에서 콘텐츠를 만들고 해당 화면으로 이동한 후 되돌아오세요.If you need to show something conditionally, create the content in a new screen and navigate to it and back.
  • 화면에서 입력 요소에 레이블이 지정되어 있어야 합니다.Ensure input elements are labeled on the screen. AccessibilityLabel 속성은 화면 판독기가 알릴 내용을 정의합니다.AccessibilityLabel property defines what the screen reader will announce.
  • 색을 사용자 지정할 경우 텍스트:배경의 대비가 4.5:1 이상이어야 합니다.If customizing colors, ensure the contrast of text:background is 4.5:1 or greater. 이 프로세스를 지원하는 소프트웨어 도구를 바로 사용할 수 있습니다.Software tools that assist this process are readily available.
  • 상하와 좌우로 읽을 때 레이아웃이 논리 흐름에 맞는지 확인하세요.Ensure layout follows a logical flow when read top-bottom, left to right.

키보드 지원Keyboard support

앱 접근성을 테스트할 때는 iOS 및 Android의 접근성 모드에서 키보드만으로 앱을 사용할 수 있는지 확인하고, 화면 판독기를 사용하도록 설정하고 앱을 탐색할 수 있는지도 확인하세요.When testing your app's accessibility, ensure the app can be used with the keyboard only, the accessibility modes on iOS and Android, as well as navigated successfully with the screen reader enabled.

화면 판독기 사용 여부와 관계없이 키보드 탐색을 위해서는 각 컨트롤의 TabIndex 속성을 설정하여 Tab 키를 사용하여 입력 필드로 이동할 때 논리적 순서를 따라야 합니다.For keyboard navigation (with or without the screen reader) ensure that a logical order is followed when using the TAB key to navigate to input fields by setting each control's TabIndex property:

  • 레이블, 이미지, 아이콘, 셰이프 컨트롤 - 대화형 요소(예: 단추)를 나타내는 경우 TabIndex를 0으로 설정하고 장식 요소 또는 텍스트인 경우 TabIndex를 -1로 설정합니다.Label, Image, Icon, Shape contols - if they represent interactive elements (i.e.buttons) set TabIndex to 0; if they are decorative elements or text, set TabIndex to -1.
  • 탭 인덱스를 0보다 크게 설정하지 마세요.Avoid setting tab index higher than zero.

화면 판독기 지원Screen reader support

다음 소프트웨어 조합은 PowerApps를 화면 판독기와 함께 사용할 때 지원되는 권장 사항입니다.The following software combinations are the supported recommendations for consuming PowerApps with a screen reader:

  • Windows: Edge/NarratorWindows: Edge / Narrator
  • macOS: Safari/VoiceOvermacOS: Safari / VoiceOver
  • Android: PowerApps 앱/TalkbackAndroid: PowerApps app / Talkback
  • iOS: PowerApps 앱/VoiceOveriOS: PowerApps app / VoiceOver

만족스러운 화면 판독기 환경을 위해서는 다음을 수행하는 것이 좋습니다.To ensure a satisfying experience with the screen reader it is recommended to:

  • 모든 입력 컨트롤의 AccessibilityLabel 속성을 설정해야 합니다.Ensure all input controls have the AccessibilityLabel property set.
  • 이미지의 경우 AccessibilityLabel 을 적절한 설명으로 설정합니다.For images set AccessibilityLabel to an appropriate description.
    • 사진이 단추 또는 링크로 사용되지 않고(즉, 아이콘이 장식용으로만 사용됨) 화면 판독기에서 일지 않아야 하는 경우 AccessibilityLabel 이 비어 있거나 설정되어 있지 않아야 합니다.If a picture is not used as a button or a link (i.e. icon is there just for the decoration) and should not be read by the screen reader, make sure the AccessibilityLabel is empty or not set.
    • 사진이나 아이콘이 단추로 사용되는 경우에는 TabIndex 를 0으로, AccessibilityLabel 을 링크 설명으로 설정합니다.If a picture or an icon is used as a button, then set TabIndex to 0 and AccessibilityLabel to the link description.

멀티미디어Multimedia

모든 비디오에 자막이 있고 모든 오디오 녹음의 대본이 사용자에게 제공되는지 확인합니다.Ensure all videos are captioned and a transcript of all audio recordings is available to the user. 비디오 컨트롤에서는 ClosedCaptionsUrl 속성을 통해 WebVTT 형식의 선택 자막을 지원합니다.Video control suppports closed captions in WebVTT format via the ClosedCaptionsUrl property.

화면 판독기를 사용하도록 설정한 경우 타이머에서 단추 텍스트를 알리지 않지만 경과된 시간은 알립니다.Note that with the screen reader enabled, Timer does not announce button text, but how much time has passed. 타이머가 낮은 불투명도로 숨겨진 경우에도 알림을 끌 수 없습니다.Announcements can't be turned off, even if timer is hidden with low opacity.

서명 작업Working with signatures

PenInput 컨트롤을 사용하는 서명 필드가 있는 경우 서명 입력의 대체 방법을 사용하도록 설정해야 합니다.If you have a signature field that uses the PenInput control you need to enable an alternative method of signature input. 이 경우 사용자가 이름을 입력할 수 있는 TextInput 컨트롤을 표시하는 것이 좋습니다.The recommended way is to show a TextInput control where a user can type their name. 서명 지침은 AccessibilityLabel 속성에 배치되고 컨트롤은 펜 입력 옆 즉, 오른쪽이나 바로 아래에 배치됩니다.Ensure the signing instructions are placed in the AccessibilityLabel property and the control is placed close to the Pen input - to the right or immediately below.

관련:Related: