연결된 수명 주기 이벤트 사용자정의

소개

Oracle JavaScript Extension Toolkit (JET) apps contain a lifecycle event that is triggered each time a page or tab is loaded into the browser. this.connected() 함수는 새로 표시된 페이지 또는 탭에 맞게 페이지 제목을 사용자정의할 수 있는 기회를 제공합니다. 이 기능은 또한 aria-live 영역에 사용자 정의 메시지를 작성할 수 있는 기회를 제공하므로 스크린 리더가 페이지 또는 탭이 로드되었음을 알릴 수 있습니다.

목표

이 자습서에서는 액세스 가능한 페이지 제목을 설정하고 ACCLearningPath 앱에 표시된 각 페이지 및 탭에 대해 aria-live 영역에 올바른 로드 메시지를 제공하는 방법에 대해 알아봅니다.

필수 조건

작업 1: 요구 사항 정의

WCAG Success Criterion 2.4.2 Page Titled에 따르면 웹 앱의 각 페이지에는 설명적이고 고유한 제목이 있어야 합니다. 제목에는 페이지, 탭 및 앱 이름이 포함되어야 합니다. 제목 형식에 대한 특정 요구 사항은 없지만 업계 표준은 먼저 페이지 및 탭 이름을 포함하고 그 뒤에 앱 이름을 포함하는 것입니다. 이 순서대로 제목을 구성하면 스크린 리더가 가장 중요하고 제한적인 정보를 먼저 말합니다.

새 페이지가 로드될 때 제목이 변경되더라도 화면 판독기에서 항상 페이지가 변경되었음을 알리는 것은 아닙니다. 특히 Oracle JET 앱과 같은 단일 페이지 앱에서는 화면 판독기에 대한 알림 없이 페이지 및 탭 로드가 발생합니다. Oracle JET에 보다 쉽게 액세스할 수 있도록 하기 위해 Oracle JET 스타터 템플리트(릴리스 버전 8.0.0 이상)를 사용하여 생성된 모든 앱에는 accUtils.announce() 함수가 포함되어 있습니다. 이 함수는 텍스트를 aria-live 영역에 씁니다. 이 영역은 항상 DOM(문서 객체 모델)에 있습니다. Oracle JET 템플리트에는 this.connected 수명 주기 함수 내에 accUtils.announce() 메소드에 대한 호출도 포함됩니다. 이 통화의 텍스트에는 페이지나 탭이 로드되었음을 알 수 있습니다.

작업 2: this.connected 수명 주기 함수 사용자 정의

새로 생성된 Oracle JET 앱의 this.connected() 함수는 매우 간결합니다.

this.connected = function() {
      accUtils.announce("Dashboard page loaded.", "assertive");
      document.title = "Dashboard";
      // Implement further logic if needed
};

accUtils.announce() 메소드의 첫번째 매개변수는 사용할 텍스트입니다. 두 번째 매개변수는 텍스트를 즉시 사용할지 아니면 스크린 리더가 버퍼에서 다른 항목 말하기가 완료될 때까지 기다릴지 결정합니다.

  1. ACCLearningPath/src/js/viewModels 폴더로 이동하여 코드 편집기에서 intro.js 파일을 엽니다.

  2. this.connected() 함수를 찾아 수정합니다. 그런 다음 파일 저장 및 닫기

       this.connected = function () {
      accUtils.announce("Introduction page loaded.", "assertive");
      document.title = "Introduction -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  3. 편집기에서 resources.js를 열고 this.connected() 함수를 수정합니다. 그런 다음 파일 저장 및 닫기

       this.connected = function () {
      accUtils.announce("Resources page loaded.", "assertive");
      document.title = "Resources -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  4. 편집기에서 overview.js를 열고 this.connected() 함수를 수정합니다. 그런 다음 파일 저장 및 닫기

       this.connected = function () {
      accUtils.announce("Overview tab loaded.", "polite");
      document.title = "Introduction : Overview -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  5. 편집기에서 organization.js를 열고 this.connected() 함수를 수정합니다. 그런 다음 파일 저장 및 닫기

       this.connected = function () {
      accUtils.announce("Organization tab loaded.", "polite");
      document.title = "Introduction : Organization -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  6. 편집기에서 employees.js를 열고 this.connected() 함수를 수정합니다. 그런 다음, 파일을 저장하고 닫습니다.

       this.connected = function () {
         accUtils.announce("Employees tab loaded.", "polite");
         document.title = "Introduction : Employees  --  Accessibility Learning Path";
         // Implement further logic if needed
   };

  7. 편집기에서 departments.js를 열고 this.connected() 함수를 수정합니다. 그런 다음 파일 저장 및 닫기

       this.connected = function () {
         accUtils.announce("Departments tab loaded.", "polite");
         document.title = "Introduction : Departments  -- Accessibility Learning Path";
         // Implement further logic if needed
   };

  8. 스크린 리더를 시작합니다.

  9. 앱을 실행합니다.

       $ ojet serve

    브라우저가 Overview 탭이 로드된 상태로 앱의 Introduction 페이지로 열립니다.

  10. 제목이 "Introduction : Overview – Accessibility Learning Path"이고 화면 판독기에서 "Introduction page loaded" 및 "Overview tab loaded"이라고 표시되는지 확인합니다.

  11. 탭 표시줄에서 조직 탭을 클릭합니다.

  12. 제목이 "Introduction : Organization – Accessibility Learning Path"이고 스크린 리더가 "Organization tab loaded"이라고 표시되는지 확인합니다.

    참고: 화면 판독기에서 페이지 제목이 언급되지 않은 경우 탭 이동을 통해 브라우저의 페이지로 돌아갑니다.

  13. 나머지 탭과 Resources 페이지의 제목 및 음성 공지를 확인합니다.

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

앱에 접근할 수 있도록 하는 초기 태스크가 완료되었습니다.

다음단계

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

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

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

추가 학습 자원

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

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