PowerApps에서 캔버스 앱의 접근성 검토Review a canvas app for accessibility in PowerApps

앱의 외관 및 동작 방식을 설계할 때 접근성을 고려할 경우 시각, 청각 또는 기타 장애가 있는 사용자는 캔버스 앱을 더 쉽고 성공적으로 사용할 수 있습니다.Users who have vision, hearing, or other impairments can use your canvas app more easily and successfully if you consider accessibility as you design how the app looks and behaves. 앱의 접근성 개선 방법을 잘 모르는 경우 PowerApps Studio에서 접근성 검사기를 실행할 수 있습니다.If you're not sure how to make your app more accessible, you can run the Accessibility checker in PowerApps Studio. 이 도구는 잠재적인 접근성 문제를 찾아낼 뿐만 아니라 각 문제가 특정 장애가 있는 사용자에게 잠재적인 문제가 될 수 있는 이유를 설명하고 각 문제의 해결 방법에 대한 제안을 제공합니다.This tool not only finds potential accessibility issues but also explains why each might be a potential problem for users who have a specific disability and offers suggestions on how to resolve each issue. 접근성 검사기는 사용자에 대한 화면 판독기 및 키보드 문제를 감지하고 액세스 가능한 색을 사용하여 색 대비 문제 해결 방법에 대한 정보를 찾을 수 있습니다.The Accessibility checker detects screen-reader and keyboard issues for you, and you can find information about how to fix color-contrast issues by using accessible colors.

접근성 검사기는 사용자가 바꾸고 싶은 설정을 식별하는 데 도움이 되지만, 항상 앱에서 실행해야 하는 기능 맥락에서 제안을 고려해야 합니다.The Accessibility checker helps you identify settings that you might want to change, but you should always consider the suggestions in the context of what your app needs to do. 많은 제안이 가치 있지만, 백해무익한 것은 무시해도 됩니다.Many suggestions may be worthwhile, but you can ignore any that might do more harm than good.

접근성 문제 찾기Find accessibility issues

  1. PowerApps Studio 오른쪽 위 모서리에서 앱 검사기 아이콘을 선택합니다.In the upper-right corner of PowerApps Studio, select the icon for the App checker.

    앱 검사기 아이콘

  2. 나타나는 메뉴에서 접근성을 선택합니다.In the menu that appears, select Accessibility.

    앱 검사기 창 및 옵션 목록

    문제 목록이 먼저 심각도, 그리고 화면 순서로 정렬되어 나타납니다.A list of issues appears, sorted first by severity and then by screen.

    접근성 검사기 창 및 화면 목록

  3. 항목에 대한 세부 정보를 표시하려면 옆의 화살표를 선택합니다.Select the arrow next to an item to show details about it.

    접근성 검사기 세부 정보

  4. 항목 목록으로 돌아가려면 뒤로 화살표를 선택합니다.Select the back arrow to return to the list of items.

  5. 문제를 해결하려는 경우 영향을 받는 속성을 선택하여 엽니다.If you decide to address an issue, select it to open the affected property.

  6. 하나 이상의 속성을 변경한 후 선택할 다시 검사를 선택하여 문제 목록을 업데이트합니다.After you change one or more properties, select Re-check to update the list of issues.

    해결된 항목이 목록에서 사라지고 새 항목이 나타날 수 있습니다.Resolved items disappear from the list, and new items may appear.

문제 심각도Severity of issues

접근성 검사기는 해당 문제의 심각성에 따라 오류, 경고 또는 팁으로 분류합니다.The Accessibility checker classifies each issue as an error, a warning, or a tip based the issue's severity.

  • 오류는 장애가 있는 사용자가 해당 앱을 사용 및 이해하기 어렵거나 불가능하게 만드는 문제를 나타냅니다.Errors identify issues that make the app difficult or impossible to use and understand for users who have a disability.
  • 경고는 장애가 있는 일부 사용자가 해당 앱을 사용 및 이해하기 어렵거나 불가능하게 만드는 문제를 나타냅니다.Warnings identify issues that make the app difficult to use or understand for most but not all users who have a disability.
  • 은 장애가 있는 사용자의 환경을 향상시키는 데 도움이 됩니다.Tips help you improve the experience of users who have a disability.

문제 유형Types of issues

문제 제목Issue Title 심각도Severity 문제 설명Issue Description 해결 방법How to fix 해결 이유Why fix
액세스 가능한 레이블 누락Missing accessible label 오류Error 대화형 컨트롤의 액세스 가능한 레이블 속성에 텍스트가 없을 경우When the accessible-label property of an interactive control contains no text. 대화형 컨트롤은 단추 그대로 원래 대화형이거나 대화형 속성이 있습니다.An interactive control can be inherently interactive, as a button is, or it has interactive properties. 예를 들어 이미지의 OnSelect 속성을 설정했거나 TabIndex 속성을 0 이상으로 설정했을 수 있습니다.For example, you might have set the OnSelect property of an image or set its TabIndex property to 0 or higher. 액세스 가능한 레이블 속성을 편집하여 항목을 설명합니다.Edit the accessible-label property to describe the item. 액세스 가능한 레이블에 텍스트가 없으면 화면을 볼 수 없는 사용자는 이미지와 컨트롤에 있는 것이 무엇인지 이해하지 못합니다.If the accessible-label property contains no text, people who can’t see the screen won't understand what’s in images and controls.
포커스가 표시되지 않음Focus isn't showing 오류Error 컨트롤의 FocusBorderThickness가 0으로 설정되어 있는 경우When the FocusBorderThickness of a control is set to 0. 분명하게 보이도록 포커스 경계와 컨트롤 자체 간에 적절한 색 대비 비율을 보장하는 것이 좋습니다.It is good practice to ensure a proper color-contrast ratio between the focus border and the control itself so it's clearly visible. FocusedBorderThickness 속성을 0보다 큰 값으로 변경합니다.Change the FocusedBorderThickness property to a value that's higher than 0. 포커스가 보이지 않을 경우 마우스를 사용하지 않는 사용자는 앱과 상호 작용하는 것을 볼 수 없습니다.If the focus isn't visible, people who don't use a mouse can't see it when they interact with the app.
캡션 누락Missing captions 경고Warning 오디오 또는 비디오 컨트롤의 ClosedCaptionsURL 속성이 비어 있는 경우When the ClosedCaptionsURL property of an Audio or Video control is empty. ClosedCaptionsURL 속성을 캡션에 대한 URL로 설정합니다.Set the ClosedCaptionsURL property to the URL for captions. 캡션이 없으면 장애가 있는 사용자가 비디오 또는 오디오 세그먼트로부터 정보를 파악할 수 없을 수 있습니다.Without captions, people who have disabilities might not get any information from a video or audio segment.
유용한 컨트롤 설정 누락Missing helpful control settings 경고Warning 여러 설정(예: 차트의 레이블 및 마커 표시, 오디오, 비디오펜 입력 컨트롤의 기본 컨트롤 표시) 중에서 해제되어 있는 경우When any of several settings (such as showing labels and markers for charts and showing default controls for Audio, Video, and Pen input controls) are turned off. 경고를 선택한 다음, 속성을 true로 설정합니다.Select the warning, and then set the property to true. 이 속성 설정을 변경하면 사용자에게 앱의 컨트롤이 기능하는 방식에 대한 더 나은 정보가 제공됩니다.By changing this property setting, you give the user better information about how the controls in your app function.
HTML에 액세스할 수 없음HTML won't be accessible 경고Warning HTML 텍스트 컨트롤 이외의 컨트롤에 HTML이 포함되어 있는 경우When a control other than an HTML text control contains HTML. 이런 경우 PowerApps는 사용자 지정 HTML 요소의 접근성을 지원하지 않습니다.In that case, PowerApps doesn't support accessibility of custom HTML elements. HTML 이외의 방법을 사용하거나 이 요소에서 HTML을 제거합니다.Use a method other than HTML, or remove the HTML from this element. 대화형 HTML 요소를 추가할 경우 앱이 제대로 작동하지 않거나 앱에 액세스할 수 없습니다.Your app won't work correctly or be accessible if you add interactive HTML elements.
자동 시작 기능 해제Turn off autostart 경고Warning 오디오 또는 비디오 컨트롤의 Autostart 속성이 true로 설정되어 있습니다.When an Audio or Video control's Autostart property is set to true. 컨트롤의 Autostart 속성을 false로 설정합니다.Set the control's Autostart property to false. 자동 재생되는 비디오 및 오디오 파일이 사용자의 집중을 방해할 수 있습니다.Video and audio files that play automatically can distract users. 사용자가 클립을 재생할지 선택하게 하세요.Let them choose whether to play a clip.
화면 이름 수정Revise screen name Tip 화면에 사용자가 앱을 탐색할 때 화면 판독기가 읽어낼 이름이 있는 경우When a screen has a default name, which will be read out by screen readers when users navigate the app. 화면의 내용 또는 용도를 설명하는 화면 이름을 지정합니다.Give the screen a name that describes what's on the screen or what it's used for. 시각 장애인, 시력이 약한 사용자나 읽기 장애가 있는 사용자가 화면 판독기를 사용해 화면 이름으로 탐색할 수 있습니다.People who are blind, have low vision, or a reading disability rely on screen names to navigate using the screen reader.
상태 추가 표시 텍스트Add State indication text Tip 컨트롤에 설정/해제와 같이 상태는 있지만, 값 레이블이 해제되어 있는 경우When a control that has a state, such as a toggle, but the value labels are turned off. 컨트롤의 ShowValue 속성을 true로 설정하여 현재 상태를 표시합니다.Set the ShowValue property of the control to true to show its current state. 컨트롤의 상태가 나타나지 않으면 사용자가 자신의 작업에 대한 확인을 받을 수 없습니다.Users won't get confirmation of their actions if the state of the control doesn't appear.
화면 항목의 순서 확인Check the order of the screen items Tip TabIndex 속성이 1보다 큰 경우When the TabIndex property is greater than 1. 앱 작성자는 TabIndex 속성을 1, 2, 3 및 4 등의 숫자 값으로 설정하여 사용자 지정 탭 순서를 설정할 수 있습니다.App creators can set custom tab orders by setting the TabIndex property to a numerical value such as 1, 2, 3, and 4. 이 팁은 이 화면의 대화형 순서를 검토하도록 알려 줍니다.This tip reminds you to review the interactive order for this screen. TabIndex 속성이 0인 설계를 따르는 것이 가장 좋습니다.As a best practice, follow a design in which the TabIndex property is 0. 화면 요소의 순서가 요소를 탭으로 이동하려는 순서와 일치하는지 확인합니다.Make sure that your screen elements match the order in which you'd want to tab through them. 화면 판독기가 앱의 요소를 읽을 때 덜 직관적인 순서 대신, 사용자가 보게 될 순서로 나타나야 합니다.When a screen reader reads the elements of an app, they should appear in the order in which a user would see them, instead of an order that's less intuitive.
다른 입력 방법 추가Add another input method Tip 앱에 컨트롤이 포함되어 있는 경우When an app contains a Pen control. 이 팁은 별도의 입력 방법을 포함하도록 알려 줍니다.This tip reminds you to include a separate method of input. 액세스할 수 있는 환경에 대한 컨트롤뿐만 아니라 텍스트 입력 컨트롤을 추가합니다.Add a Text input control in addition to the Pen control for an accessible experience. 일부 사용자는 펜을 사용할 수 없으며 다른 방법을 사용하여 정보를 입력해야 합니다(예: 서명 입력).Some users can't use a pen and require another way to provide information (for example, by typing a signature).

다음 단계Next steps