설치 & 구성

사전 구성된 버전

사용자 정의 설치

직접 구현을 빌드하려면, 언어 팩, JS min 파일, CSS min 파일의 로컬 복사본을 다운로드하거나(CDN 버전 참조) 새 「Ed11y」 인스턴스를 생성하세요.

ESM/JS 모듈 임포트의 경우:

레거시 브라우저 및 시스템에는 .umd JavaScript 파일을 사용하세요:

파라미터

완전한 구현은 로그인한 편집자에게만 호출되어야 하며(사이트 방문자에게 검사기가 보이는 것은 원치 않으실 것입니다!), 기본 파라미터를 재정의할 수 있습니다.

모든 파라미터에 기본값이 제공되므로 재정의할 항목만 포함하세요.

고도로 맞춤 설정된 구현은 다음과 같을 수 있습니다:

턴키 통합은 종종 이 변수들을 즉석에서 설정합니다. 예를 들어, 최근 편집된 페이지를 「assertive」 모드로 로드하고 몇 분 후 「polite」로 전환합니다.

테마 설정

여러 파라미터를 통해 테마 선택, 색상 재정의 및 CSS 삽입이 가능합니다.

향후 업데이트를 쉽게 하기 위해 재정의가 필요한 파라미터만 포함하세요.

유용한 JS 이벤트

테마 개발자는 이 이벤트에 훅을 걸어 필요에 따라 페이지를 반응하고 수정할 수 있습니다.

일반적인 발생 순서...

ed11yRunCustomTests: 결과 객체가 사용자 정의 결과를 삽입할 준비가 되었을 때 발송됩니다. 이 이벤트가 발송되려면 customTests 파라미터가 실행할 사용자 정의 테스트 함수의 수(아마도 하나...)로 설정되어야 합니다. 다음 섹션에서 자세한 내용을 확인하세요.
ed11yResults: 모든 검사가 완료되면 발송됩니다. API 통합에서는 Ed11y.results 객체에서 데이터를 수집할 수 있습니다.
ed11yPanelOpened: 패널이 자동 또는 수동으로 열리면 발송됩니다.
ed11yShowHidden: data-ed11y-result 번호와 viaJump 부울 값을 제공합니다. 「ed11yShowHidden」 파라미터가 설정되어 있고 그리고 요소의 부모 중 하나가 선택자와 일치하는 경우에만 발송됩니다. 아직 열리지 않은 컨테이너(예: 아코디언, 탭, 캐러셀)의 알림을 표시하는 데 사용됩니다. 다음 섹션에 사용 예시가 있습니다.
ed11yPop: data-ed11y-result ID와 result 및 tip 객체에 대한 참조를 제공합니다. 툴팁이 나타날 때 발송되며, 런타임에 팁을 수정할 수 있습니다.
ed11yShut: data-ed11y-result ID를 제공합니다. 툴팁이 닫힐 때 발송됩니다.
ed11yDismissalUpdate: 사용자가 알림을 닫거나 복원할 때 확장된 정보를 제공합니다. API 연동에 사용됩니다. 이벤트 객체에 포함된 항목:
- dismissPage
- dismissTest
- dismissKey
- dismissAction

다음 섹션에서 샘플을 확인할 수 있습니다.

팁 수정

팁 텍스트만 수정하려면, 라이브러리 호출 전에 ed11yLang.en 전역 객체를, 또는 호출 후에 Ed11y.M 객체의 항목을 직접 재정의하면 됩니다. 예를 들어, 언어 팩을 Drupal.ed11yLang으로 별칭 지정한 Drupal 모듈에서:

Drupal.ed11yLang.lang.testNames.title = "Please write shorter headings."

이는 현지화 파일의 기본 키 또는 활성 언어별 번역에 있는 모든 항목에 적용됩니다.

Drupal 모듈은 editLinks 파라미터를 사용하여 팁에 사용자 정의 편집 링크를 추가합니다. 「페이지 편집기」와 「레이아웃 편집기」를 참고하세요:

해당 파라미터를 설정하는 코드의 간략한 예시:

Drupal 모듈은 그런 다음 ed11yPop 이벤트를 사용하여 팁이 표시될 때 컨텍스트에 따라 편집 링크를 동적으로 표시하고 숨깁니다.

이 이벤트는 result와 tip 객체에 대한 참조를 제공합니다:

사용자 정의 테스트

customTests 파라미터가 숫자인 경우, Editoria11y는 검사 중에 「ed11yRunCustomTests」 이벤트를 발송하고, 해당 수의 「ed11yResume」 이벤트를 기다리며 최대 500ms 동안 일시 중지합니다.

이를 활용하면 사용자 정의 테스트가 담긴 여러 스크립트를 호출하고, 팁이 렌더링되기 전에 결과를 결과 배열에 추가할 수 있습니다.

예를 들어, 이메일에서 붙여넣은 난독화된 URL을 포함한 링크에 플래그를 달기 위해 이 팁을 만들고자 한다면:

다음 단계를 수행하세요:

ed11yRunCustomTests 이벤트에 대한 리스너 추가
일치하는 요소 찾기
팁 메시지 정의
Editoria11y가 팁을 그릴 수 있도록 「resume」 이벤트를 발송:

숨겨지거나 크기가 제한된 콘텐츠의 알림 처리

많은 인터랙티브 컴포넌트(탭, 슬라이더, 아코디언)는 콘텐츠를 숨깁니다. Editoria11y 정보 패널에는 문제로 직접 이동하는 이전/다음 버튼이 포함되어 있습니다. Editoria11y는 문제의 툴팁이 현재 보이지 않는다고 판단하면 문제가 있다는 알림을 표시한 후 첫 번째로 보이는 상위 요소(예: 아코디언 주변의 div)를 강조 표시합니다.

이상적으로는 테마가 Editoria11y의 가시성 검사가 실행되기 전에 해당 요소를 표시하여 사용자에게 모든 것이 마법처럼 작동하도록 합니다. 캐러셀은 자동 진행되고 아코디언은 자동으로 열려 문제를 표시합니다.

패널이 처음 열릴 때 이를 수행하려면(예: 문제가 있는 모든 아코디언 패널 펼치기), ed11yPanelOpened에 대한 JS 이벤트 리스너를 추가한 다음, 관련 ed11y-element-result 요소에 대해 querySelectorAll을 수행하고, 테마가 해당 페이지 부분을 표시하는 데 사용하는 함수를 트리거하세요.

jQuery 기반 예시입니다. 패널이 열리면 고정 메뉴를 비활성화하고(요소가 가려지지 않도록), 닫힌 아코디언 항목 내의 ed11y-element-result 요소를 찾아 토글 버튼 클릭을 시뮬레이션합니다:

패널의 「다음」 버튼을 통해 특정 팁으로 이동할 때만 콘텐츠를 표시하려면(예: 닫힌 탭이나 다음 캐러셀 슬라이드), 파라미터에서 hiddenHandlers를 관련 CSS 선택자로 설정하고 checkVisible를 TRUE로 설정해야 합니다. 그런 다음 ed11yShowHidden 이벤트에 대한 이벤트 리스너를 추가하세요. 이 이벤트는 Editoria11y가 팁이 옵션 목록에 제공된 hiddenHandlers 선택자 중 하나를 가진 컨테이너 안에 있다고 인식하면 발생합니다. 이 JS 이벤트에는 열리려는 팁의 ID가 포함됩니다. Editoria11y는 이 이벤트를 발송한 후 잠시 일시 중지하여 JS가 요소를 표시할 시간을 줍니다.

펜 스테이트의 구현 예시입니다. 제공된 ID와 일치하는 요소를 찾은 다음 상위 인터랙티브 컴포넌트 컨테이너를 찾고, 토글을 활성화하는 이벤트를 트리거합니다:

마지막 참고 사항: 일부 테마는 가시성 검사와 호환되지 않습니다. 예를 들어 <main> 컨테이너의 높이가 0px인 경우입니다. 이런 사이트는 checkVisible를 false로 설정하여 모든 가시성 검사를 비활성화해야 합니다.