실시간 이벤트나 정해진 시간 내에 응답이 필요한 기능은 사용자가 시간에 구애받지 않고 읽거나 상호작용을 하거나 응답할 수 있어야 한다.

국가표준 항목 2.6에 따르면 자동적으로 갱신되도록 구성된 콘텐츠, 일정 시간이 경과하면 다른 페이지로 이동하도록 구성된 콘텐츠, 깜빡이는 텍스트나 스스로 스크롤 하도록 구성된 텍스트, 짧은 기간 동안 나타났다 일정시간 후에 사라지는 대화창, 일정시간 동안 사용하지 않으면 페이지에 대한 접근이 강제 차단되거나 사용할 수 없게 되는 콘텐츠 등과 같이 정해진 시간 내에 응답이 필요한 콘텐츠들은 사용하지 않아야 하며, 꼭 사용해야 할 경우에는 사용자가 그 기능을 조작할 수 있도록 해야 한다.

2.1.1 요구조건

(1) 팝업(Pop-Up) 창을 열 때에는 사용자에게 팝업창의 열림을 공지하여야 한다.
(2) 사용자가 의도하지 않은 브라우저 창의 크기 변경, 위치 이동 등은 발생하지 않아야 한다.

2.1.2 적용방법

가) 팝업창 열기사용자가 요구하지 않은 팝업창을 열도록 허용해서는 안된다. 뿐만 아니라 팝업창을 열고자 하는 경우에도 사용자에게 이 사실을 알려주어야 한다. 팝업창의 열림을 알려주는 방법은 링크 요소의 직전에 알려주기, 또는 링크 텍스트를 이용하여 알려주기, 그리고 링크의 title 속성을 이용하여 알려주는 방법이 있다.

팝업창 또는 새 창 열기를 한 후에는 팝업창 또는 새 창이 정상적으로 열렸는지를 확인하여야 한다. 브라우저에서 새 창 열기를 차단한 경우에는 팝업창이 열리지 않는다. 따라서 팝업 창이 열리지 않아 아무런 콘텐츠가 표시되지 않았음에도 불구하고 팝업창이 열렸다고 알려준다면 화면 낭독 프로그램의 사용자에게 큰 혼란을 주게 된다.

아래의 코드는 onclick 이벤트 핸들러를 이용하여 팝업창을 열도록 구성한 프로그램이다. 만일 브라우저가 새 창 열기를 허용하지 않으면 새 창이 열리지 않는다.

새 창 열기가 차단된 브라우저에서 새 창 열기를 하는 경우에 새 창을 열지 않고 이미 열려있는 브라우저 화면을 이용하도록 하려면 다음과 같이 프로그램을 수정하여야 한다.

여기서 pop() 함수는 새 창이 열리면 false 값을, 새 창이 열리지 않으면 true 값을 리턴하고, pop() 내부에서 새 창이 열리지 않으면 기존의 웹 브라우저 창에 콘텐츠를 표시하도록 코딩할 수 있다.

나) 하이퍼텍스트 레퍼런스의 제공 링크를 명시하는 것이 더 큰 효과를 보이는 부분은 팝업창이다. 여기서 말하는 팝업창은 전체 창이 새로 뜨는 것이 아니라 작은 창을 띄우는 것을 말한다. 팝업창을 띄우려면 JavaScript의 window.open 메쏘드를 사용한다.

아래의 예제는 이미지에 onclick 이벤트 핸들러를 사용하여 작은 창을 열고 popup.html 페이지를 표시하는 것이다. 하지만 이 방법은 마우스 포인터가 바뀐다거나 키보드 초점이 제공되지 않기 때문에 사용자 입장에서는 사용하기가 어렵다.

키보드 초점을 제공하고 마우스 포인터가 바뀌는 등 보통의 링크와 가장 유사한 방법을 구현하기 위해서는 아래와 같이 프로그램을 작성하여야 한다.

그러나 위의 방법도 접근성에는 한계가 있다. 그 이유는 팝업창과 함께 열려야 하는 웹 페이지 주소가 이벤트 핸들러 안의 JavaScript 구문에 있기 때문이다. HTML 상의 링크에는 페이지에 대한 정보가 제공되지 않고 웹 페이지 조각을 나타내는 #으로만 되어 있다. 그런데 접근성을 향상시키기 위해서는 HTML 상의 하이퍼텍스트 레퍼런스 속성에 팝업창의 주소를 제공하여야 한다. 또한 이벤트 핸들러 안의 JavaScript 구문의 팝업창 주소를 this.href로 표시한다. 이렇게 코딩하면 HTML 부분에 웹 페이지 경로에 대한 정보('popup.html')가 있기 때문에 JavaScript에 관계없이 웹 페이지의 링크가 제공되므로 접근성이 향상된다. 뿐만 아니라 브라우저에서 지원하는 새 창 열기나 북마크 기능 등에서도 HTML에 들어 있는 정보를 활용할 수 있다. 아래의 예제에서 "popup.html"이 HTML 부분에 나타나 있음을 알 수 있다.

다) 링크의 사용 링크는 앵커(anchor) 요소를 사용하여 문서를 서로 연결시키는 역할을 한다. 사용법은 앵커 태그 a에 href 속성을 이용하여 연결할 링크의 URI를 표시한다. 이 때 하이퍼텍스트 레퍼런스 속성은 반드시 유효한 URI 값을 가지고 있어야 한다. 그러나 종종 JavaScript: myFunction( )과 같이 URI가 아닌 다른 값을 사용하는 경우를 볼 수 있다. 'JavaScript:' 로 시작하는 방법은 JavaScript를 바로 실행할 수 있는 장점이 있지만 HTML 문서 내에서 사용하는 href 값으로는 적절하지 않다. 이 방법은 폐기된 방법이기 때문에 정상적인 동작을 보장하지 못한다.

href 속성에 유효한 값이 아닌 다른 값이 들어갈 경우, 이는 올바른 링크가 아니기 때문에 여러 가지 혼란을 가져올 수 있다. 많은 브라우저에서 이러한 링크를 허용하고 있지만 일부 브라우저에서는 올바르게 동작하지 않는다. 예를 들어 href 값이 유효하지 않으면 마우스 오른쪽 클릭을 했을 때 새 창 열기나 북마크 기능 등을 사용할 수 없다.

접근성을 높이기 위해서는 href 값으로 유효한 값을 제공하고, 이벤트 핸들러를 이용해서 링크로 이동하거나 새 창 열기를 하는 등의 기능을 구현한다. 유효한 링크인지를 판단하려면 HTML 레벨에서의 적절한 동작이 무엇인지를 생각해 보아야 한다. 예를 들어 탭으로 여러 콘텐츠를 보여주는 기능을 구현하는 경우에, 탭은 지정된 콘텐츠 블록과 연결되어 있어야 하며, 탭을 클릭하는 것은 탭에 연결된 콘텐츠 블록을 확인하고자 하는 의도를 내포하고 있다. 따라서 탭의 링크는 콘텐츠의 위치를 나타낼 수 있어야 한다.

아래 그림은 '공지사항'과 '정보통신 접근성 뉴스' 의 두 개 링크 탭에 이어서 '공지사항'에 해당하는 리스트와 '정보통신 접근성 뉴스'에 해당하는 리스트, 그리고 그 사이에 전체 리스트로 이동할 수 있는 'more' 버튼으로 이루어진 웹 콘텐츠이다.

JavaScript를 사용하면 탭을 선택함에 따라 화면에 콘텐츠 블록을 바꾸어 표시할 수 있으므로 탭의 기능이 유효하다.

위의 예제에서 CSS를 제거하면 아래와 같이 표시된다. 따라서 JavaScript 기능을 비활성화 시키는 경우에는 각 탭이 어떤 콘텐츠 블록을 지시하는지 불분명해진다. 링크 속성이 정확히 표시되어 있다면 각각의 탭이 어느 리스트를 나타내는지 좀 더 명확히 알 수 있으므로 접근성이 향상된다.