키보드 전용 접근성에 대한 Oracle JET 앱 테스트

소개

접근성 문제 식별 학습 경로의 두번째 자습서입니다.

WCAG(Web Content Accessibility Guidelines) 2.2에서는 액세스 가능한 웹 앱 생성에 대한 여러 성공 조건을 간략히 설명합니다. 이 자습서에서는 키보드 전용 사용을 처리하는 조건에 대해 중점적으로 설명합니다.

키보드 전용 액세스가 가능한 앱은 이동성이 제한적이거나 마우스를 조작할 수 없는 사용자를 위해 대체 입력 장치와 함께 사용할 수 있습니다. 사람들이 키보드를 사용할 수 있으면 인터넷이 손끝에 있습니다.

목표

이 자습서에서는 웹 앱의 키보드 전용 테스트를 수행하는 방법에 대해 알아봅니다.

필수 조건

작업 1: 키보드 전용 접근성 테스트 준비

시각적 검사는 액세스 가능한 페이지의 구조 및 기본 기능에 대한 개요를 제공합니다. 키보드 전용 테스트는 수동 접근성 테스트의 중심에 있으며 개발자에게 사용 안함으로 설정된 사용자의 관점에서 앱과 상호 작용할 수 있는 기회를 제공합니다. 이 자습서가 중점적으로 다루는 WCAG 2.2 성공 기준의 하위 세트에는 몇 가지 구체적인 개념이 포함됩니다.

이 섹션의 시작 부분에 언급 된 성공 기준은 간접적으로 포커스 가능한 요소의 개념을 다루므로 두 가지 용어를 정의해야합니다.

이러한 적용 가능한 개념을 정의하고 설명하면 스타터 앱을 테스트할 준비가 된 것입니다.

Success Criterion 2.1.3의 괄호에 포함된 "No Exception" 텍스트를 확인합니다. 이는 키보드 접근성이 필수임을 의미합니다.

WCAG 지침 2.1 및 이 지침을 따르는 성공 기준은 키보드 접근성에 대한 절대적 필요성을 강조합니다. 키보드는 모든 사람에게 기술을 제공하는 데 중요한 역할을 합니다.

작업 2: 시각적 포커스의 존재 여부 확인

키보드 전용 접근성 테스트는 포커스 표시기에만 의존합니다. 다음 "포커스 표시" 성공 기준을 준수하는 것은 협상할 수 없습니다. 사용 안함으로 설정된 사용자는 활성 포커스가 없거나 포커스 배치가 명확하지 않은 경우 앱을 탐색할 수 없습니다.

웹 앱을 탭할 때 포커스 위치를 식별하는 표시기가 항상 있어야 합니다. 표시기는 일반적으로 사각형입니다. 포커스 사각형을 사용 안함으로 설정하면 이 기준이 실패합니다.

앱 개발자는 자신이 작성한 앱과 프로그램에 자부심을 가지고 있습니다. 그들의 목표는 시각적으로 매력적인 경험과 기능을 통합하는 것입니다. 포커스 직사각형은 종종 디자인에서 떨어집니다; 따라서 개발자는 종종 그것을 숨기거나 비활성화하고 성공 기준 2.4.7을 위반.

초점 사각형 1

초점 사각형 1

초점 직사각형 2

초점 직사각형 2

위의 두 스크린샷에서 포커스를 찾습니다.

첫번째 스크린샷인 Focus Rectangle 1은 포커스가 올바른 것으로 표시된 페이지를 나타냅니다. 포커스 표시기는 페이지 왼쪽 상단에 있는 Overview 탭을 둘러싸고 있으므로 매우 분명합니다. 두번째 스크린샷인 Focus Rectangle 2에는 Overview 탭에 포커스가 있음을 나타내는 표시가 없습니다.

Introduction 페이지에서 포커스 가능한 처음 몇 개의 구성 요소를 살펴볼 때 포커스 사각형을 확인합니다.

  1. 앱이 아직 실행 중이 아닌 경우 ACCLearningPath 폴더로 이동하여 앱을 시작합니다.

    $ ojet serve

  2. 앱이 브라우저에서 열리면 <Ctrl+L> 키를 눌러 주소 표시줄에 포커스를 설정한 다음 <Tab> 키를 눌러 탐색 건너뛰기 링크로 포커스를 이동합니다.

  3. 페이지 오른쪽 상단의 사용자 메뉴에서 포커스를 john.hancock@oracle.com로 이동하려면 <Tab> 키를 누릅니다.

  4. 사용자 메뉴 바로 아래의 기본 탐색 메뉴에서 포커스를 소개로 이동하려면 <Tab>를 누릅니다.

  5. 탐색 메뉴에서 포커스를 Resources로 이동하려면 <down arrow>를 누르고 [리소스] 페이지를 로드하려면 <Enter>를 누릅니다.

    리소스 페이지

  6. 포커스를 Oracle JET 기본 사이트 링크로 이동하려면 <Tab> 키를 누릅니다.

    포커스 위치에 대한 명확한 표시는 없습니다. 자원 페이지가 성공 기준 2.4.7에 실패합니다.

    다음 단계에서는 WCAG 표준을 준수하기 위해 부재 포커스 직사각형 문제를 해결합니다.

  7. ACCLearningPath/src/js/views 폴더로 이동하여 코드 편집기에서 resources.html 파일을 엽니다.

  8. Oracle JET 기본 사이트에 대한 링크를 찾습니다.

    <li><a style="outline-width:0"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

    style 속성에서 "outline-width:0"를 "outline-width:3"로 변경합니다.

    <li><a style="outline-width:3"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

  9. resources.html를 저장하고 닫습니다.

    파일은 resources-html.txt와 유사해야 합니다.

  10. 위의 2~6단계를 반복하여 포커스 직사각형이 표시되는지 확인합니다.

작업 3: 의미 있는 탭 시퀀스 확인

키보드 전용 테스트의 다음 단계는 사용자 탭으로 페이지를 구성하는 것입니다.

초점 순서는 그림으로 가장 잘 이해할 수 있습니다. 사용자가 페이지를 탭할 때 포커스 위치는 임의가 아닙니다. 페이지의 한쪽에서 다른 쪽으로 다시 이동하지 않습니다. 그것은 예상하고 논리적 인 방식으로 움직입니다.

이전 시각적 포커스의 존재 여부 확인 작업에서 포커스가 페이지 배너를 통해 예상된 순서로 이동한 방법을 확인했지만 리소스 페이지 자체는 보다 무작위적인 탭 순서를 나타내도록 코딩되었습니다.

  1. 실행 중인 앱에서 <Ctrl+L> 키를 눌러 주소 표시줄에 포커스를 설정합니다.
  2. 탐색 건너뛰기 링크로 포커스를 이동하려면 <Tab> 키를 누릅니다.
  3. 페이지 오른쪽 상단의 사용자 메뉴에서 포커스를 john.hancock@oracle.com로 이동하려면 <Tab> 키를 누릅니다.
  4. 주 탐색 메뉴의 소개로 포커스를 이동하려면 <Tab> 키를 누릅니다.
  5. 페이지 본문의 Oracle JET 기본 사이트 링크로 포커스를 이동하려면 <Tab>를 누릅니다.

  6. <Tab>을 누릅니다. 포커스는 Oracle JET Developer's Guide로 이동하고 대신 Oracle JET Cookbook 링크로 이동해야 합니다.

    Oracle JET Developer's Guide 링크가 성공 기준 2.4.3을 위반하는 탭 순서에 없습니다.

    7-11단계에서는 Oracle JET Developer's Guide 링크를 탭 시퀀스의 올바른 위치로 반환하는 데 필요한 방법에 대해 설명합니다. 단계 12 - 16은 수정이 작동했는지 확인하는 방법을 보여줍니다.

  7. 코드 편집기에서 resources.html 파일에서 Oracle JET Developer's Guide 링크를 찾습니다.

    <li><a tabindex="-1"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    tabindex="-1" 속성은 이 링크를 페이지의 탭 순서에서 완전히 벗어납니다.

  8. tabindex 속성의 값을 0로 수정하여 링크를 페이지의 탭 시퀀스에서 적절한 위치로 반환합니다.

    <li><a tabindex="0"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

  9. 파일을 저장하고 닫습니다. 브라우저의 리소스 페이지는 새 콘텐츠로 자동으로 새로 고쳐집니다.

  10. 주소 표시줄에 포커스를 설정하려면 <Ctrl+L> 키를 누릅니다.

  11. 탐색 메뉴의 소개로 포커스를 이동하려면 <Tab>를 세 번 누릅니다.

  12. 포커스를 Oracle JET 기본 사이트 링크로 이동하려면 <Tab> 키를 누릅니다.

  13. 포커스를 Oracle JET Developer's Guide 링크로 이동하려면 <Tab> 키를 누릅니다.

  14. 페이지 바닥글의 Oracle 정보 링크에 포커스가 올 때까지 <Tab> 키를 계속 누릅니다.

    페이지에서 포커스 가능한 모든 요소를 탐색했으면 프로세스를 취소합니다. 때때로 시프트 탭이 페이지를 거꾸로 이동하면 경로가 예기치 않게 변경되거나 새 요소가 나타나거나 일부 요소가 사라집니다.

  15. <Shift+Tab>를 사용하여 페이지를 거꾸로 탐색하는 동안 의미 있는 시퀀스가 true로 유지되도록 하향식 순서로 이동합니다.

작업 4: 컨트롤과 상호 작용

이 자습서에서 사용되는 대부분의 컨트롤은 Oracle JET 관련 컨트롤입니다. Oracle JET의 특징은 해당 구성 요소가 이미 내장된 키보드 전용 접근성으로 설계되었다는 것입니다. Oracle JET를 사용하는 개발자는 Oracle JET Cookbook에서 직접 구성 요소를 복사하여 제자리에 놓을 수 있으며 결과 코드에 액세스할 수 있습니다.

예를 들어, 다음은 표준 HTML 구성 요소와 상호 작용하기 위한 일반적인 키 입력의 간략한 목록입니다.

주: 탐색 메뉴, 탭 표시줄, 라디오 그룹 및 유사한 그룹 컨트롤과 같은 특정 컨트롤의 경우 컨트롤을 탭한 다음 화살표 키를 사용하여 컨트롤 내에서 이동해야 할 수 있습니다.

실행 중인 시작 앱을 사용하여 여러 Oracle JET 구성요소와 상호 작용합니다.

  1. 주소 표시줄에 포커스를 설정하려면 <Ctrl+L> 키를 누릅니다.

  2. 탐색 건너뛰기 링크로 포커스를 이동하려면 <Tab> 키를 누릅니다.

  3. 페이지 오른쪽 상단의 사용자 메뉴에서 포커스를 john.hancock@oracle.com로 이동하려면 <Tab> 키를 누릅니다.

    <oj-menu-button> 요소의 키보드 설명서에 따르면 <Space>, <Enter> 또는 <down arrow>를 누르면 메뉴가 열리고 <Escape>를 누르면 메뉴가 닫힙니다.

  4. 사용자 메뉴를 확장하려면 <Space>을 누릅니다. 포커스가 환경설정으로 이동합니다.

  5. 메뉴 항목 목록 아래로 이동하려면 <down arrow> 키를 누릅니다.

  6. <Escape> 키를 눌러 사용자 메뉴를 닫습니다.

  7. <Tab>을 누릅니다. 포커스가 사용자 메뉴 바로 아래의 기본 탐색 메뉴에서 소개로 이동합니다.

    각 Oracle JET 구성 요소의 특정 키 입력에 대한 자세한 내용은 Oracle JET 키보드 및 제스처 안내서를 참조하십시오.

작업 5: 키보드 트랩 식별

이 자습서의 시작 부분에서 소개된 마지막 항목에는 키보드 트랩이라는 개념이 포함됩니다. 사용자가 <Tab>, <Shift+Tab> 또는 화살표 키를 사용하여 페이지의 요소에서 포커스를 이동할 수 없는 경우 키보드 트랩이 발생합니다.

키보드 트랩은 키보드 전용 사용자에 대해 전체 페이지를 사용할 수 없게 만듭니다. 키보드 트랩의 일반적인 해결 방법은 앱을 다시 시작하는 것입니다.

실용화합시다!

이 자습서 섹션에서는 키보드 전용 테스트 방법론에 대한 자세한 예를 제공합니다.

앱의 조직 페이지를 테스트할 때 포커스 위치를 항상 표시하고 포커스가 예측 가능한 패턴으로 이동하는지 확인합니다.

테스트할 페이지는 소개 페이지의 조직 탭을 통해 액세스됩니다.

조직 페이지

시작 앱을 사용하여 조직 페이지의 키보드 테스트를 수행합니다.

  1. 앱의 리소스 페이지에서 <Ctrl+L> 키를 눌러 주소 표시줄에 포커스를 설정합니다.

  2. 탐색 건너뛰기 링크로 포커스를 이동하려면 <Tab> 키를 누릅니다.

  3. 페이지 오른쪽 상단의 사용자 메뉴에서 포커스를 john.hancock@oracle.com로 이동하려면 <Tab> 키를 누릅니다.

  4. 사용자 이름 아래의 기본 탐색 메뉴에서 포커스를 소개로 이동하려면 <Tab>를 누릅니다.

    <oj-navigation-list> 요소의 키보드 설명서에 따르면 <up arrow> 및 <down arrow> 키를 사용하여 기본 탐색 메뉴의 항목을 탐색합니다.

  5. <Enter> 키를 눌러 소개를 선택합니다.

  6. 탭 표시줄의 조직 탭으로 포커스를 이동하려면 <Tab>, <right arrow>를 차례로 누릅니다. 조직 페이지를 로드하려면 <Enter> 키를 누릅니다.

    <oj-tab-bar> 요소의 키보드 설명서에 따르면 화살표 키를 사용하여 탭 표시줄 내에서 이동합니다.

  7. 포커스를 트리 뷰로 이동하려면 <Tab> 키를 누릅니다. 포커스 가능한 첫 번째 항목인 회계 노드에 토지를 포커스합니다.

    <oj-tree-view> 요소의 키보드 설명서에 따르면 <up arrow> 및 <down arrow> 키를 사용하여 트리 보기의 노드 간을 탐색합니다.

  8. 트리에서 Accounting 그룹 노드를 확장하려면 <right arrow>을 누르고, 그룹 노드를 축소하려면 <left arrow>을 누릅니다.

  9. <down arrow>를 두 번 눌러 포커스를 RESEARCH 그룹 노드의 직원 JONES로 이동합니다. 그런 다음 <Enter> 키를 눌러 선택합니다.

    직원 세부정보와 함께 페이지 오른쪽에 양식이 나타납니다.

    사원 상세내역 화면이 있는 조직 탭

  10. 포커스를 직원 ID 필드로 이동하려면 <Tab>을 누릅니다.
  11. 포커스를 직원 이름 필드로 이동하려면 <Tab>을 누릅니다.
  12. 포커스를 직책 필드로 이동하려면 <Tab> 키를 누릅니다.

  13. <Tab>을 눌러 포커스를 고용 일자 필드로 이동하고 확장된 캘린더 그리드를 표시합니다.

    <oj-date-picker> 요소의 키보드 설명서에 따르면 화살표 키를 눌러 달력 그리드 내에서 날짜 포커스를 변경합니다.

  14. <down arrow>을 누른 다음 화살표 키를 사용하여 확장된 일자 선택기의 일자로 포커스를 이동합니다. 그런 다음 <Enter>를 눌러 일자를 선택합니다.

  15. 포커스를 임금 필드로 이동하려면 <Tab> 키를 누릅니다.

    <oj-input-number> 요소의 키보드 설명서에 따르면 <up arrow>를 사용하여 급여 값을 늘리고 <down arrow>를 사용하여 급여 값을 줄입니다.

  16. <Tab> 키를 누르고 포커스를 관리자 ID 필드로 이동하려고 시도합니다.

    포커스가 임금 필드로 이동한 후 <Tab> 또는 <Shift+Tab>을 눌러 필드 밖으로 포커스를 이동하지 않았음을 확인했습니까? 이 필드에는 키보드 트랩이 있습니다. 코드에 대한 수정이 없으면 트랩을 종료하는 유일한 방법은 페이지를 새로 고치는 것입니다.

작업 6: 트랩 제거

  1. src/js/views 폴더로 이동하여 편집기에서 organization.html 파일을 엽니다.

  2. id="salary"에서 <oj-input-number> 요소를 찾습니다.

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1"
   on-blur="[[setKeyTrap]]">
</oj-input-number>

    키보드 트랩을 발생시키는 on-blur 속성을 제거합니다.

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1">
</oj-input-number>

  3. 파일을 저장합니다. 그런 다음 이전 Identify a Keyboard Trap 작업의 단계를 반복하여 키보드 트랩이 제거되었는지 확인합니다.

  4. 관리자 ID 필드에 도달하면 <Tab> 키를 눌러 포커스를 작업 라디오 버튼으로 이동합니다.

    <oj-radioset> 요소의 키보드 설명서에 따르면 <up arrow>를 사용하여 그룹에서 이전 버튼을 선택합니다. <down arrow>를 사용하여 그룹에서 다음 단추를 선택합니다.

  5. 페이지의 바닥글 섹션에 있는 Oracle 정보 링크로 포커스를 이동하려면 <Tab>을 누릅니다.

  6. 프로세스를 취소합니다. <Shift+Tab> 키를 눌러 Jobs 라디오 버튼으로 돌아갑니다. 계속해서 <Shift+Tab> 키를 눌러 사용자 메뉴의 john.hancock@oracle.com로 페이지를 뒤로 이동합니다.

Oracle JET 구성 요소 내에서 사용하거나 탐색하는 데 필요한 키 입력과 관련된 질문이 있으면 Oracle JET 키보드 및 제스처 설명서를 참조하십시오.

키보드 전용 테스트 단계가 완료되었습니다.

다음단계

이 모듈의 다음 자습서로 이동합니다.

이 자습서는 접근성 문제 식별 모듈의 일부입니다.

접근성 학습 경로의 기본 페이지로 돌아가 접근성에 대한 모든 모듈에 접근할 수 있습니다.

추가 학습 자원

docs.oracle.com/learn에서 다른 랩을 탐색하거나 Oracle Learning YouTube 채널에서 더 많은 무료 학습 콘텐츠에 액세스하세요. 또한 education.oracle.com/learning-explorer를 방문하여 Oracle Learning Explorer가 되십시오.

제품 설명서는 Oracle Help Center를 참조하십시오.