새창띄우기 접근성 넘버투
Sunday, June 25, 2006
예전에 새창띄우기에 관한 포스팅을 올렸을때 많은 분들이 다양한 의견을 남겨 주셨었습니다. 못읽어보셨다면 꼭 여러의견을 읽어보시고 다른 생각들 나누어 주시면 감사하겠습니다.
사용자의 측면에서 사용자에게 선택권이 주어지기 위해선 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: 쿠키를 확인합니다 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ <!-- 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)); } function setCookie(CookieName,value,expires,path,domain,secure) { document.cookie = CookieName + "=" +escape(value) + ( (expires) ? ";expires=" + expires : "") + ( (path) ? ";path=" + path : "") + ( (domain) ? ";domain=" + domain : "") + ( (secure) ? ";secure" : ""); } 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 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ <!-- 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]; 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]; if (anchor.getAttribute("href") && ( anchor.getAttribute("rel") == "external" || anchor.getAttribute("rel") == "nofollow" ) ) { anchor.target = "_self"; } } } } function toggleLinkAttributes() { var ExpireLongTerm = new Date(); var ExpireLongTermValue = new Date(ExpireLongTerm.getTime()+(1000 * 60 * 60 * 360000)); 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); } } //-->
js 코드와 함께 체크박스를 html 에 넣어주면 기본은 잡힌것입니다.
<input type="checkbox" onchange="toggleLinkAttributes();" id="toggleLinks" />
마지막으로 외부링크에는 rel=”external” 을 붙여줍니다.
<a href="링크주소" title="링크입니다" rel="external">외부링크</a>
이 링크들에는 유저가 약간은 더 편하게 사용할수 있는 권리가 부여되는 것이죠. 유저의 사용의 유연성을 위해서 조금더 신경을 쓴다면 더 나아질수 있는 실질적인 부분이라고 생각하네요.
이 방식을 선택하여 방문자에게 선택권을 주는것, 일모리는 오늘도 의견을 기다립니다. ^^;
okoru
Jun/25/06 @ 6:52 pm
정말 괜찮은 방법이네요.
Rantro
Jun/26/06 @ 10:20 am
유저의 권리를 존중한다는 점에서는 좋지만, 유저에게 한 번의 클릭을 더 요구한다는 점에서는 이것도 해결책이 되지는 못하겠네요. 3번 이내의 클릭으로 원하는 정보를 찾을 수 있는 게 이상적이니까요.
오히려 그냥 target을 지정하지 않은 채 그냥 링크 거는 게 좋다고 생각합니다.
일모리
Jun/26/06 @ 12:37 pm
[quote comment="8765"]유저의 권리를 존중한다는 점에서는 좋지만, 유저에게 한 번의 클릭을 더 요구한다는 점에서는 이것도 해결책이 되지는 못하겠네요. 3번 이내의 클릭으로 원하는 정보를 찾을 수 있는 게 이상적이니까요.
오히려 그냥 target을 지정하지 않은 채 그냥 링크 거는 게 좋다고 생각합니다.[/quote]
이부분은 정보를 찾는것과는 약간은 다른 문제 입니다. shift 를 누르고 클릭을 하거나 오른쪽클릭을해서 ‘새창띄우기’ 를 고르거나 하는 과정을 줄여 체크박스 한개로 충족을 시키는 것이기 때문에 사용자 입장에서 마이너스를 불러오는 요소는 거의 없다고 봐도 무관하겠습니다.
어차피 target 이 지원되지 않는 xhtml 이기때문에 이 부분이 존재하던지 하지 않던지 유저에겐 새창혹은 현재창의 선택권이 주어지고 있다는것, 그리고 이 부분이 포함된다면 두가지를 모두 편하게 충족시킨다는 장점을 불러오는것 뿐입니다.
하늘이
Jun/27/06 @ 7:08 am
와, 이제서야 댓글을 쓸 수 있게 되어서 행복해요! ㅠ_ㅜ)/
(원래 예전에 쓰려고 했던 이야기는 까먹…OTL)
그라드
Jun/27/06 @ 11:58 am
좋네요, 쿠키로 저장도 되니 :)
Rantro
Jun/27/06 @ 10:12 pm
제가 잘못 이해했군요. 전 팝업창이 하나 떠서 선택하는 것으로 이해했거든요.
그리고 target이 지정된 링크를 불여우에서 마우스 가운데 버튼으로 열면 오히려 빈 페이지가 뜨는 경우가 많더군요. 불여우의 문제인지…
082net
Jul/27/06 @ 3:39 pm
아무래도 트랙백 보낸게 스팸으로 분류되었거나 오류가 생긴듯 하군요.
수동 트랙백 남깁니다. 워드프레스용 플러그인으로 만들어봤습니다. 글 보기