Oracle JET 구성요소 테이블 및 메시지의 접근성 확인

소개

Oracle JET 앱에서 화면 리더 검증 수행 자습서에서는 [직원] 페이지에서 몇 가지 접근성 문제를 해결했습니다. 이 튜토리얼에서 해결해야 할 몇 가지 문제가 남아 있습니다.

목표

이 자습서에서는 ACCLearningPath 앱의 [직원] 페이지에서 나머지 접근성 문제를 식별하고 수정하는 방법을 배웁니다.

필수 조건

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

작업 1: 페이지 구조 확인

검토의 첫번째 단계는 필요한 모든 HTML 머리글이 페이지에 있는지 확인하는 것입니다.

1. 터미널의 ACCLearningPath 디렉토리로 이동하고 앱을 실행합니다.

   $ ojet serve
   

   브라우저가 Overview 탭이 로드되어 앱의 Introduction 페이지로 열립니다. 탭 표시줄에서 [직원] 탭을 클릭하고 [직원] 페이지를 검사합니다.

   

   Employees 페이지는 두 개의 패널로 구성됩니다. 페이지 자체 및 각 패널에서 HTML 머리글이 누락되었습니다.

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

3. 파일에서 첫번째로 여는 <div> 태그를 찾습니다.

   <div class="oj-hybrid-padding">
      <oj-messages id="messagesId"
         messages="[[messagesDataprovider]]"
         display="notification"
         position="[[positionObject]]">
      </oj-messages>
   

4. <div> 태그를 연 직후 Employees 페이지를 식별하는 h3 머리글을 삽입합니다.

   <div class="oj-hybrid-padding">
      <h3>Employees</h3>
      <oj-messages id="messagesId"
         messages="[[messagesDataprovider]]"
         display="notification"
         position="[[positionObject]]">
      </oj-messages>
   

5. 테이블이 포함된 왼쪽 패널을 형성하는 여는 <div> 태그를 찾습니다.

      
   <div class="oj-flex-item">
      <oj-table id='table'
         class="table-size"
         first-selected-row="{{selectedRow}}"
         aria-label="Employees Table"
         . . . >
      
   

6. 여는 <div> 및 <oj-table> 태그 사이에 h4 머리글을 삽입하여 이 패널에 제대로 레이블을 지정합니다.

      
   <div class="oj-flex-item">
      <h4>Employees Table</h4>
      <oj-table id='table'
         class="table-size"
         first-selected-row="{{selectedRow}}"
         aria-label="Employees Table"
         . . . >
      
   

7. 두번째 패널에 표시되는 머리글 텍스트와 지침 텍스트를 모두 포함하도록 <oj-table> 요소의 aria-label 속성을 편집합니다.

      
   <div class="oj-flex-item">
      <h4>Employees Table</h4>
      <oj-table id='table'
         class="table-size"
         first-selected-row="{{selectedRow}}"
         aria-label="Employees Table - Activate a row to see employee details"
         . . . >
      
   

   이제 테이블은 WCAG Success Criterion 2.5.3 Label in Name 및 WCAG Success Criterion 1.3.1 Info and Relationships를 모두 준수합니다. 이러한 기준을 충족하려면 오른쪽 패널의 시각적 레이블과 지침 텍스트가 모두 컨트롤의 구어 레이블에 포함되어야 합니다.

8. 사원 세부 정보를 보유할 Employees 페이지의 오른쪽 패널을 정의하는 여는 <div> 태그를 찾습니다.

   <div id="detailContainer"
      class="oj-flex-item"
      style="margin-left: 30px; min-width: 200px">
      <hr style="margin-top:12px;">
      <oj-bind-if test="[[!activeRow()]]">
   

9. <div> 및 <oj-bind-if> 태그 사이에 이 패널을 식별할 가로 규칙 아래에 h4 머리글을 삽입합니다.

   <div id="detailContainer"
      class="oj-flex-item"
      style="margin-left: 30px; min-width: 200px">
      <hr style="margin-top:12px;">
      <h4>Employee Details</h4>
      <oj-bind-if test="[[!activeRow()]]">
   

10. 파일을 저장합니다. 파일은 employees-page-html.txt와 유사해야 합니다.

11. 실행 중인 앱에서 적용된 변경사항을 확인합니다.

    

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

이 절과 이 자습서의 다음 화면 리더 테스트 수행 부분은 마우스를 사용하지 않고 수행해야 합니다. 이 테스트 중에 포커스 포인트가 항상 명확하게 식별되고 탭 순서를 예측할 수 있는지 확인합니다.

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

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

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

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

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

6. <Tab>을 누릅니다. 포커스가 [직원] 테이블의 첫 번째 열 머리글인 직원 번호로 이동합니다.

7. 테이블의 첫번째 데이터 행에 포커스를 두려면 <down arrow> 키를 누릅니다.

   직원 세부 정보 양식이 페이지 오른쪽 패널에 나타나야 합니다.

8. <Space> 키를 눌러 행을 선택한 다음 <F2> 키를 눌러 첫번째 탭 가능 요소인 편집 버튼으로 포커스를 이동합니다.

9. Edit 버튼을 활성화하려면 <Space>을 누릅니다. [직원 편집] 대화상자가 열리고 포커스가 직원 ID 필드로 이동합니다.

10. <Tab>을 누릅니다. 포커스가 직원 이름 필드로 이동합니다.

11. <Tab>을 누릅니다. 포커스가 직책 필드로 이동합니다.

12. <Tab>을 누릅니다. 포커스가 고용 일자 필드로 이동합니다.

13. <Tab>을 누릅니다. 포커스가 임금 필드로 이동합니다.

14. <Tab>을 누릅니다. 포커스가 저장 버튼으로 이동합니다.

15. <Space> 키를 눌러 Save 버튼을 활성화하고 대화 상자를 닫습니다. 포커스는 [직원] 테이블의 선택된 첫번째 데이터 행으로 다시 이동합니다.

    페이지 왼쪽 상단 모서리에 있는 메시지 상자를 확인합니다. 메시지 상자는 업데이트가 저장되었음을 확인하는 기능을 제공합니다.

    

    화면 확대 소프트웨어는 직원 테이블에 초점을 맞추므로 확인 메시지는 돋보기 포트 외부에 위치할 수 있습니다.

16. ACCLearningPath/src/js/viewModels 폴더로 이동하여 employees.js를 편집합니다.

17. this.positionObject의 정의를 찾습니다.

      this.positionObject = {
         my: { vertical: "top", horizontal: "start" },
         at: { vertical: "top", horizontal: "start" },
         of: "window",
      };
    

18. 객체의 위치가 창이 아닌 테이블을 기반으로 하도록 positionObject 정의를 수정합니다.

      this.positionObject = {
         my: { vertical: "top", horizontal: "start" },
         at: { vertical: "top", horizontal: "start" },
         of: "#table",
      };
    

    파일을 저장합니다. 그런 다음 키보드 전용 테스트의 1-15단계를 반복하여 확인 메시지의 위치가 테이블로 이동되었는지 확인합니다.

    

작업 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는 "기본 영역 탭"이라고 말합니다. 직원 탭이 선택되었습니다. 3/4."

9. <Tab>을 누릅니다. JAWS는 "6개 열과 13개 이상의 행이 있는 테이블"이라고 말합니다. 직원 테이블 - 직원 세부정보를 보려면 행을 활성화합니다. 열 헤더 1, 사원 번호입니다." 포커스가 테이블 열 머리글 행의 첫 번째 셀로 이동합니다.

10. <down arrow> 키를 누릅니다. JAWS는 "행 1 : 7839. 선택 취소됨. 열 1, 사원 번호: 7839." 포커스는 테이블의 첫번째 데이터 행에 있습니다.

11. <right arrow> 키를 누릅니다. JAWS에는 열 번호와 직원 사용자 이름이 표시됩니다.

12. <Space> 키를 누릅니다. 행이 선택되고 JAWS에 "공간"이 표시됩니다. 선택됨."

13. <F2>를 눌러 첫번째 탭 가능 요소로 이동합니다. JAWS는 "편집 버튼"이라고 말합니다. 활성화하려면 Enter 키를 누르십시오."

14. <Enter>을 누릅니다. JAWS는 "직원을 편집합니다. 직원을 편집합니다. 직원 ID 7,839…" 스크린 리더는 직원 편집 대화 상자를 열고 키를 누를 때까지 계속 읽습니다.

15. 편집 가능한 필드와 읽기 전용 필드를 저장 단추로 이동하려면 <Tab>를 다섯 번 누릅니다. JAWS는 "Save button"이라고 말합니다. 활성화하려면 Enter 키를 누르십시오."

16. <Enter>을 누릅니다. JAWS는 "메시지 범주: 확인"이라고 말합니다. 업데이트가 저장되었습니다. 직원 Onegin에 대한 변경사항이 저장되었습니다." 앱의 직원 사용자 이름은 이전 자습서에서 편집했기 때문에 여기에서 다를 수 있습니다.

17. 메시지 상자 내용을 읽으려면 <F6> 키를 누릅니다. JAWS는 "메시지 보완 영역. 업데이트가 저장되었습니다. 메시지 영역 입력 F6를 눌러 이전에 포커스된 요소로 돌아갑니다."

18. <Tab>을 누릅니다. JAWS는 "닫기 버튼"이라고 말합니다. 활성화하려면 Enter 키를 누르십시오."

19. <Enter>을 눌러 메시지 상자를 닫습니다. 포커스가 테이블과 이전에 선택한 셀로 돌아갑니다.

20. 스크린 리더를 끄십시오.

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

세 번째 접근성 수정 세트를 완료했습니다.

다음단계

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

이 자습서는 애플리케이션 접근성 검증 및 수정 모듈의 일부입니다.

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

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

추가 학습 자원

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

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

---

제목 및 저작권 정보

Verify the accessibility of Oracle JET components table and message

F58362-02

Copyright ©2022,2025,

Oracle and/or its affiliates.