새창띄우기 접근성 넘버투
예전에 새창띄우기에 관한 포스팅을 올렸을때 많은 분들이 다양한 의견을 남겨 주셨었습니다. 못읽어보셨다면 꼭 여러의견을 읽어보시고 다른 생각들 나누어 주시면 감사하겠습니다.
사용자의 측면에서 사용자에게 선택권이 주어지기 위해선 target="_blank" 가 없어져야 하는데, 반대를 보면 선택권의 자유때문에 새창을 선호 하는 이들에게 불편함이 올수 있습니다. 물론 자유와 불편함의 선택이라면 자유이지만 불편함 또한 해소할수 있다면 더 좋겠죠. 유저에게 최대한 선택권을 주는한에서 여러 이득을 얻을수 있는 방법이라고 생각합니다. 일단 이 방법은 최근 멋진 사이트 디자인으로 뜬 ux magazine 이라느 사이트에서 사용한 방법입니다. 오른쪽 맨 하단에 보면
"Open in new window? Select this option if you want to have all external links open in a new window" - 새창으로 여시겠습니까? 외부링크를 새창으로 뜨게 하시고 싶으시면 이 체크박스를 누르세요"
라는 문구가 있습니다. 말 그대로 체크박스에 체크하게되면 외부링크는 새창으로 뜨게 되는것이죠.
방법은 간단합니다. 1. javascript 를 넣는다 (쿠키확인과 외부링크띄우기) 2. html 에 체크박스를 넣어준다 3. 외부링크를 표기한다
/* -------------------------------------------------------------
function getCookie(), setCookie(), deleteCookie()
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Description: 쿠키를 확인합니다
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */</p>
<p> <!--
function getCookie(CookieName) {
var start = document.cookie.indexOf(CookieName + '=');
var len = start + CookieName.length + 1;
if ((!start) && (CookieName != document.cookie.substring(0,CookieName.length)))
return null;
if (start == -1)
return null;
var end = document.cookie.indexOf(';',len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}</p>
<p> function setCookie(CookieName,value,expires,path,domain,secure) {
document.cookie = CookieName + "=" +escape(value) +
( (expires) ? ";expires=" + expires : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
}</p>
<p> function deleteCookie(CookieName,path,domain) {
if (getCookie(CookieName))
document.cookie =
CookieName + '=' +
( (path) ? ';path=' + path : '') +
( (domain) ? ';domain=' + domain : '') +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}
//-->
/* -------------------------------------------------------------
function setLinkAttributes()
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Description: setLinkAttributes는 모든 링크를 찾아
새롭게 정할수 있습니다. external 은
_blank 를 붙여주게 됩니다
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Credits: Script found on Site Point (I think)
http://www.sitepoint.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */</p>
<p> <!--
function setLinkAttributes(switchLinks) {
if (switchLinks == "true") {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];</p>
<p> if (anchor.getAttribute("href") && ( anchor.getAttribute("rel") == "external" || anchor.getAttribute("rel") == "nofollow" ) ) {
anchor.target = "_blank";
}
}
} else {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];</p>
<p> if (anchor.getAttribute("href") && ( anchor.getAttribute("rel") == "external" || anchor.getAttribute("rel") == "nofollow" ) ) {
anchor.target = "_self";
}
}
}
}</p>
<p> function toggleLinkAttributes() {
var ExpireLongTerm = new Date();
var ExpireLongTermValue = new Date(ExpireLongTerm.getTime()+(1000 * 60 * 60 * 360000));</p>
<p> if ( getCookie("externalLinks") == "true" ) {
setLinkAttributes("false");
setCookie("externalLinks","false",ExpireLongTermValue);
} else if (getCookie("externalLinks") == "false") {
setLinkAttributes("true");
setCookie("externalLinks","true",ExpireLongTermValue);
} else if ( !getCookie("externalLinks") ) {
setLinkAttributes("true");
setCookie("externalLinks","true",ExpireLongTermValue);
}
}
//--><input type="checkbox" onchange="toggleLinkAttributes();" id="toggleLinks" />
마지막으로 외부링크에는 rel="external" 을 붙여줍니다.
<a href="링크주소" title="링크입니다" rel="external">외부링크</a>
이 방식을 선택하여 방문자에게 선택권을 주는것, 일모리는 오늘도 의견을 기다립니다.
;