사용자가 혼란을 격지 않도록 새 창이나 탭으로 연결되는 링크나 버튼은 사용자에게 미리 이 사실을 알려줘야 합니다.
기술설명
이 기술의 목적은 새 창이나 탭을 열기 전에 사용자에게 미리 알려주는 것입니다.
링크를 활성화 할 때 새 창으로 열리면 시각적 콘텐츠 인식에 어려움을 가졌거나 인식 장애가 있는 사용자에게 방향 감각을 잃게 만듭니다. 즉 사이트 내에서 어디에 위치해 있는지를 잊을 수 있습니다.
사용자에게 이 링크나 버튼을 활성화하면 새 창으로 나타난다는 것을 미리 알려주게 되면 사용자는 선택할 수 있습니다.
사용자가 새 창으로 이동하는 것을 선택하였다면, 다시 돌아 갈 수 있도록 도와주어야 합니다.
사용자가 새 창을 이용하면 브라우저의 [뒤로(Back)]버튼을 이용해도 이전 창으로 돌아 갈수 없다는 것을 알게 됩니다.
이전 위치로 가기 위해서는 마지막으로 열었던 창으로 돌아가야 한다는 것을 알게 될 겁니다.
예시
[예제1] 사용방법을 설명해주는 경고문구 포함
레이블(label)이나 이름에 새 창에 대한 경고 문구를 포함 시킬 수 있습니다.
<a href="king.html" target="_blank">킹이란?(새 창 열기)</a>
[예제2] CSS로 새 창으로 열린다는 것을 알려주기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML</title>
<style>
* { margin:0 ; padding:0 }
:focus { outline:0; }
a.info {
position:relative ; z-index:24 ; background-color:#ccc ;
color:#000; text-decoration:none
}
a.info:hover , a.info:focus , a.info:active { z-index:25 ; background-color:#ff0 }
a.info span {
position:absolute ; left:-9000px ;
width:0 ; overflow:hidden
}
a.info:hover span , a.info:focus span , a.info:active span {
display:block ; width:12em ;
position:absolute ; top:1em ; left:1em ;
border:1px solid #0cf ; background-color:#cff ;
color:#000 ; text-align:center
}
div.example { margin-left:5em }
</style>
</head>
<body>
<h1>팝업 경고</h1>
<p>
예제 링크:
<a class="info" href="popup.html" target="_blank"> <strong>열기버튼</strong><span>새 창 열기</span></a>
</p>
</body>
</html>
관련기술
H83: 사용자 요청에 따라 대상 속성을 사용하여 새 창을 열고 링크 텍스트에 이를 표시
SCR24: 사용자 요청에 따라 점진적 향상을 사용하여 새 창 열기
점검절차
사용자의 요청으로 새 창이나 탭으로 열리는 링크가 있는 경우,
1. 이 링크가 새 창으로 열린 다는 경고가 보조 기술로도 나오는지 확인합니다.
2. 이 링크가 새 창으로 열린다는 것을 시각적인 방법으로도 경고하는지 확인합니다.
https://link.coupang.com/a/cl4UpZ
Do it! HTML + CSS + 자바스크립트 웹 표준의 정석: 한 권으로 끝내는 웹 기본 교과서 전면 개정판 - 프
쿠팡에서 Do it! HTML + CSS + 자바스크립트 웹 표준의 정석: 한 권으로 끝내는 웹 기본 교과서 전면 개정판 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 프로그래밍 언어 제품도 바로 쿠
www.coupang.com
https://link.coupang.com/a/cl4UBK
Do it! 인터랙티브 웹 페이지 만들기 - HTML/CSS | 쿠팡
쿠팡에서 Do it! 인터랙티브 웹 페이지 만들기 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 HTML/CSS 제품도 바로 쿠팡에서 확인할 수 있습니다.
www.coupang.com
*이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
나의 정리
링크나 버튼을 눌렀을 때 새 창이나 탭으로 열리는 경우 사용자가 사이트 내에서 현재 페이지의 위치를 잊어 혼란스러워 할 수 있습니다. 특히 인지적 장애가 있는 사용자라면 이 상황이 더 힘 들 수 있습니다.
그래서 새 창이나 탭으로 열리는 경우 사용자에게 미리 알려줘야 합니다.
라벨(label)이나 요소 안의 텍스트로 새 창으로 열린다는 내용을 넣어 주어야 합니다.
그러면 사용자는 이를 감지하고 새 창을 사용할지 말지를 선택할 수 있게 됩니다.
사용자가 혼란을 격지 않도록 새 창이나 탭으로 연결되는 링크나 버튼은 사용자에게 미리 이 사실을 알려줘야 합니다.
G201: Giving users advanced warning when opening a new window
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G201.html
G201: Giving users advanced warning when opening a new window | Techniques for WCAG 2.0
The objective of this technique is to provide a warning before automatically opening a new window or tab. Opening new windows automatically when a link is activated can be disorienting for people who have difficulty perceiving visual content, and for some
www.w3.org
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G203] '토크 헤드 비디오(말하는 사람의 얼굴만 나오는 영상)'에 '정적 텍스트 대안'을 제공하자. (0) | 2025.04.16 |
|---|---|
| [웹접근성 지침-일반기술 G202] 모든 기능은 키보드로도 제어 할 수 있어야 한다 (0) | 2025.04.15 |
| [웹접근성 지침-일반기술 G200] '새 창'과 '탭 열기'는 필요할 때만 사용하자. (0) | 2025.04.09 |
| [웹접근성 지침-일반기술 G199] 데이터가 성공적으로 서버에 제출되었다면 성공사실을 사용자에게 알려주자. (0) | 2025.04.07 |
| [웹접근성 지침-일반기술 G198] 사용자가 제한시간을 해제할 수 있는 기능을 제공하자. (0) | 2025.04.05 |
