검색엔진 오류 보고. 아이프레임 요소에 제목이 없음 개선 사항 해결방법

티스토리 블로그에서 발생하는 접근성 개선 사항중 " div#wrap >  header#header > div.inner > a" " a href=    "http://블로그명.tistoryu.com/:>"  이라는 개선 사항이 발생하는 경우가 있습니다. 이 문제는 iframe 코드에 타이틀 속성이 누락되서 수정하라는 권고사항입니다.

이 때 문제는 이코드가 동적으로 부여되기 때문에 직접 수작업으로 변경이 불가능 하거나 어려운 경우가 있습니다.

HTML 페이지에서 title 속성은 접근성에 중요한 역할을 합니다. 시각 장애인 등 장애가 있는 사용자가 웹 페이지를 탐색할때 필요한 기능으로써 접근성 개선 사항 중 하나입니다.

직접 코딩을 할때는 누락시 본인이 직접 수정하면 되지만 동적으로 생성되거나 변경되는 코드는 직접 수정이 쉽지 않습니다. 코드에 대한 전문적인 지식도 필요하고 코딩 작업도 해야 합니다.그래서 간단하게 javaScript를 사용해서 진행하기도 합니다.

주로 많이 사용하는 방법이 하나로 DOMContentLoaded 코드를 이용해서 하기도 합니다.

브라우저가 HTML 문서를 읽고 DOM(Document Object Model) 트리 형태로 변환을 하는데 그때 HTML문서의 속성,요소,태그등을 분석해서 트리형태의 구조를 형성하게 됩니다. 이때 JavaScript나 CSS와 같은 스크립트와 스타일을 적용하게 됩니다. 그때 원하는코드를 페이지 렌더링 할때 필요한 요소를 삽입하는 방법입니다.

아래 코드를 HEAD 사이에 추가하시게 되면 자동으로 필요한 요소 TITLE 속성을 형성하므로 누락된 코드를 대처할 수있는 간단한 방법입니다. 본인에 맞게 수정해서 사용하셔도 되고, 만약 아래와 같이 똑같은 문제가 발견되다면 타이틀 속성만 본인이 원하는 타이틀로 수정해서 그대로 사용하시면 됩니다.

 

 

 

 

<script>
window.addEventListener('DOMContentLoaded', function() {
    var iframe = document.getElementById('editEntry');
    if (iframe) {
        iframe.setAttribute('title', '티스토리블로그');
    }
});
</script>