목차

1. 들어가기
2. 그누보드4와 그누보드4s의 차이점
3. 소스 코드 예제

들어가기

그누보드4s 에서 사용되는 온라인 서식은 다음과 같이 정리할 수 있습니다.

• 로그인
• 회원가입
• 게시판 글쓰기
• 게시판 댓글쓰기
• 쪽지보내기
• 폼메일보내기
• 검색창
• 관리자 모드 내 각종 설정

이 온라인 서식들은 적어도 1개 이상의 필수 입력을 요구하며 다음과 같습니다.

로그인

아이디, 패스워드

회원가입

아이디, 패스워드, 이름, 별명, 이메일

게시판 글쓰기

• 비회원의 경우 이름, 패스워드, 분류(사용 시), 제목, 내용
• 회원의 경우 분류(사용 시), 제목, 내용

게시판 댓글쓰기

• 비회원의 경우 이름, 패스워드, 내용
• 회원의 경우 내용

쪽지보내기

받는 회원 아이디, 내용

폼메일보내기

• 비회원의 경우 이름, 이메일, 제목, 내용
• 회원의 경우 제목, 내용

검색창

검색어

그누보드4와 그누보드4s의 차이점

그누보드4에서는 js/wrest.js 를 실행하여, 온라인 서식의 필수 입력 항목에 wrest.gif 를 배경 이미지로 지정해주는 방법을 통해 필수 입력을 표시했습니다.
이러한 방법으로 온라인 서식 필수 입력을 알려주는 방법은 그누보드4를 다른 사이트와 한 눈에 구별시켜주는 역할을 하기도 했습니다.
하지만 이 방법은 필수 입력 항목에 대해 시각적 정보만 제공하기 때문에 스크린리더 사용자들은 온라인 서식의 어떤 항목이 필수 입력 항목인지 쉽게 알 수가 없었습니다.
그래서 그누보드4s에서는 시각적 정보 뿐만 아니라 청각적 정보도 제공하기 위해 마크업을 개선하고 스타일 역시 분리했습니다. (특히 wrest.js 의 유효성 검사 내용은 dtd 버전에서 사용한 방식을 계승했습니다.)

필수 입력 항목이라는 정보를 제공할 때는 label요소, title속성, placeholder속성 중 한가지를 선택하여 사용합니다.

하나의 입력 항목은 하나의 label을 갖으며, 레이블을 넣기 어려운 경우 title을 갖습니다.
단 mobile 에서는, label이나 title보다 placeholder를 우선적으로 사용합니다.

소스 코드 예제

label을 활용한 예제

<style>
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
</style>

<th scope="row"><label for="wr_subject">제목<strong class="sound_only">필수</strong></label></th>
<td><input type="text" name="wr_subject" value="<?=$subject?>" id="wr_subject" required class="frm_input required" size="50"></td>

이 예제에서 특히 strong요소의 sound_only class를 주목해서 살펴주십시오.

제목 label은 id가 wr_subject 인 input을 가르키고 있습니다. 이 input의 label을 소스 그대로 읽으면,

제목 필수가 됩니다.

하지만 sound_only class 가 <strong>필수</strong> 부분에 적용되어 실제 화면에서는 제목만 출력됩니다.

대신 스크린리더에서는 제목 필수를 모두 읽어줄 뿐만 아니라 <strong>필수</strong>와 같이 strong으로 처리된 문구는 강조해서 읽어주게 됩니다. (혹은 억양을 바꿔서)

title을 활용한 예제

<input type="text" name="stx"  value="<?=stripslashes($stx)?>" title="검색어(필수)"  required  class="frm_input required" size="15" maxlength="15">

위 소스코드에서처럼 검색어 입력 항목에는 마크업 개발자 혹은 퍼블리싱 담당자의 성향에 따라 label 사용을 꺼릴 수도 있습니다.
이런 경우에는 title에 입력 항목의 제목과 더불어 '(필수)' 라는 문구를 추가로 입력해줍니다.

스크린리더는 이렇게 처리된 입력 항목을 다음과 같이 읽어줄 것입니다.

검색어 필수 입력 상자

placeholder를 활용한 예제

모바일에서는 title속성 대신 placeholder속성을 활용할 수도 있습니다. PC에서는 익스플로러 하위 버전에서placeholder 를 지원하지 않기 때문에 사용을 지양하고 있지만, 대부분의 모바일에 탑재된 브라우저에서는 placeholder를 제대로 지원해주고 있습니다.
특히 아이폰, 아이패드의 보이스오버는 놀랍도록 정확하게 지원해줍니다.
안타깝게도 갤럭시 시리즈에서는 제대로 된 테스트를 진행하지 못했는데, 혹시 테스트 방법을 잘 아시는 분 있으시면 가르침 부탁드립니다.

<input type="text" name="mb_id" id="ol_id" placeholder="회원아이디(필수)" required class="required" maxlength="20">

보이스오버는 이 입력 항목을 다음과 같이 읽어줍니다.

회원아이디 필수 텍스트 필드 필요함

보이스오버는 required속성을 가진 입력 상자에 대해 기본적으로 필요함이라는 안내를 해주고 있습니다.
즉 '필수' 라는 안내와 '필요함' 이라는 안내가 중복되어 출력됩니다. 하지만 이 부분은 다른 모바일 기기를 모두 테스트해보지 못했기 때문에 '필수' 안내를 제거하지 않았습니다.
또한 '회원아이디 필수' 부분과 '텍스트 필드 필요함' 부분에는 미묘한 억양 혹은 속도의 차이가 있습니다.

placeholder속성으로 title속성을 대체하는 경우에는 반드시 두개의 속성이 중복되어 입력되지 않도록 주의해야 합니다.

<input type="text" name="mb_id" id="ol_id" title="회원아이디(필수)" placeholder="회원아이디(필수)" required class="required" maxlength="20">

이 소스는 회원아이디 필수 회원아이디 필수 텍스트 필드 필요함과 같이 불필요하게 길게 출력됩니다.