접근성을 위해 Oracle JET 앱 테스트: 시각적 검사

소개

WCAG(Web Content Accessibility Guidelines) 2.1에는 액세스 가능한 웹 앱을 생성하기 위한 성공 기준이 60개 이상 포함되어 있습니다. 이 학습 과정에서는 주로 다음 항목에 초점을 맞춘 이러한 기준의 하위 집합에 초점을 맞출 것입니다.

이 자습서에서는 앱 테스트가 시작되는 위치, 즉 시각적 검사에 중점을 둡니다. 이 자습서와 그 다음에 나오는 두 자습서인 키보드 전용 접근성에 대한 Oracle JET 앱 테스트 및 Oracle JET 앱에서 화면 읽기 검증 수행을 통해 필요한 테스트 단계를 안내합니다. 학습 경로를 계속하기 전에 이 세 가지 테스트 자습서를 완료해야 합니다.

접근성을 위해 웹 앱을 평가하는 첫 번째 단계는 앱의 시각적 검토를 수행하는 것입니다. 검토하는 동안 다음 항목을 찾습니다.

목표

이 자습서에서는 웹 앱의 수동 접근성 테스트를 수행하는 방법을 배우고 Oracle JavaScript Audit 프레임워크를 통해 접근성 문제를 찾는 방법을 배웁니다.

필요 조건

작업 1: 스타터 앱 준비

이 학습 경로에서 Oracle JET 13.0 Nav Drawer 스타터 앱을 사용하고 있습니다.

  1. 앱을 상주할 파일 시스템 내 위치에서 다운로드한 ACCLearningPath.zip를 ACCLearningPath 폴더로 추출합니다.

  2. 터미널 window를 열고 최신 버전의 Oracle JET CLI(명령행 인터페이스)가 설치되었는지 확인합니다(릴리스 13.0 이상 필요).

    $ ojet --version

    최신 버전의 Oracle JET CLI가 표시되면 설치가 올바른 것입니다. 그렇지 않은 경우 사용 중인 플랫폼에 npm install 명령을 사용하여 다시 설치하십시오.

    • Windows용:

      $ npm install -g @oracle/ojet-cli

    • Mac 및 Linux 시스템의 경우:

      $ sudo npm install -g @oracle/ojet-cli

      설치가 완료되면 Oracle JET CLI에 모든 변경 사항에 대한 요약이 표시됩니다.

  3. ACCLearningPath 디렉토리로 이동하여 Oracle JET 앱 툴을 복원합니다.

    $ ojet restore

  4. 앱을 실행합니다.

    $ ojet serve

    Oracle JET 툴은 로컬 웹 브라우저에서 앱을 실행합니다. 개요 탭이 로드된 상태로 앱의 소개 페이지가 브라우저에 열립니다. 앱을 사용할 준비가 되었습니다.

    터미널 창과 브라우저를 열어 두면 앱이 변경 사항으로 자동으로 업데이트됩니다.

작업 2: 앱 감사

JAF(Oracle JET Audit Framework)는 구성 파일에서 찾은 런타임 옵션을 기반으로 Oracle JET 앱의 파일을 감사하도록 설계된 명령행 유틸리티 및 지원 API입니다. 앱의 감사에서 반환된 진단 메시지는 앱의 JET 릴리스 버전과 관련된 내장 규칙 집합에서 파생됩니다. 그러나 감사 프레임워크는 확장 가능하며 유저는 커스텀 규칙을 작성하여 해당 기능을 확장할 수 있습니다.

Oracle JAF 감사는 ACCLearningPath 앱에서 처리할 접근성 문제를 모두 찾지는 않지만 앱의 접근성 및 기타 문제를 식별하는 데 도움이 됩니다. 따라서 앱 감사 외에도 접근성 문제를 찾고 해결하기 위한 이 접근성 문제 식별 학습 경로에 설명된 절차와 단계를 따라야 합니다. JAF 감사는 작업을 시작하기 전에 앱에서 잠재적 문제를 식별하기 위해 샘플 앱을 액세스할 수 있도록 처음부터 실행해야 합니다. Oracle JAF에 대한 자세한 내용은 Oracle JET Audit Framework 사용 및 확장을 참조하십시오.

CLI 모드에서 Oracle JAF를 다운로드하여 사용하여 접근성 문제를 확인합니다.

  1. npm를 사용하여 Oracle JAF CLI를 설치합니다.

    터미널 window를 열고 설치된 Oracle JAF 버전을 확인합니다.

    $ ojaf -v

    설치되어 있지 않거나 JAF 버전이 현재 릴리스가 아닌 경우 이전 버전을 제거하고 최신 버전을 설치하십시오.

    $ npm uninstall -g @oracle/oraclejet-audit

    $ npm install -g @oracle/oraclejet-audit

  2. 앱의 ACCLearningPath 디렉토리로 이동하고 --init 명령행 플래그를 사용하여 기본 JAF 구성을 초기화합니다.

    $ ojaf --init

    이 툴은 ACCLearningPath 디렉토리의 기본 JAF 구성 파일 oraclejafconfig.json를 스캐폴드하고 앱의 루트 디렉토리에도 있는 JET 앱 구성 파일 oraclejetconfig.json를 기반으로 기본 구성 설정을 정의합니다.

  3. 편집기에서 oraclejafconfig.json를 열고 jetVer 속성의 값이 감사할 JET 버전(예: 13.0, 13.1 등)에 대해 올바른지 확인합니다.

    "builtinJetRules": true,
   "jetVer": "13.0",

    oraclejafconfig.json 파일에서 JAF 속성을 추가하거나 수정하여 앱 감사를 사용자가 정의할 수 있습니다. 구성 옵션에 대한 자세한 설명은 About the Oracle JAF Configuration File Properties를 참조하십시오.

  4. 앱을 처음 감사하기 전에 --dryrun 명령행 플래그를 사용하여 JAF가 감사할 파일의 기본 구성을 확인할 수 있습니다.

    $ ojaf --dryrun

    Dry Run이 앱을 감사하지 않지만 현재 JAF 구성 설정에 따라 감사할 파일을 확인합니다.

    주: ojaf --help 명령을 입력하여 전체 명령줄 플래그 목록을 얻을 수 있습니다.

  5. JAF 감사 유틸리티를 호출하는 명령을 입력하여 앱 감사를 수행합니다.

    $ ojaf

  6. 감사를 실행하면 Oracle JAF는 디렉토리에서 oraclejafconfig.json를 검색하고 감사 보고서를 생성합니다.

    이 보고서는 앱에서 발견된 규칙 위반 문제와 앱 파일의 해당 위치를 나열합니다. 또한 발견된 문제 및 해당 심각도, 감사된 규칙 및 감사된 파일에 대한 요약이 보고서에 포함됩니다.

    JAF 감사 보고서

    그림 jaf-report.png에 대한 설명

    감사 보고서의 문제 목록에서 departments.html 파일 'aria-label' or 'aria-labelledby' missing on <oj-film-strip>에 있는 심각도 레벨 blocker 문제를 확인합니다.

    앱의 film-strip 구성 요소에서 aria-label 속성이 누락되어 스크린 리더가 구성 요소의 ID에 액세스하지 못할 수 있습니다. 다음 튜토리얼에서 다루게 될 접근성 문제 중 하나입니다.

이 학습 경로에서 Oracle JAF에 대한 설명의 끝입니다. 앱 감사가 완료되면 ACCLearningPath 디렉토리에서 jaftmp@ 폴더와 oraclejafconfig.json 파일을 삭제해야 합니다.

작업 3: 페이지 구조 검토

페이지 구조는 앱의 시각적 검사를 위한 논리적 시작점입니다. HTML 머리글은 세부 사항에 초점을 맞추지 않고 페이지 콘텐츠의 개요를 제공합니다. 스크린 리더는 사용자가 제대로 표시된 머리글 사이를 빠르게 이동할 수 있는 바로 가기를 제공합니다.

ACCLearningPath 앱을 사용하여 페이지 구조를 검토합니다.

  1. 실행 중인 앱에서 페이지의 섹션이 제목으로 식별되는지 여부를 확인합니다.

    머리글 텍스트는 페이지의 일반 텍스트와 다르게 더 크거나 스타일이 지정됩니다. <h1> ~ <h6> 태그를 사용하여 실제 HTML 머리글을 생성합니다.

  2. 각 머리글의 텍스트에 연관된 내용이 적절히 설명되어 있는지 여부를 확인합니다.

    Introduction 페이지의 Overview 탭을 검사합니다. 세번째 맨 오른쪽 패널의 머리글은 텍스트 간격입니다. 이 패널의 내용은 텍스트 간격 조정과 관련이 있습니다. 따라서 이 머리글은 적절하게 설명하는 머리글의 예입니다.

  3. Chrome DevTools 요소 탭을 사용하여 머리글이 진정한 HTML 머리글인지 아니면 이와 유사하게 디자인된 텍스트인지 결정합니다.

    • 소개 페이지 머리글을 마우스 오른쪽 단추로 누르고 컨텍스트 메뉴에서 검사를 선택하여 페이지의 DOM(문서 객체 모델) 구조를 확인합니다.

      DevTools 요소 창에 표시되는 DOM 트리에서 강조 표시된 요소는 HTML 머리글을 생성하는 올바른 방법을 사용합니다.

      <h4>The Introduction Page</h4>

    • DevTools를 닫고 리소스 페이지 머리글을 마우스 오른쪽 단추로 누른 다음 컨텍스트 메뉴에서 검사를 선택합니다.

      이 DOM 트리에서 강조 표시된 요소는 HTML 제목처럼 보이는 텍스트 스타일입니다.

      <span class="h4Style">The Resources Page</span>

      스크린 리더는 이 코드를 제목으로 인식하지 못합니다. 화면 판독기 사용자는 종종 머리글을 기준으로 페이지를 탐색하며 제목과 유사하게 스타일 지정된 텍스트는 무시됩니다. 다음 단계에서는 잘못 코딩된 머리글을 수정합니다. 다음 변경사항이 앱에 미치는 영향을 관찰하려면 앱을 실행 중이고 브라우저를 열어 둡니다.

  4. ACCLearningPath/src/js/views 폴더로 이동하고 코드 편집기에서 overview.html를 엽니다.

  5. <span class="h4Style"> 태그를 찾습니다.

  6. <span class="h4Style"> 태그를 <h4> 태그로 바꿉니다.

  7. </span> 태그를 </h4> 태그로 바꿉니다.

  8. 파일을 저장하고 브라우저에서 앱 변경사항을 확인합니다.

작업 4: 페이지 제목 검토

앱의 시각적 검사에는 페이지 제목의 효과에 대한 평가가 포함됩니다.

실행 중인 시작 앱을 탐색하고 각 페이지 제목을 확인합니다.

  1. 페이지 제목이 페이지, 탭 및 앱 이름을 명확하게 식별하는지 여부를 결정합니다.

  2. 페이지 사이를 이동할 때 또는 [소개] 페이지의 탭 간에 페이지 제목이 변경되는지 확인합니다.

    표시되는 새 페이지 또는 탭마다 페이지 제목이 변경되어야 합니다. 예를 들어, 페이지 오른쪽 상단에 있는 기본 메뉴에서 소개를 선택한 경우 제목은 "소개"로 표시되어야 하고 리소스를 선택한 경우 제목은 "리소스"로 표시되어야 합니다.

    Introduction(소개) 페이지의 제목에는 "Introduction(소개)"라는 단어와 현재 선택된 탭의 이름이 모두 포함되어야 합니다. 탭 모음에서 다른 탭을 선택하면 제목이 변경되어 새로 선택한 탭이 반영됩니다.

    • 소개 - 개요
    • 소개 - 조직
    • 소개 - 직원
    • 소개 - 부서

    마찬가지로 Resources 페이지 제목에도 "Resources"라는 단어가 포함되어야 합니다.

    페이지 또는 탭 사이를 이동할 때 페이지 제목이 변경되지 않습니다. 이 문제는 이후 자습서에서 해결됩니다.

웹 앱의 페이지 헤더에 탐색 링크 및 로고와 같은 반복되는 콘텐츠가 있는 경우 탐색 건너뛰기 링크를 포함하십시오. 산업 표준에서는 탭 이동을 통해 액세스될 때까지 뷰에서 탐색 건너뛰기 링크를 숨겨야 한다고 제안합니다.

브라우저에서 실행 중인 앱에 탐색 건너뛰기 링크가 있는지 테스트합니다.

  1. 앱에서 <Ctrl+L> 키를 눌러 주소 표시줄로 포커스를 이동합니다.

  2. <Tab> 키를 눌러 탐색 건너뛰기 링크가 나타나고 포커스를 받습니다.

    탐색 건너뛰기 링크가 나타나지 않으므로 포커스는 페이지 오른쪽 상단에 있는 사용자 메뉴의 첫번째 포커스 가능한 요소인 john.hancock@oracle.com으로 이동합니다. 포커스 가능한 요소는 Keyboard-Only Accessibility 자습서에서 자세히 정의됩니다.

    테스트 중에 시작 앱에 구현된 탐색 건너뛰기 링크가 없음을 확인했습니다.

    이동 건너뛰기 링크를 추가하는 세 단계가 있습니다.

    1. index.html 파일에 대한 링크를 추가합니다.
    2. app.css 파일에 스타일 클래스를 추가하여 탭으로 이동할 때까지 탐색 건너뛰기 링크를 숨깁니다.
    3. intro.html 및 resources.html 파일에 대상 앵커를 추가합니다.

index.html 파일 업데이트

index.html 파일은 Oracle JET 웹 앱의 주요 구조를 정의합니다. 이동 생략 링크는 이 페이지에 있어야 합니다.

  1. ACCLearningPath/src 디렉토리로 이동하고 코드 편집기에서 index.html를 엽니다.

  2. <body> 태그를 찾습니다.

    <body class="oj-web-applayout-body">
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

  3. <body> 태그와 그 뒤에 오는 주석 사이에 대상이 #main인 링크를 삽입합니다.

    <body class="oj-web-applayout-body">
   <a class="hideSkipNav" href="#main">Skip to main content</a>
   <!-- Template for rendering navigation items shared between nav bar and nav list -->

    hideSkipNav 클래스는 사용자가 페이지 상단에서 시작하고 <Tab>를 누를 때까지 링크가 표시되지 않도록 합니다.

  4. index.html를 저장하고 닫습니다. 파일은 index-html.txt와 유사해야 합니다.

app.css 파일 업데이트

index.html 파일에서 hideSkipNav 스타일 클래스를 참조했습니다. 이제 app.css에서 정의해야 합니다. 모든 사용자 스타일 정의는 이 파일에 있습니다.

  1. ACCLearningPath/src/css 폴더로 이동하여 app.css를 편집합니다.

  2. .hideSkipNav 스타일 클래스와 속성을 파일 끝에 추가합니다.

    .hideSkipNav { 
   position: absolute;
   left: -1000px; }

.hideSkipNav:focus {
   position: unset;
   left: 0px; }

  3. app.css를 저장하고 닫습니다. 파일은 app-css.txt와 유사해야 합니다.

페이지의 HTML 파일 업데이트

탐색 건너뛰기 링크의 대상이 각 페이지의 기본 콘텐츠 맨 위에 있어야 하므로 [소개] 및 [리소스] 페이지 모두에 대상 앵커 태그를 추가합니다.

  1. ACCLearningPath/src/js/views 폴더로 이동하여 intro.html 파일을 편집합니다.

  2. oj-hybrid-padding 클래스가 있는 <div>를 찾습니다.

    <div class="oj-hybrid-padding">
   <div id="mainContainer">

  3. 두 <div> 태그 사이에 anchor 태그와 h2 머리글을 삽입합니다.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Introduction</h2>
</a>
   <div id="mainContainer">

    추가된 코드는 탐색 건너뛰기 링크의 대상뿐만 아니라 페이지 구조를 개선하기 위한 h2 머리글도 제공합니다.

  4. intro.html를 저장하고 닫습니다. 파일은 intro-html.txt와 유사해야 합니다.

  5. 코드 편집기에서 resources.html를 열고 oj-hybrid-padding 클래스가 있는 <div>을 찾습니다.

    <div class="oj-hybrid-padding">
   <ul>

  6. <div>와 <ul> 태그 사이에 앵커 태그와 h2 머리글을 삽입합니다.

    <div class="oj-hybrid-padding">
<a id="main">
   <h2>Resources</h2>
</a>
   <ul>

  7. resources.html를 저장하고 닫습니다. 파일은 resources-html.txt과 유사해야 합니다.

  8. 실행 중인 앱에서 <Ctrl+L> 키를 눌러 주소 표시줄로 포커스를 이동합니다.

  9. <Tab> 키를 눌러 이동 건너뛰기 링크가 나타나고 포커스를 받습니다.

  10. <Enter> 키를 눌러 탐색 건너뛰기 링크를 활성화합니다.

    그러면 포커스가 페이지의 기본 콘텐츠로 이동합니다.

    탐색 건너뛰기 링크의 기능을 테스트했으면 시각적 검사의 다음 요소로 이동합니다.

작업 6: 색상 및 위치 사용 확인

버튼은 사용자를 한 페이지나 작업에서 다음 페이지로 이동하는 지침의 필수 부분입니다. 개발자는 색상이 지정된 버튼을 사용하여 페이지의 모양과 기능을 향상시킵니다. 일반적인 지침은 "계속하려면 녹색 버튼을 누르십시오."입니다. 그러나 적절한 레이블 지정이 없으면 시각 장애가 있는 사용자는 이러한 지침과 유사한 지침을 따를 수 없습니다.

[개요] 페이지의 가운데 패널에는 세 가지 색상 단추가 있는 도구 모음과 색상 및 위치를 기준으로 단추를 누르는 몇 가지 지침이 있습니다. 블라인드 또는 색상 블라인드 사용자는 레이블이나 다른 구별 기능이 없기 때문에 버튼을 구별할 수 없습니다. 이 버튼 세트는 Success Criteria 1.3.3 및 1.4.1에 실패합니다.

색상 지침 사용

그림 color_buttons.png 설명

가운데 패널의 색상이 지정된 각 버튼에는 텍스트 레이블이 연결되어 있어야 합니다. 다음 변경사항은 색상 이름을 버튼에 레이블로 추가합니다.

  1. ACCLearningPath/src/js/views 폴더로 이동하여 overview.html 파일을 편집합니다.

  2. 세 개의 oj-button 요소 집합을 찾습니다.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">
</oj-button>

  3. 코드의 버튼을 수정하여 색상 식별자를 생성합니다.

    <oj-button id="chat"
   class="demo-button-green button-set-width"
   chroming="solid"
   on-oj-action="[[greenActivated]]">Green
</oj-button>
<oj-button id="paint"
   class="demo-button-red button-set-width"
   chroming="solid"
   on-oj-action="[[redActivated]]">Red
</oj-button>
<oj-button id="bookmark"
   class="demo-button-purple button-set-width"
   chroming="solid"
   on-oj-action="[[purpleActivated]]">Purple
</oj-button>

  4. overview.html을 저장하고 단추에 적절한 텍스트 레이블이 있는지 확인합니다.

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

작업 7: 가독성 확인

시각 검사의 최종 단계는 시력이 낮은 사용자에게만 해당됩니다. 행, 단어 및 문자 간격을 조정하거나 페이지의 확대/축소 레벨을 변경하여 가독성을 높이거나 줄일지 결정합니다.

개요 페이지를 사용하여 이러한 기준을 설명하고 텍스트 간격을 확인하고 앱을 확대합니다.

글자 간격 및 확대/축소 확인

그림 text_spacing.png 설명

  1. 실행 중인 앱에서 페이지의 맨 오른쪽 패널인 텍스트 간격을 검사합니다. 이 패널은 두 개의 섹션을 포함합니다. 두 섹션의 텍스트를 비교하여 모든 텍스트가 있는지 확인합니다.

    패널의 윗부분에는 일반 간격의 텍스트가 있습니다. 아래쪽 부분에는 늘어난 문자, 단어 및 줄 간격이 있는 동일한 텍스트가 포함됩니다.

    아래쪽 섹션에 왜곡, 잘림 또는 겹침 문자가 없는 경우 페이지가 Success Criterion 1.4.12를 충족합니다.

  2. 브라우저의 확대 레벨을 200%로 늘립니다. 도구 모음에서 돋보기 확대/축소 아이콘을 누른 다음 + 기호를 눌러 확대/축소를 늘립니다.

    모든 텍스트를 읽을 수 있고 텍스트가 각 패널 안에서 올바르게 줄바꿈되면 페이지가 200% 확대에서 Success Criterion 1.4.4를 충족합니다.

    • 성공 기준 1.4.10 리플로우는 다음과 같이 말합니다. "콘텐츠는 정보나 기능 손실 없이 표시할 수 있으며 다음 두 가지 차원으로 스크롤할 필요가 없습니다.
      • 320 CSS 픽셀에 해당하는 너비의 세로 스크롤 콘텐츠;
      • 256 CSS 픽셀에 해당하는 높이의 가로 스크롤 콘텐츠입니다. 사용이나 의미를 위해 2차원 레이아웃이 필요한 콘텐츠의 일부를 제외합니다."

    한 방향만 스크롤하도록 페이지 형식을 다시 지정해야 합니다. 페이지가 가로 또는 세로로 스크롤되지만 양방향으로 스크롤되지 않습니다. Success Criterion 1.4.10을 사용하면 페이지를 쉽게 사용할 수 있습니다.

  3. 400%로 확대합니다.

  4. 페이지에서 스크롤 막대 모양에 대해 살펴봅니다. 가로 스크롤 막대와 세로 스크롤 막대가 모두 나타나면 페이지에서 이 기준이 실패합니다.

초기 테스트 단계가 완료되었습니다. 이 학습 경로 내의 다음 자습서는 키보드 전용 접근성을 위해 Oracle JET 앱 테스트입니다.

추가 학습 자원

docs.oracle.com/learn의 다른 실습을 탐색하거나 Oracle Learning YouTube 채널에서 더 많은 무료 학습 콘텐츠에 접근할 수 있습니다. 또한 education.oracle.com/learning-explorer를 방문하여 Oracle Learning Explorer로 전환할 수 있습니다.

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