목차

1. 들어가기
2. wrest.js 소스 비교
   1. 기존 소스
   2. 개선 소스
3. 소스 해석

들어가기

온라인 서식 작성 시 클라이언트 사이드에서 유효성을 체크하는 기능은 상당히 유용한 기능입니다. 이것은 비단 일반인에게만 유용할 뿐만 아니라, 장애인들에게는 더 없이 유용한 기능입니다.
하지만 개발진은 스크린리더(특히 센스리더) 테스트 시 유효성 검사 후 포커스 이동 시, 가상 뷰포인트는 함께 이동하지 않는 오류를 발견했습니다. 이것이 스크립트 포커싱의 오류인지, 센스리더의 오류인지에 대한 판단은 보류한 상태입니다.

또한 센스리더는 javascript:alert 으로 생성된 대화상자의 메세지를 읽어주지 못하는 문제점이 있습니다. 이 문제를 해결하기 위해 텍스트 혹은 레이어로 오류 메세지를 읽어줘야 할 필요성이 있었습니다.

중요한 것은 이러한 오류가 발견된 이상 홈페이지의 원활한 운용을 위해서는 더 이상 방치할 수 없다고 판단했습니다. 그래서 여러가지 방법을 고민/연구한 결과 다음의 코드가 최선이라고 결론을 내렸습니다.
이 내용은 그누보드4s 뿐만 아니라 일반적인 온라인 서식에도 적용할 수 있으며, 웹 접근성을 향상시킬 수 있는 작은 팁이 되길 기대합니다.
혹시 오류나 문제점이 있다면 언제든 알려주세요. :)

wrest.js 소스 비교

기존 소스

// 필드가 null 이 아니라면 오류메세지 출력후 포커스를 해당 오류 필드로 옮김
// 오류 필드는 배경색상을 바꾼다.
if (wrestFld != null) 
{ 
    alert(wrestMsg); 
    if (wrestFld.style.display != 'none') 
    { 
        wrestFld.style.backgroundColor = wrestFldBackColor; 
        wrestFld.focus(); 
    } 
    return false; 
}

개선 소스

// 필드가 null 이 아니라면 오류메세지 출력후 포커스를 해당 오류 필드로 옮김
// 오류 필드는 배경색상을 바꾼다.
if (wrestFld != null) {
    // 경고메세지 출력
    alert(wrestMsg);

    if (wrestFld.style.display != "none") {
        var id = wrestFld.getAttribute("id");

        // 오류메세지를 위한 element 추가
        var msg_el = document.createElement("strong");
        msg_el.id = "msg_"+id;
        msg_el.className = "msg_sound_only";
        msg_el.innerHTML = wrestMsg;
        wrestFld.parentNode.insertBefore(msg_el, wrestFld);

        var new_href = document.location.href.replace(/#msg.+$/, "")+"#msg_"+id;

        document.location.href = new_href;

        //wrestFld.style.backgroundColor = wrestFldBackColor;
        if (typeof(wrestFld.select) != "undefined")
            wrestFld.select();
        wrestFld.focus();
    }
    return false;
}

소스 해석

이 소스의 가장 큰 차이점은 바로 유효성 검사 후 새로운 요소 생성 여부의 차이에 있습니다. 개선 소스에 있는 오류메시지를 위한 element 추가 부분이 새로운 요소를 생성하는 역할을 합니다.

사실 이 방법은 새로운 요소를 생성하는 대신, 미리 해당 역할을 하는 요소를 마크업 상에 입력하는 방법으로 대체할 수도 있습니다. 하지만 이 방법은 온라인 서식을 작성할 때마다 추가적인 마크업 작업을 유발하므로 효율적인 방법은 아닙니다.

다른 한편으로는 자바스크립트 off 환경에 대해서도 고려해볼 수 있는데, 자바스크립트 off 환경에서는 클라이언트-사이드에서 유효성 검사를 하는 것 자체가 불가능하며, 서버-사이드에서 처리를 하기 때문에 특별히 대체 수단을 제공할 필요도 없게 됩니다.

기존 wrest.js의 동작은 마크업 구조를 일체 변경하지 않고, 포커스만 이동하지만, 개선된 wrest.js의 동작은 다음과 같이 동적으로 마크업 구조를 변경합니다.

<th scope="row"><label for="subject">제목</label></th>
<td><input type="text" name="subject" id="subject" required class="required">제목</td>

<th scope="row"><label for="subject">제목</label></th>
<td><strong id="msg_subject" class="msg_sound_only">제목 : 필수 입력입니다.</strong><input type="text" name="subject" id="subject" required class="required">제목</td>

개선된 wrest.js는 필수 입력이었으나 입력이 되지 않았거나, 잘못된 입력 형식에 대한 검사를 통해 문서 구조상 해당 입력 요소의 바로 앞에 strong 요소를 생성하여 에러 메세지를 출력하고 있습니다. 이 때 센스리더 사용자는 방향키 혹은 탭 모두를 이용하여 에러가 난 지점에서부터 서식을 탐색할 수 있게 됩니다.