이미지 태그에 alt 값 넣어주기 (나는 웹퍼블리셔로 근무 중)

 

이미지를 스크립트로 삽입하는 상황에서

alt값을 직접 작성하기 어려울 때 써먹기 좋은 간단 코드! (접근성을 위해 alt값은 필수로 작성해야 하므로)

document.addEventListener('DOMContentLoaded', function () {
    var imgs = document.querySelectorAll('.section .figure .cover');

    imgs.forEach(function(img) {
        img.addEventListener('load', function() {
            img.alt = "이미지 설명";
        });
    });
});

 

위 코드에 대한 GPT의 설명 : 

'이 코드는 이미지가 로드될 때마다 해당 이미지의 alt 속성을 설정하여 접근성을 향상시키는 역할을 합니다.'

1. var imgs = document.querySelectorAll('.section.media .data-figure .cover');
querySelectorAll 메서드를 사용하여 .section.media 안에 있는 .data-figure 안의 .cover 클래스를 가진 모든 이미지를 선택하고, 이들을 imgs 변수에 저장합니다.

2. imgs.forEach(function(img) { ... });
선택된 모든 이미지 요소들에 대해 반복문을 실행합니다. forEach 메서드를 사용하여 각 이미지를 처리합니다.

3. img.addEventListener('load', function() { ... });
각 이미지 요소에 load 이벤트 리스너를 추가합니다. 이 이벤트는 이미지가 완전히 로드되었을 때 발생합니다.

4. img.alt = "이미지 설명";
이미지가 로드되면 그 이미지 요소의 alt 속성을 "이미지 설명"으로 설정합니다. 이는 이미지가 로드되지 않았을 때 대체 텍스트로 사용됩니다.

---

GPT에게 '이 스크립트 코드를 좀 더 개선할 수 있을까?' 라고 질문!

1. 성능 최적화: 

이미지 로드 이벤트는 이미지를 처음 로드할 때만 발생하므로, DOMContentLoaded 이벤트 대신 이미 이미지가 로드된 상태에서도 alt 속성을 설정할 수 있도록 하는 것이 좋습니다.

2. 더 구체적인 오류 처리: 

이미지가 로드되지 않았을 경우에 대한 처리도 추가할 수 있습니다.

3. 기능 확장: 

alt 텍스트를 이미지 파일 이름에서 자동으로 생성하는 등의 기능을 추가할 수 있습니다.

 

document.addEventListener('DOMContentLoaded', () => {
    const imgs = document.querySelectorAll('.section .figure .cover');

    imgs.forEach(img => {
        if (img.complete) {
            setAltText(img);
        } else {
            img.addEventListener('load', () => setAltText(img));
            img.addEventListener('error', () => console.error('Error loading image:', img.src));
        }
    });

    function setAltText(img) {
        if (!img.alt) {
            const altText = img.src.split('/').pop().split('.')[0] || "이미지 설명";
            img.alt = altText;
        }
    }
});

 

무엇이 개선되었는가?

 

1. 이미지 로드 상태 확인: 

img.complete 속성을 사용하여 이미 로드된 이미지를 즉시 처리합니다.
2. 이미지 오류 처리: 

error 이벤트 리스너를 추가하여 이미지 로드 실패 시 오류 메시지를 출력합니다.
3. alt 텍스트 자동 생성: 

이미지 파일 이름을 기반으로 기본적인 alt 텍스트를 생성하도록 옵션을 추가했습니다. 이는 사용자 정의가 가능합니다.
4. const와 let 사용: 

변경되지 않는 변수에는 const를 사용하여 선언했습니다. imgs는 변경되지 않으므로 const를 사용했습니다.
5. 화살표 함수 사용: 

이벤트 리스너와 forEach 콜백 함수에 화살표 함수를 사용하여 코드를 더 간결하게 만들었습니다.
6. DOMContentLoaded 이벤트 리스너를 화살표 함수로 선언: 

화살표 함수로 선언하여 좀 더 간결하게 표현했습니다.
7. 모듈화: 

setAltText 함수는 이미지를 설정하는 로직을 처리하여 코드의 가독성을 높였습니다.

8. if (!img.alt) 조건문

if (!img.alt) 조건문은 이미지 요소가 alt 속성을 가지고 있지 않을 때를 확인하는 것입니다. 이 조건은 이미지가 없는 경우가 아니라, 이미지가 있을 때 그 이미지의 alt 속성이 비어 있는지 또는 존재하지 않는지를 확인합니다.

이러한 변경 사항은 성능을 최적화하고, 오류 처리를 추가하며, 기능을 확장하여 보다 유연하고 강력한 코드를 제공합니다.

---

여기서 더 궁금한 부분 질문!

1. img.complete 의 역할이 뭐야?

이미지 로드 상태를 확인하는 데 사용됩니다. 이 속성은 boolean 값을 반환하며, 이미지가 로드 완료되었을 때 true를 반환하고, 그렇지 않으면 false를 반환합니다.

 

• 이미지 로드 완료 여부 확인:
  • img.complete가 true이면 이미지가 이미 로드된 상태임을 의미합니다.
  • img.complete가 false이면 이미지가 아직 로드되지 않았거나 로드 실패한 상태임을 의미합니다.
• 즉시 처리 가능:
  • 페이지가 로드될 때 이미 로드된 이미지를 즉시 처리할 수 있습니다. 이를 통해 이벤트 리스너를 추가하여 기다릴 필요 없이, 로드된 이미지를 바로 사용할 수 있습니다.

 

complete 속성은 HTMLImageElement 인터페이스의 표준 속성으로, 이는 변경할 수 없습니다. 이 속성명은 브라우저가 이미지를 로드했는지 여부를 확인하기 위해 예약된 이름입니다. 따라서 이 속성명을 변경할 수 없으며, 다른 단어를 사용해도 동작하지 않습니다.

 

---

 

이 코드를 사용하게 된 상황은?

 

- 유튜브 영상을 과도하게 삽입해 놓은 사이트. 로딩 속도가 이슈가 됨. 퍼블에게 들어 온 요청 -> 페이지 진입 시 유튜브 영역에 영상 썸네일만 노출(이미지만 로드)할 것, 썸네일 클릭 시 유튜브 영상 로드 및 재생되도록 수정.

- 유튜브 썸네일 추출방식을 사용하기 위해 스크립트로 img를 삽입함. 웹접근성을 위한 alt값 직접 입력이 불가능해짐. 스크립트를 사용하게 됨. (https://img.youtube.com/vi/동영상아이디/0.jpg)