roughmapLoader.js 내 소스 수정 문의 (웹접근성)

카카오맵 API (지도/로컬)
1

현재 카카오맵 api를 사용하여 지도를 뿌려주고 있는데 웹접근성을 준수하는 홈페이지의 경우
roughmapLoader.js를 통해 불러와지는 소스 중 target=“_blank” 속성을 가진 a 태그에 title=“새창” 이라는 요소를 추가하려고 합니다.
따로 스크립트로 추가하려고 해도 해당 js로 불러와지는 소스이다보니 스크립트가 먹지 않는 것 같더라고요.
이 부분은 a태그에 title 속성을 추가할 수 있는지 혹은 수정해주실 수 있는지 문의드립니다.

2

Hello, @jadoo :slight_smile:

I can suggest a solution to make it compliant with web accessibility rules:

  1. To add title later with JavaScript:
// Let's watch dynamically added elements using MutationObserver
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.addedNodes.length) {
// Let's find all links with _blank target
const links = document.querySelectorAll('a[target="_blank"]');
links.forEach(link => {
if (!link.hasAttribute('title')) {
link.setAttribute('title', '새창'); // "New window"
}
});
}
});
});

// Initialize the Observer
observer.observe(document.body, {
childList: true,
subtree: true
});
  1. Alternatively, you can use a callback that will fire after the map is loaded:
kakao.maps.load(() => {
setTimeout(() => {
const links = document.querySelectorAll('a[target="_blank"]');
links.forEach(link => {
if (!link.hasAttribute('title')) {
link.setAttribute('title', '새창');
}
});
}, 100); // A short delay for the map to fully load
});
  1. By creating a custom roughmap loader:
// custom-roughmap-loader.js
(function() {
const originalLoader = window.daum.roughmap.Loader;

window.daum.roughmap.Loader = function() {
originalLoader.apply(this, arguments);

// After the map is loaded, let's edit the links
this.onLoad = function() {
const links = document.querySelectorAll('a[target="_blank"]');
links.forEach(link => {
if (!link.hasAttribute('title')) {
link.setAttribute('title', '새창');
}
});
};
};
};
})();

Which of these solutions you will use may vary depending on the structure of your project. The first solution (MutationObserver) is the most reliable because it catches all dynamically added links.

Important Notes:

  1. These solutions work after the map is loaded
  2. If you are using observer for performance, be careful not to watch changes outside the map container
  3. The title attribute should be optimized so that it does not affect page performance when added

If you still have problems after implementing one of these solutions or if any other customization is needed, let me know.

3

위 댓글처럼 지도 로드가 끝난 후 a태그 정보 중 target="blank"인 요소를 가져와서 title 속성을 설정해주시면 됩니다.
약도 만들기에서 접근성을 위해 title을 설정하는 부분은 내부적으로 논의해 보겠습니다.

1개의 좋아요