[티스토리] 웹 접근성 높이기 위한 오류 해결 하기, frame 또는 iframe 요소에 제목이 없음

전편에서 웹 접근성의 목적과 중요성을 공유하며, 한 개의 오류를 해결했었습니다. 이번에도 많은 분들이 Page Speed Insight에서 수정 권고사항으로 많이 보시는 "frame 또는 iframe 요소에 제목이 없음" 오류를 해결해 보겠습니다. 

전편이 궁금하신 분들은 아래를 눌러서 바로 확인하실 수 있습니다. 

[티스토리] 웹 접근성 높이기 위한 오류 해결 하기 : "버튼에 접근 가능한 이름이 없습니다"

 

---

 

Page Speed Insight에서 웹페이지의 성능을 검색했습니다. 휴대전화, 데스크톱 모두 90점 이상으로 높은 점수를 유지하고 있지만, 이왕 수정 권고해 주는 부분을 수정해 보면 좋을 것 같아 진행해 보겠습니다. 

 

 

위에 오류 사항을 보면, 사이드바에 HTML 배너 플러그인에 적용한 쿠팡 광고 코드에 수정이 필요한 상황입니다. 

모든 frame 또는 iframe 요소에는 title 속성이 있어야 합니다. 그런데 지금 코드에는 title 속성값이 빠져 있습니다. 

아래와 같이 title 값을 추가해 주어 오류를 해결합니다. 

<iframe title="coupang ad" src="https://ads-partners.coupang.com/widget"></iframe>

 

 

수정해 보도록 하겠습니다. 

티스토리 관리자 화면 > 사이드바 > 쿠팡광고용으로 만들어놓은 HTML 배너 편집을 누릅니다. 

 

아래 코드를 수정해 줍니다. 

<기존 코드>

<iframe src="https://ads-partners.coupang.com/widgets.html?id=000000&template=carousel&trackingCode=000000&subId=&width=295&height=300" width="295" height="300" frameborder="0" scrolling="no" referrerpolicy="unsafe-url"></iframe>

 

<수정 코드>

<iframe title="coupang ad" src="https://ads-partners.coupang.com/widgets.html?id=000000&template=carousel&trackingCode=000000&subId=&width=295&height=300" width="295" height="300" frameborder="0" scrolling="no" referrerpolicy="unsafe-url"></iframe>

 

---

 

Screen Leader를 설치하여 확인해 보면 쿠팡광고 영역을 인식하고, Page Speed Insight에서 오류가 해결된 것을 확인했습니다.