[웹접근성 지침-일반기술 G110] 클라이언트의 즉각적인 반응을 위해 리다이렉트(redirect)를 사용해야 합니다.

원본: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G110.html

---

리다이렉트(redirect)를 사용한다면 사용자가 혼란 느끼지 않도록 빠르게 이동할 수 있게 해야 합니다.

---

기술설명

이 기술의 목적은 사용자의 혼란을 방지하기 위해 클라이언트 측에서 리다이렉트(redirect)를 사용하는 것을 말합니다.

리다이렉트는 서버 측에서 구현해 주는 것이 좋습니다.

서버측에서 리다이렉트를 제공하면 새로운 URL에 있는 콘텐츠로 가기 전에 새 콘텐츠가 표시되지 않습니다.

그렇다고 제작자가 서버 측 기술을 제어할 수도 없습니다.

이런 경우에는 클라이언트 측에서 리다이렉트를 제공해 주어야 합니다.

클라이언트에서 리다이렉트를 제공하면, 사용자의 에이전트에게 다른 URL에서 콘텐츠를 검색하도록 지시할 수 있습니다. 콘텐츠 내부에 코드를 넣으면 가능합니다.

리다이렉트는 페이지나 웹페이지에 리다이렉트와 관련된 정보만 포함시키는 것이 가장 좋은 방법입니다.

 

 

예시

HTML에서 'meta Refesh'로 시간지연 없이 해당 URI로 이동하기

HTML 4.x와 XHTML 1.x에서는 meta 태그를 이용하여 클라이언트 측에 리다이랙트를 구현할 수 있습니다.

<meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />

메타태그의 '새로 고침(refresh)' 기능을 이용하여 즉각적인 클라이언 측 리다이렉트를 구현합니다.

 

 

관련기술

H76: 메타 새로 고침을 사용하여 즉각적인 클라이언트 측 리디렉션 생성

SVR1: 클라이언트 측이 아닌 서버 측에서 자동 리디렉션 구현

 

 

점검절차

1. 다른 페이지나 웹페이지에 대한 각각의 링크나 프로그램을 참조하는 부분이 있는지 확인합니다.

2. 각 링크나 프로그램을 참조하는 부분에 대하여 웹페이지에 클라이언트 측 리다이렉션을 발생시키는 코드가 포함되어있는지 확인합니다.

3. 클라이언트 측 리다이렉션을 발생시키는 각 링크나 프로그램을 참조하는 부분에 대한 리디렉션의 시간제한이나 지연 없이 구현되는지 확인하고 해당 페이지에 리다이렉션과 관련된 정보만 포함되어 있는지 확인합니다. 

---

 

나의  정리

먼저 리다이렉트(redirect)가 무엇이고 왜 사용하지는 지부터 알아봅시다.
리다이렉트(redirect)란 웹 페이지에서 지정된 다른 URL로 '자동 이동'하는 것을 말합니다.

이렇게 다른 URL로 '자동 이동'하게 하는 리다이렉트(redirect) 기능을 사용하는 이유에는 여러 가지가 있지만, 
가장 대표적인 이유가 홈페이지의 도메인이 변경되었을 때입니다.

예를 들어 보겠습니다. '조립'이란 회사가 'jolib.kr'이라는 도메인의 홈페이지를 운영하였습니다. 
그런데 어느날 회사 이름이 '만가지조립'이라고 변경되었습니다. 
그래서 회사 이름에 맞는 '10000-jolib.kr'이라는 도메인을 구입하여 홈ㅍ페이지를 운영합니다. 
도메인이 변경었는지 모르고 'jolib.kr'으로 접근하는 사용자를 위하여 리다이렉트(redirect) 기능을 적용합니다.
즉 브라우저 URL에 'jolib.kr'라고 입력하면 자동으로 '10000-jolib.kr'로 이동하게 되는 것입니다.

다른 예를 들어보겠습니다.
웹 서핑을 하다 광고를 클릭했는데 갑자기 여러 홈페이지들이 연속해서 뜨는 경우가 있습니다. 
이런 현상은 리다이렉트(redirect)기능을 이용하여 자동으로 홈페이지를 띄우게 하는 것입니다.

이런 리다이렉트(redirect)기능은 서버에서 지정할 수 없으며 클라이언트에서 지정해 주어야 합니다.
HTML 파일에 아래 소스 중 하나를 삽입하면 됩니다.

 

<meta http-equiv="refresh" content="0;URL='https://example.com'" />

메타태그의 refresh속성을 이용한 방식으로 가장 추천하는 방식입니다.
content="0;URL='https://example.com'  0초 후에 https://example.com으로 '자동 이동'한다는 의미입니다.
0대신 3을 넣으면 3초 후에 이동합니다.

 

<script>window.location.href = "https://example.com";</script>

자바스크립트를 이용한 방식입니다.

 

<script>
  setTimeout(function() {
    window.location.href = "https://example.com";
  }, 3000);
</script>

자바스크립트를 이용한 방식으로 타이머를 지정할 수 있습니다.
예제는 3초(=3000)후에 자동이동 하게 되어 있습니다. 

 

리다이렉트(redirect)를 사용할 때 주의 점은 지연시간이 없어야 합니다.
만약 지연시간이 있다면 사용자는 웹페이지가 2번 바뀌는 현상을 보게 되면서 혼란을 느끼게 됩니다.
그리고 리다이렉트(redirect) 기능을 가지고 있는 HTML 문서는 리다이렉트(redirect)기능을 제외하고 다른 소스나 정보는 입력하지 않는 것이 좋습니다. 이른 소스들로 인해 지연시간이 생길 수 있기 때문입니다.

리다이렉트(redirect)를 사용한다면 사용자가 혼란 느끼지 않도록 빠르게 이동할 수 있게 해야 합니다.

---

 

G110: Using an instant client-side redirect

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G110.html

G110: Using an instant client-side redirect | Techniques for WCAG 2.0