ModuWeb 웹 접근성 도구 — 설치 안내

코딩 지식이 없어도 됩니다. 아래 방법 중 하나만 따라 하면 내 웹사이트에 접근성 도구가 추가됩니다.

이 압축 파일에는 다음이 들어 있습니다.

방법 A 파일 1개 + 코드 1줄 — 가장 쉬움 (추천)

인터넷이 없거나 폐쇄망이어도 동작합니다. 한국어가 기본 내장되어 있습니다.

1 압축 안의 webAccTools.standalone.min.js 파일을 내 웹사이트 폴더에 복사합니다. (예: 웹 최상위 폴더에 그대로 업로드)

2 내 웹페이지 HTML의 </head> 바로 위(또는 <body> 안 아무 곳)에 아래 한 줄을 붙여 넣습니다.

<script src="/webAccTools.standalone.min.js" data-wat-auto></script>

※ src 경로는 파일을 올린 위치에 맞게 바꾸세요. 파일을 페이지와 같은 폴더에 뒀다면 src="webAccTools.standalone.min.js" 처럼 써도 됩니다.

3 저장하고 페이지를 새로고침하면 화면 오른쪽에 접근성 도구가 나타납니다. 끝입니다. 🎉

방법 B 폴더 방식 (다국어·용량 최적화가 필요할 때)

dist/ 폴더를 구조 그대로 웹서버에 복사한 뒤, 아래 한 줄을 넣습니다. CSS·아이콘·언어 파일을 폴더에서 자동으로 불러옵니다.

<script src="/dist/webAccTools.js" data-wat-auto></script>

방법 C 파일 복사조차 없이 (인터넷 필요)

내 서버에 아무것도 올리지 않고, 아래 한 줄만 넣어도 됩니다. (외부 CDN에서 자동으로 불러옵니다.)

<script src="https://cdn.jsdelivr.net/gh/Daegu-Cyber-University/ModuWeb@main/dist/webAccTools.js" data-wat-auto></script>

특정 버전으로 고정하려면 @main 을 @v2.1.0 같은 릴리스 태그로 바꾸세요.

세부 설정 (선택)

초기화 코드를 따로 짤 필요 없이, <script> 태그에 속성만 추가하면 됩니다.

<script src="/webAccTools.standalone.min.js" data-wat-auto
	data-wat-language="ko"
	data-wat-container="#site-header"></script>
속성설명
data-wat-auto자동 실행 스위치 (필수). 이 속성이 있어야 도구가 켜집니다.
data-wat-language기본 언어. ko(한국어), en-US, en-GB, ja, zh, de. ※ 단일 파일(방법 A)은 한국어만 내장 — 다른 언어는 방법 B 사용.
data-wat-container도구를 넣을 위치의 CSS 선택자. 생략하면 화면 오른쪽에 자동 배치.
data-wat-inject-css"false"로 두면 CSS 자동 삽입을 끕니다. (스타일을 직접 관리할 때만)

자주 묻는 질문

Q. 도구가 안 보여요.

Q. 여러 페이지에 넣고 싶어요.

공통 헤더/푸터 파일(예: header.php, 레이아웃 템플릿)에 그 한 줄을 넣으면 모든 페이지에 한 번에 적용됩니다.

Q. 사전 검색·서버 기능도 쓰고 싶어요.

대부분 기능(글꼴·색상·화면확대·읽기지원·음성읽기 등)은 설정 없이 바로 동작합니다. 사전 검색만 별도 서버 설정이 필요하며, 개발자용 문서(README.md)를 참고하세요.