액세스 가능한 캔버스 앱에서 컨트롤 구성

앱의 컨트롤은 화면 읽기 프로그램 사용자가 순차적으로 탐색할 수 있도록 구성되어야 합니다. 또한 논리적 순서는 키보드 사용자의 혼동을 줄이고 생산성을 높이는 데 도움이 됩니다.

의미 있는 화면 이름

화면이 로드되면 화면 읽기 프로그램이 해당 이름을 말합니다. 사용자에게 알릴 의미 있는 이름을 선택합니다.

컨트롤 트리 또는 Power Apps Studio의 속성 패널에서 화면 이름을 변경할 수 있습니다. 화면 이름을 바꾸려면 화면을 선택한 다음 를 선택하세요.

화면의 첫 번째 요소는 이름입니다. 시각적으로 숨겨져 있으며 화면 읽기 프로그램 사용자만 액세스할 수 있습니다.

새 화면이 로드되면 Power Apps는 화면 이름에 포커스를 맞춥니다. 화면이 로드되는 즉시 SetFocus 를 사용하는 경우 화면 이름이 읽히지 않습니다. 눈에 띄는 제목을 만들고 이를 라이브 영역으로 만들어 컨텍스트의 변경 내용을 알리는 것을 고려합니다.

논리적 컨트롤 순서

화면 읽기 프로그램 사용자는 콘텐츠를 순차적으로 탐색할 수 있습니다. 순서는 컨트롤의 위치에 따라 위에서 아래로 시작하여 왼쪽에서 오른쪽으로 결정됩니다. 컨트롤의 크기는 중요하지 않습니다. X 와 Y 속성이 중요합니다.

이 예에서 A는 상단에 가장 가깝기 때문에 시퀀스에서 가장 먼저 나타납니다. B와 C는 동일한 수직 위치를 갖지만 B가 왼쪽에 더 가깝기 때문에 C보다 먼저 나타납니다. D는 맨 위에서 가장 멀기 때문에 마지막에 나타납니다.

참고

• 프리뷰 모드에서 앱을 편집할 때 성능상의 이유로 컨트롤 순서가 업데이트되지 않습니다. 앱이 게시되고 실행되면 순서가 정확해집니다.
• 컨트롤 순서는 Power Apps Studio의 컨트롤 트리 뷰에 표시된 것과 동일하지 않습니다. 트리 뷰는 앱에 추가된 시기에 따라 컨트롤을 정렬합니다. 앱이 실행될 때 컨트롤 순서에는 영향을 주지 않습니다.
• 컨트롤의 X 또는 Y 값이 표현식으로 설정된 경우 표현식 결과가 변경될 때 컨트롤 순서가 업데이트되지 않습니다. 식을 평가하기 위해 앱의 초기 상태를 사용하여 앱이 저장될 때 순서가 계산되고 수정됩니다.
  • 다른 컨트롤이 숨겨지거나 표시되어 위치를 변경하는 경우 자동 레이아웃 컨테이너를 사용하여 X 및 Y을 관리할 수 있습니다.
  • 표현식 값에 관계없이 모든 컨트롤을 논리적인 방식으로 배치할 수도 있습니다. 예를 들어, 컨트롤 A가 항상 컨트롤 B 아래에 있어야 하고 B가 때때로 숨겨질 수 있는 경우 A의 Y를 If(B.Visible, B.Y + B.Height, B.Y + 1)로 설정합니다. 1을 추가하면 B가 숨겨져 있더라도 A가 항상 B 아래에 있게 됩니다.

그룹화된 컨트롤

기본 순서는 격리 콘텐츠에는 적합하지만 그룹화된 콘텐츠에는 적합하지 않습니다. 사각형 컨트롤로 두 개의 타일을 나란히 놓습니다. 각 타일에는 제목이 있습니다. 제목 아래에는 수직으로 쌓인 두 개의 버튼이 있습니다. 첫 번째 타일은 A와 B, 다른 타일은 C와 D입니다.

기본 순서는 위에서 아래, 그 다음 왼쪽에서 오른쪽입니다. 따라서 컨트롤 순서는 다음과 같습니다.

1. 왼쪽 사각형
2. 오른쪽 사각형
3. 왼쪽 제목
4. 오른쪽 제목
5. A
6. C
7. B
8. D

이 구조는 A와 B가 함께 있고 마찬가지로 C와 D가 함께 있다는 것을 전달하지 않습니다.

관련 콘텐츠를 그룹화하려면 컨테이너 를 사용합니다. 컨테이너의 모든 컨트롤은 순서대로 함께 나타납니다. 컨테이너 내에서 컨트롤은 위에서 아래로, 왼쪽에서 오른쪽으로 같은 규칙으로 정렬됩니다.

이전 예의 사각형을 컨테이너로 교체하면 컨트롤 순서는 이제 화면 읽기 프로그램 사용자에게 논리적입니다.

1. 왼쪽 컨테이너
2. 왼쪽 제목
3. A
4. B
5. 오른쪽 컨테이너
6. 오른쪽 제목
7. C
8. D

양식 카드 의 모든 컨트롤과 갤러리 는 자동으로 그룹화되므로 컨테이너를 사용할 필요가 없습니다. 그러나 하위 그룹이 있는 경우에도 이에 대해 컨테이너를 사용해야 합니다.

이 예에서 갤러리 행에는 썸네일이 있고 왼쪽에 두 개의 텍스트가 있습니다. 오른쪽에는 두 개의 버튼이 있습니다. 시각적, 논리적으로 두 세트의 컨트롤을 그룹화해야 합니다. 이렇게 하면 화면 읽기 프로그램 사용자가 오른쪽 전에 왼쪽 그룹을 먼저 만나게 됩니다.

논리적 키보드 탐색 순서

TabIndex 는 키보드 사용자가 컨트롤에 접근 할 수 있는 방법을 지정합니다. TabIndex는 0 또는 -1이어야 합니다. 위에서 설명한 논리적 컨트롤 순서를 사용하면 TabIndex가 0보다 클 이유가 없습니다.

키보드 탐색 순서는 컨트롤의 시각적 흐름을 따라야 합니다. 탐색 순서가 예상치 못한 경우 먼저 앱 구조가 논리적인지 확인해야 합니다.

참고

키보드 탐색 순서는 컨트롤 순서와 동일하지 않습니다. TabIndex는 Tab 키 탐색에만 영향을 줍니다. 화면 읽기 프로그램 사용자가 앱을 선형으로 탐색하는 방법은 변경되지 않습니다. 일부 화면 읽기 프로그램 사용자는 키보드도 사용하지 않습니다.

사용자 지정 탭 색인 피하기

사용자 지정 탭 색인은 0보다 큰 색인입니다. 그것들은 거의 항상 나쁜 디자인의 신호입니다. 적절한 앱 구조를 만들거나 SetFocus 를 사용하여 포커스를 변경하는 것과 같은 더 나은 대안이 있습니다.

다음과 같은 이유로 사용자 지정 탭 색인을 사용하지 마십시오.

접근성

사용자 지정 탭 색인이 있으면 심각한 접근성 문제가 생깁니다. 화면 리더 사용자는 논리적 구조를 사용하여 앱을 탐색합니다. 사용자 지정 탭 색인은 해당 구조를 무시합니다. 화면 리더 사용자는 탭 키를 사용하여 탐색할 수도 있으므로 다른 탐색 방법과 다른 순서를 입력하면 혼동될 수 있습니다.

사용성

일부 항목을 건너뛴 것처럼 보이면 사용자가 혼동할 수 있습니다. 포커스가 예측할 수 없는 순서로 움직일 때 방향 감각을 잃을 수 있습니다. 이것은 인지 장애가 있는 사용자에게 훨씬 더 문제가 됩니다.

유지 관리

앱 제작자는 새 컨트롤이 삽입될 때마다 여러 컨트롤의 TabIndex를 수동으로 업데이트해야 합니다. 업데이트를 놓치거나 순서가 잘못되기 쉽습니다.

실적

사용자 지정 탭 인덱스를 지원하려면 Power Apps 시스템이 페이지의 모든 컨트롤을 검사하고 적절한 순서를 계산해야 합니다. 이 계산은 집중적인 프로세스입니다. 갤러리와 같은 컨테이너 컨트롤에는 TabIndex가 하위 컨트롤에 대해 작동하는 방식에 대한 복잡한 규칙이 있습니다. 시스템은 이러한 규칙을 준수하기 위해 앱 제작자가 원하는 TabIndex를 다른 값으로 매핑합니다. 이것이 모든 컨트롤에 대해 TabIndex가 0으로 설정되어 있어도 실제 HTML tabindex가 양수인 이유입니다.

다른 구성 요소와 통합

사용자 지정 탭 색인은 기본 제공 컨트롤에서만 작동합니다. Power Apps의 탭 색인 시스템에 통합되지 않은 컨트롤에는 예기치 않은 탐색 순서가 있습니다. 이것은 코드 구성 요소에 문제가 될 수 있습니다. 이러한 구성 요소의 개발자는 대화형 요소를 추적하고 탭 색인을 설정해야 합니다. 탭 색인을 사용자 지정하는 방법조차 제공하지 않는 타사 라이브러리를 사용할 수 있습니다. 반면에 모든 탭 색인이 0 또는 -1이면 Power Apps의 탭 색인 시스템을 포함할 필요가 없습니다. 앱에 포함된 모든 타사 구성 요소는 자동으로 올바른 탭 순서를 가져옵니다.

반대로 캔버스 앱이 다른 웹 페이지에 포함된 경우 사용자 지정 탭 색인이 작동하지 않습니다. 예를 들어, 사용자 지정 페이지에서. Power Apps은 캔버스 앱 외부의 요소를 제어할 수 없으므로 전체 탭 탐색 순서가 비논리적입니다.

기본 탭 색인(프리뷰)

탭 색인이 0 또는 -1인지 확인하려면 설정 > 예정된 기능에서 앱 기능 기본 탭 색인을 활성화하세요.

중요

• 이는 프리뷰 기능입니다.
• 미리 보기 기능은 생산용으로 만들어진 것이 아니므로 기능이 제한될 수 있습니다. 이러한 기능은 공식 릴리스 이전에 제공되므로 고객이 조기에 액세스하고 피드백을 제공할 수 있습니다.

이 기능이 활성화되면 0보다 큰 모든 TabIndex 값은 0으로 처리됩니다. 이것은 또한 위에서 설명한 것처럼 다른 구성 요소와 더 잘 통합될 수 있도록 Power Apps의 탭 색인 시스템을 비활성화합니다.

사용자 지정 탭 순서에 대한 해결 방법

키보드 탐색 순서가 시각적 순서와 달라야 하는 드문 시나리오의 경우 동일한 효과를 갖도록 컨테이너 컨트롤을 주의해서 배치할 수 있습니다.

아래 예에서 버튼 A는 버튼 B 위에 있습니다. 자연스러운 탭 탐색 순서는 A, B 순입니다.

탭 탐색 순서를 반대로 하려면 B를 컨테이너 컨트롤에 넣습니다. 컨테이너의 Y 값을 A보다 높게 설정합니다. 이제 앱 구조에는 A 앞에 컨테이너(및 B)가 있습니다. 따라서 탭 탐색 순서는 B, A 순입니다.

이 기술을 사용하면 화면 리더 사용자가 탭 키 없이 탐색할 때 A보다 B가 먼저 표시됩니다.

다음 단계

Power Apps에서 액세스 가능한 색

참조 항목

• 액세스 가능한 앱 만들기
• 캔버스 앱에서 보조 기술의 콘텐츠 표시 또는 숨기기
• 캔버스 앱에서 라이브 영역으로 동적 변경 사항 알림
• 접근성 검사기 사용
• 캔버스 앱의 접근성 제한 사항
• 접근성 속성