복합 Oracle JET 구성요소에서 키보드 탐색 테스트

소개

ACCLearningPath 앱에서 Departments 탭을 처음 살펴봅니다. 이 접근성 시리즈의 이전 학습 경로에 설명된 검토 프로세스를 따라 접근성 문제가 식별됩니다.

목표

이 자습서에서는 ACCLearningPath 앱의 부서 탭에서 접근성 문제를 식별하고 수정하는 방법에 대해 알아봅니다.

필수 조건

• JavaScript 런타임, Node.js 및 Oracle JET 릴리스 13.0 이상 명령줄 인터페이스가 설치된 Oracle JET 앱을 생성하도록 설정된 개발 환경입니다.
• Oracle JET 개발자 쿡북 이용
• Oracle JET 키보드 및 제스처 가이드에 액세스
• 이 학습 경로에서 이전 자습서 완료, Oracle JET 구성요소 테이블 및 메시지의 접근성 확인

작업 1: 페이지 구조 검토

1. 터미널 window에서 ACCLearningPath 폴더로 이동하여 앱을 실행합니다.

   $ ojet serve
   

   브라우저의 앱이 Overview 탭이 로드되어 Introduction 페이지로 열립니다.

2. 탭 표시줄에서 부서 탭을 클릭하고 페이지 구조를 평가합니다. Departments 페이지는 세 개의 패널로 구성되며, 각 패널은 다양한 Oracle JET 구성 요소를 사용하여 부서 데이터를 표시합니다.

   

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

4. 파일에서 주 <div> 태그를 찾습니다.

   <div class="oj-hybrid-padding">
      <div id="mainContainer" class="oj-flex" style="width:100%;">
   

5. 두 개의 <div> 태그 사이에 h3 머리글을 삽입하여 Departments 페이지를 식별합니다.

   <div class="oj-hybrid-padding">
      <h3>Departments</h3>
      <div id="mainContainer" class="oj-flex" style="width:100%;">
   

6. 필름 스트립이 포함된 가운데 패널을 정의하는 <div> 태그를 찾습니다.

   <div class="oj-flex-item fs-container">
      <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
         . . . >
   

7. 여는 <div> 및 <oj-filmstrip> 태그 사이에 h4 머리글을 삽입하여 패널을 식별하고 필름 스트립에 표시되는 레이블을 제공합니다.

   <div class="oj-flex-item fs-container">
      <h4>Departments Film Strip</h4>
      <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
         . . . >
   

8. 데이터 그리드가 포함된 왼쪽 패널을 형성하는 <div> 태그를 찾습니다.

   <div class="oj-flex-item">
      <oj-data-grid id="datagrid"
         style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
         . . . >
   

9. <div> 및 <oj-data-grid> 태그 사이에 h4 머리글을 삽입하여 패널을 식별하고 데이터 그리드에 표시되는 레이블을 제공합니다.

   <div class="oj-flex-item">
      <h4>Departments Data Grid</h4>
      <oj-data-grid id="datagrid"
         style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
         . . . >
   

10. 차트가 포함된 세번째 패널을 형성하는 여는 <div> 태그를 찾습니다.

      <div class="oj-flex-item oj-sm-margin-4x-horizontal">
         <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
            . . . >
    

11. 여는 <div> 및 <oj-chart> 태그 사이에 h4 머리글을 삽입합니다. 이 머리글은 패널을 식별하며 차트의 시각적 레이블 역할을 합니다.

      <div class="oj-flex-item oj-sm-margin-4x-horizontal">
         <h4>Salaries by Department</h4>
         <oj-chart id="pieChart"
            type="bar"
            data="[[chartDataProvider]]"
            animation-on-display="auto"
            animation-on-data-change="auto"
            . . . >
    

12. 파일을 저장합니다. 브라우저에서 앱의 부서 탭에 대한 변경사항을 확인합니다.

    

작업 2: 키보드 전용 테스트 수행

접근성 검토의 두 번째 부분은 앱의 부서 탭에 대한 키보드 전용 테스트를 수행하는 것입니다.

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

2. <Tab>을 누릅니다. 포커스가 탐색 건너뛰기 링크로 이동합니다.

3. <Tab>을 누릅니다. 포커스가 페이지 오른쪽 상단의 사용자 메뉴에서 [e-mail]로 이동합니다.

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

5. <Tab>을 누릅니다. 포커스가 탭 표시줄의 개요로 이동합니다.

6. <Tab>을 누릅니다. 포커스가 필름스트립의 회계로 이동합니다.

7. 필름스트립의 다음 항목인 Research로 이동하려면 <right arrow> 키를 누릅니다.

8. 필름스트립의 회계로 돌아가려면 <left arrow> 키를 누릅니다.

9. <right arrow>를 세 번 누릅니다. 포커스가 필름 스트립의 마지막 항목인 Operations로 이동합니다.

10. <Tab>을 누릅니다. 포커스가 ID 열 아래의 데이터 그리드에서 첫번째 데이터 본문 셀로 이동합니다. 집중된 셀의 값은 10입니다.

11. <right arrow> 키를 누릅니다. 포커스가 데이터 그리드의 두 번째 열인 이름 아래의 회계로 이동합니다.

12. <right arrow> 키를 누릅니다. 포커스가 데이터 그리드의 최종 열인 위치에서 뉴욕으로 이동합니다.

    도시 이름이 포함된 셀 주위에 포커스 윤곽선이 나타납니다.

13. <F2> 키를 누릅니다. 포커스 개요는 셀에 New York 텍스트만 둘러싸도록 강화됩니다.

    <oj-data-grid> 요소의 키보드 설명서에 따르면 <F2>를 사용하여 셀 내용을 실행 가능하게 만듭니다. <F2> 함수 키를 사용하면 활성 구성요소에서 지원되는 작업을 시작할 수 있습니다. 이 경우 셀에는 활성화할 Google 지도에 대한 링크가 포함됩니다.

14. <Enter> 키를 눌러 New York 링크를 활성화합니다. 새 브라우저 창이 열리고 뉴욕의 Google지도 페이지가 열립니다.

15. <Ctrl+F4> 키를 눌러 Google Maps 창을 닫습니다.

16. <Esc>를 누릅니다. 포커스 아웃라인은 세번째 열에 New York이 포함된 셀을 둘러싸도록 확장됩니다.

    <oj-data-grid> 요소의 키보드 설명서에 따르면 다른 구성 요소로 계속 이동할 수 있도록 <Esc>를 사용하여 작업 가능 모드를 종료합니다.

17. <Tab>을 누릅니다. 포커스가 막대 차트의 첫 번째 막대로 이동합니다.

작업 3: 화면 판독기 검증 수행

접근성 검토의 마지막 부분은 화면 판독기 검증입니다. 다음 검증 단계는 JAWS 화면 판독기 사용을 기반으로 하지만 NVDA 화면 판독기를 사용하는 경우 결과가 유사합니다.

1. 터미널 창에서 <Ctrl+C>를 눌러 실행 중인 앱을 종료하고, 프롬프트가 표시되면 y를 입력합니다.

2. 스크린 리더를 시작한 다음 웹 앱을 다시 시작합니다.

   $ ojet serve
   

   앱이 브라우저에서 자동으로 열립니다. 페이지가 완전히 로드되면 스크린 리더가 읽기를 시작합니다.

3. 탭 표시줄에서 부서 탭을 클릭합니다. 이 지점 뒤에는 마우스를 사용하지 마십시오.

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

5. <Tab>을 누릅니다. JAWS는 "기본 콘텐츠로 건너뛰기"를 읽습니다. 같은 페이지 링크입니다."

6. <Tab>을 누릅니다. JAWS는 "배너 지역. 도구 모음입니다. [e-mail] 단추 메뉴입니다. 스페이스를 눌러 메뉴를 활성화한 다음 화살표 키를 사용하여 탐색합니다."

7. <Tab>을 누릅니다. JAWS는 "탐색 영역 탭"이라고 말합니다. 소개 탭이 선택되었습니다. 1/2입니다."

8. <Tab>을 누릅니다. JAWS는 "기본 영역 탭"이라고 말합니다. 부서 탭이 선택되었습니다. 4/4입니다."

9. 포커스를 필름 스트립으로 이동하려면 <Tab> 키를 누릅니다. JAWS는 "회계"라고 말합니다. 뉴욕 직원 3명 1/4페이지를 표시하는 중입니다."

10. 포커스를 데이터 그리드로 이동하려면 <Tab> 키를 누릅니다. JAWS는 "4개의 행과 3개의 열이 있는 데이터 그리드입니다. ID입니다. [이름]. 위치." 열 헤더를 읽은 후 화면 판독기는 테이블의 데이터 바디 셀을 왼쪽에서 오른쪽으로 읽습니다. 그런 다음 현재 포커스인 "행 1"을 읽습니다. 열 1. ID: 10."

11. <right arrow> 키를 누릅니다. JAWS는 "열 2. 이름: 회계

12. <right arrow> 키를 누릅니다. JAWS는 "열 3. 위치: 뉴욕 컨트롤을 포함합니다. 마지막 열에 도달했습니다."

13. <Tab>을 누릅니다. JAWS는 "데이터 시각화: 차트"라고 말합니다. 그래픽. 시리즈 : 회계; 그룹 : 부서; 가치 : USD 3,750.00. 그래픽."

    포커스가 패널 사이에서 이동함에 따라 JAWS는 패널 머리글을 표시하지 않습니다. 또한 페이지에서 페이지로 필름스트립을 스크롤할 수 있는 방법이 없습니다.

14. 코드 편집기에서 departments.html 파일을 엽니다.

    • 성공 기준 4.1.2 이름, 역할, 값을 사용하려면 세 패널의 각 구성요소에 레이블이 연결되어 있어야 합니다. level-4 머리글은 보이는 레이블로 사용됩니다.
    • 이름의 성공 기준 2.5.3 레이블에서는 머리글의 전체 텍스트가 레이블에 포함되어야 합니다. 다음 단계 18-23에 추가된 aria-label 속성은 패널에 대한 머리글 텍스트를 통합합니다.

15. 여는 <oj-film-strip> 태그를 찾아 aria-label 속성을 추가합니다.

      <oj-film-strip id="deptFilmstrip"
         max-items-per-page="1"
         aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
         arrow-visibility="hidden"
         class="demo-stretch-items"
         . . . >
    

16. 여는 <oj-data-grid> 태그를 찾아 aria-label 속성을 추가합니다.

      <oj-data-grid id="datagrid"
         style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
         aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
         data="[[dgDataProvider]]"
         header.column.style="[[getCellWidth]]"
         . . . >
    

17. 여는 <oj-chart> 태그를 찾아 aria-label 속성을 추가합니다.

      <oj-chart id="pieChart"
         type="bar"
         aria-label="Salaries by Department bar chart"
         data="[[chartDataProvider]]"
         animation-on-display="auto"
         animation-on-data-change="auto"
         . . . >
    

    최종 변경에는 중간 패널의 필름 스트립에 대한 페이지 매김 컨트롤이 포함됩니다.

18. 닫는 </oj-film-strip> 및 </oj-bind-if> 태그를 찾습니다.

            </oj-film-strip>
         </div>
      </div>
      </oj-bind-if>
    

19. 닫는 </div> 및 </oj-bind-if> 태그 사이에 페이지 매김 콘트롤과 주변 div 요소를 추가합니다.

            </oj-film-strip>
         </div>
      </div>
      <div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
         <div class="oj-flex-item">
            <div style="text-align: center;">
            <div style="display: inline-block;margin-top: 4px;">
               <oj-paging-control id="pagingControl"
                  aria-controls="deptFilmstrip"
                  data="[[pagingModel]]"
                  page-size="0"
                  page-options='{"type": "dots"}'>
               </oj-paging-control>
            </div>
            </div>
         </div>
      </div>
      </oj-bind-if>
    

20. 파일을 저장합니다. 파일은 departments-html.txt와 유사해야 합니다.

21. 화면 판독기 검증을 다시 실행합니다. 필름스트립, 데이터 그리드 및 차트에 대해 레이블을 사용하고 페이지 매김 컨트롤이 필름스트립 아래에 있는지 확인합니다.

다음단계

이 자습서에서는 웹 앱 접근성에서 이 학습 경로에 있는 애플리케이션 접근성 검증 및 수정 모듈을 완료합니다.

• 연결된 수명 주기 이벤트 사용자정의
• Oracle JET 애플리케이션에서 마스터 디테일 뷰의 접근성 검증
• Oracle JET 구성요소 테이블 및 메시지의 접근성 확인
• 복합 Oracle JET 구성요소에서 키보드 탐색 테스트

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

추가 학습 자원

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

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

---

제목 및 저작권 정보

Test keyboard navigation in complex Oracle JET components

F58354-02

Copyright ©2022,2025,

Oracle and/or its affiliates.