웹접근성심사 홈페이지를 위한 대체텍스트 alt 입력 기능

웹접근성 마크가 있는 홈페이지는 이미지에 대체텍스트(alt)를 입력해야 합니다.

장애인분들을 위해 필요한 내용이죠...

 

smartteditor2 게시판에 첨부한 분을 위해 간단한 소스 공유합니다.

 

예시 이미지입니다.

 

3731943363_1760421301.3798.png

 

/plugin/editor/smarteditor2/SmartEitor2Skin.html

아래 내용 추가하시면 됩니다.

[code]

<!-- SE2 Markup End -->
<script>
(function() {
    function attachImageAltEditor() {
        const iframe = document.getElementById("se2_iframe");
        if (!iframe) {
              return setTimeout(attachImageAltEditor, 500);
        }

        const editorDoc = iframe.contentDocument || iframe.contentWindow.document;
        if (!editorDoc || !editorDoc.body) {
            return setTimeout(attachImageAltEditor, 500);
        }

        // 중복 방지
        if (editorDoc.__altEventAttached) return;
        editorDoc.__altEventAttached = true;

        console.log("SmartEditor2 이미지 ALT 편집기 연결 완료");

        editorDoc.addEventListener("click", function(e) {
            const target = e.target;
            if (target.tagName === "IMG") {
                const currentAlt = target.getAttribute("alt") || "";
                const newAlt = prompt("이미지 대체텍스트(alt)를 입력하세요.", currentAlt);
                if (newAlt !== null) {
                    target.setAttribute("alt", newAlt.trim());
                }
            }
        });
    }

      setTimeout(attachImageAltEditor, 500);
})();
</script>
[/code]

|

댓글 3개

감사 합니다.

편하게 사용할 것 같습니다. 감사합니다. ^^
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

+
제목 글쓴이 날짜 조회
3개월 전 조회 351
3개월 전 조회 468
3개월 전 조회 405
3개월 전 조회 553
3개월 전 조회 401
3개월 전 조회 433
3개월 전 조회 360
3개월 전 조회 610
3개월 전 조회 357
3개월 전 조회 380
3개월 전 조회 402
3개월 전 조회 265
3개월 전 조회 420
3개월 전 조회 415
3개월 전 조회 403
3개월 전 조회 368
3개월 전 조회 344
3개월 전 조회 285
3개월 전 조회 320
3개월 전 조회 287
3개월 전 조회 252
3개월 전 조회 437
3개월 전 조회 260
3개월 전 조회 338
3개월 전 조회 347
4개월 전 조회 480
4개월 전 조회 384
4개월 전 조회 379
4개월 전 조회 346
4개월 전 조회 565