회사소개 홈페이지 웹표준화 준수

[corenet]

이번에 회사소개 홈페이지를 개편하면서 전체적으로 웹표준을 지키느라고 노력을 했습니다. 사내 인력들이 여러 문서들을 참조해 가면서 스터디를 진행하면서 작업을 하느라고 시간이 좀 오래 걸리고 아직 서툰면이 많아서 다른 분들의 의견을 들었으면 합니다.

http://www.rserve.co.kr/

접근성에 대해서도 고민을 하긴 했지만 정확하게 이해를 하지 못하는 면들이 있어서 이 부분에 대한 지적도 많이 해 주셨으면 합니다.
여러 분들의 의견을 듣고 자체적으로 다시 검토하고 관리하고 있는 모든 사이트들을 리뉴얼하면서 하나씩 바꾸어 가려고 합니다.

좋은 의견들 기다리겠습니다.
고맙습니다.^^*

[kwon37xi]

파이어폭스에서도 별 문제 없이 잘 보이네요.

저는 파이어폭스를 좋아하는 사람이지, 웹 디자인을 아는 사람이 아니라서 기술적인 얘기는 못하겠습니다만... ^^

소스를 보니까 이미지로 뜨는 부분에 대해 따로 텍스트도 올려두셨네요.
꼼꼼하게 텍스트 브라우져까지 신경써 주시고...

노력에 박수를 보내드립니다.

[mman]

H1~H6를 이용한 헤드라인 개념의 태그의 사용이 부족해보입니다.
전반적으로 깔끔하나 로고 같은 부분은 H1태그를 사용해서 보여주면
최소한 CSS가 되지 않는 곳에서도 이곳이 어떤 사이트인지 알수있겠지요

현재로썬 로고까지도 LI로 되어 있어서 구별이 어렵다는 문제가 있네요

[corenet]

http://www.rserve.co.kr/publicity/news.asp
위 페이지에 대해서
w3.org 에서는 validate css 문제가 없는데요.
kldp.org 에서 validate css 검사를 하면 아래와 같이 나옵니다.
-------------------
스타일 시트를 의도한 대로 작동 시키려면, 올바른 문서 분석 트리를 가지고 있어야 합니다. 이것은 CSS 검사 전에 HTML 유효성 검사를 먼저 하라는 것을 의미합니다.
--------------------

이건 kldp.org 에서의 문제라고 생각하는데요.
혹시나 페이지 코딩에 문제라면 알려 주셨으면 합니다.

[dece24]

레이아웃용 테이블을 사용하지 않으신 것과 메뉴목록을 목록태그로 처리하신 것은 매우 잘하셨습니다. 또, 모든페이지 하단의 '관련사이트 바로가기' 셀렉트 박스 우측에 'GO' 버튼을 마련해 두신것도 접근성 측면에서 매우 잘하셨습니다. 물론 알고 하셨겠죠? ^^a 다른분들을 위하여 왜 그래야 하는지 굳이 적습니다.

URL을 포함하고 있는 셀렉트박스에 'GO' 버튼이 없는경우, 화면을 볼 수 없는 사람들은 마우스 대신 키보드의 Tab 키를 이용하여 셀렉트 박스 안쪽의 옵션을 선택할 수 있는데 첫 번째 옵션으로 포커스를 옮김과 동시에 해당 페이지로 즉시 이동해 버리기 때문에 다른 옵션을 선택할 수 없는 심각한 접근성 문제가 있습니다. 이 설명이 이해가 되지 않는 분들은 Tab 키만을 이용하여 URL 이동기능이 있는 셀렉트 박스를 조작해 보시면 됩니다.

mman 님 말씀대로 제목은 제목태그로 올바르게 표현해주셔야 합니다. Validation 검사를 통과했다고 해서 웹 표준 이라고 부르기는 아직 이릅니다. 이는 기계적인 검사일 뿐이므로 그것에만 의존하는 것은 바람직하지 않고 우선 코드를 시멘틱 하게 만들어 주셔야 합니다. 제목에 제목태그를 사용하지 않은것은 분명 잘못된 문법입니다. 유효성 검사 엔진이 시멘틱한 코드까지 검증해주지는 않지요. 기계는 어떤부분이 제목인지 알 수 없기 때문입니다. 레이아웃용 테이블을 사용하더라도 Vlaidation 검사는 통과할 수 있습니다. 하지만 그것을 표준이라고 부르지는 않는것과 같습니다.

'웹 표준 사이트의 조건' = 'Validation 검사통과' + '시멘틱코드(의미적절한코드)'

다음은 의미전달이 없는 이미지의 사용 문제 입니다.
[img src="/images/include/top_bg.gif" width="754" border="0" alt=""]

이 이미지는 문서의 상단에 사용된 레이아웃용 투명(흰색?) 이미지 입니다. 간격을 벌이기 위해서 사용하셨던데 이런 표현방식보다 CSS 의 offset 속성(left, right, top, bottm) 이나 float 또는 text-align 속성을 사용하는 것이 바람직 합니다. 첨언하여 image 에는 width 값과 height 값을 모두 적어주는 것이 로딩속도에 도움이 됩니다. height 값을 빼먹으셨더라구요.

다음은 글로벌 메뉴의 접근성 문제 입니다.
[a href="/company/greeting.asp" title="회사소개"][span]회사소개[/span][/a]

텍스트로 처리된 a 태그에 title 속성을 또 넣어서 위와 같이 표현하신 부분은 오히려 접근성을 해칩니다. 스크린리더는 '회사소개' 라는 문장을 불필요하게 두번 읽어내야 하기 때문에 오히려 듣기 불편합니다. 아무 의미 없는 span 태그를 사용한 것도 문제 입니다. CSS를 이용하여 메뉴를 표현하려다 보니 사용하신 듯 한데 이는 span 태그가 없어도 가능 합니다.

다음은 인라인 스타일의 사용문제 입니다.
인라인 스타일과 인터널 스타일 방식을 적지않게 사용하셨는데 이는 CSS의 장점을 잘 살리지 못하는 방식 입니다. 유지보수가 쉬우려면 CSS 코드는 전부 HTML 문서 밖으로 빼내는 것이 좋습니다. 그렇게 되면 나중에 디자인만 일부 변경할 때 HTML 문서까지 열어볼 필요는 없어지겠지요.

CSS 코드가 증가할 때에는 아래와같이 여러개의 파일로 나누어 관리하는 방식도 나쁘지 않습니다.
default.css,
layout.css,
navigation.css,
content.css,
board.css,
print.css
등등..

다음은 서체문제.
px 단위를 사용하셨는데 em 또는 % 단위를 사용하시면 IE에서도 줌 브라우징이 가능해 집니다. px 단위를 사용하더라도 FF, OP 에서는 줌 브라우징 되지만 IE는 이를 지원하지 않더군요. 그래서 상대단위를 사용하는 것이 좋습니다. IE에서 'Ctrl+마우스휠' 굴려보시면 서체크기의 줌 브라우징 지원여부를 확인할 수 있습니다. 물론 px 으로 서체단위를 고정한 곳에서는 기능하지 않습니다.

이미지 아래쪽에 display:none 되어있는 대량의 텍스트.
본래 img 태그에 longdesc 라는 속성이 있습니다. alt 로 표현되기에는 너무많은 텍스트를 별도의 페이지에 넣어놓고 img 에서 링크해주는 속성입니다. 물론 시각이 정상인 사람은 해당사항이 없지만 스크린리더기는 longdesc 속성을 읽어줄 것입니다.(아직 국산 스크린리더기로 시도해본 바가 없어서 정말로 지원하는지 여부는 모릅니다. 하지만 표준은 이렇다고 말씀드리는 겁니다.) 개인적으로 저렇게 많은 텍스트는 이미지로 표현하지 말아야 한다고 생각합니다. 물론 이미지보다 조금 덜 이쁘기는 하겠지만. 예쁜여자랑 결혼하는 것보다 살림살이 잘하는 여자랑 결혼하는게 더 낫지 않습니까? ㅎㅎ

조금만 적으려고 했는데 코드를 직접 열어서 살펴 보다보니까 말이 조금 많았네요. 아예 모르는분이 이런글을 올렸다면 좀더 간략한 답변이 나왔을텐데 잘 아시는 분이신것 같고 조금만 개선하면 충분히 멋진 코드가 나올것 같아서 상세하게 적었습니다. 적다가 보니까 corenet 님의 업적을 깍아내린것 같이 되어 죄송하지만 표준을 위한 이런 노력은 높이 평가되어야 한다고 생각합니다.

그리고 접근성 문제와 관련된 드림위버 팁을 적어놓은 것이 있어 링크해드립니다. http://naradesign.net/wp/2006/10/31/88/

[corenet]

좋은 지적 고맙습니다.
처음으로 공식적으로 진행했던 부분들이라서 정확히 이해를 하지 못하고 제작된 부분들이 있긴합니다. 알면서도 이미 오픈한 상태에서 다른 일들에 치이다 보니 손보지 못하고 있기도 하고요. (회사가 돈을 벌어야 하는게 먼저이다 보니.. 쩝^^)
내부적으로 구조적인 정의를 만들어 놓고 관련자들이 다 같이 작업을 해야 하는데, 아직까지 저희 조직에서는 벅찬상태입니다. 지속적으로 교육을 다니고 내부 스터디를 진행하고 있지만, 그렇게 쉽지는 않아서 어떻게 하면 좋을지 고민이기도 합니다.

두군데에 대해서 궁금한 것이 있습니다.

먼저 [a href="/company/greeting.asp" title="회사소개"][span]회사소개[/span][/a] 부분은요. title은 좀 수정해야 겠습니다. 중복해서 똑같은 표현을 사용한건 문제가 있다고 생각합니다. span 태그가 의미없다고 하신 부분은 일단 저희가 작업을 하면서 "KIPA - 실전 웹 표준 가이드"를 참고해서 해당 내용을 가지고 진행을 했습니다. 메뉴에 대한 이미지 처리를 하려다 보니 text에 대한 부분이 문제가 되서 숨기기 위해서 사용을 했고요. 이 부분은 더 좋은 방법이 있으면 알려 주셨으면 합니다.

두번째로 자세한 설명에 대한 longdesc 부분입니다. 실제로 저희쪽에서도 스크린리더를 사용할 수가 없고 다른 장치들에 대해서도 어떻게 반영이 되는지 확인을 할 수 있는 방법이 없습니다. 표준이 longdesc라는 것을 알지만 실제로 어떻게 적용이 되는지에 대해서 정확한 이해가 없긴 합니다. 실제로 이 부분이 longdesc로 처리한것과 저희쪽에서 처리한 방법이 어떻게 다르고 좀 더 좋은 방법이 어떤것이 있는지에 대해서 궁금합니다.

@@ 습관이라는것이 정말 중요하다는 것을 많이 느끼고 있습니다.
@@ 즐거운 하루 되세요~~

[dece24]

1. 글로벌 메뉴의 표현기법에 관한 문제.

텍스트 사용후 텍스트를 감추고 배경이미지로 표현하셨습니다. 이런 기법을 IR(Image Replacement) 기법이라고 합니다. 하지만 현존하는 대부분의 IR 기법에는 접근성과 관련된 문제점이 존재합니다. 작업하신 페이지에서 Image 표시안함 이라는 브라우저 고유기능을 사용하게 되면 Image 도 보이지 않고 Text도 보이지 않는 문제가 발생합니다. 물론 Image 표시안함 이라는 기능을 사용하는 분들이 많지는 않을지라도 데이터 전송량에 따라 요금을 부과해야만 하는 기기를 사용하는 분들가운데 요금을 절약하기 위하여 이런 기능을 사용하는 분들이 없다는 보장은 못합니다. 따라서 이 부분까지 고려되어야 한다는 의미 입니다.

결론은 "Image 는 그냥 Image 로 표현하고 대체문자를 성실하게 표기해주는 방법이 현재로서는 최선의 선택이다" 라는 겁니다.

span 태그를 display:none 상태로 두셨는데 일단 display:none 된 콘텐츠는 스크린리더도 읽을 수 없습니다. IR기법이 접근성 문제가 있다는 것도 알지만 굳이 사용하고자 한다면 일단 의미없는 span 태그를 제거한 다음 a 태그에 대하여 text-indent:-3000em 과 같은 형식으로 들여쓰기 음수값을 주어 Text 를 화면 밖으로 보내버리는 방법을 쓰거나 또는 padding-top:45px; height:0px; overflow:hidden 형식으로 처리하여 Text를 영역 밖으로 내보낸 다음 메뉴영역 바깥쪽을 overflow:hidden 시켜 버리는 방법도 있습니다. 제가 설명드린 방법이 모두 IR 기법의 일종이며 권장되지는 않지만 알아두시는 것도 나쁘지는 않을것 같아서 설명해 드렸습니다.

2. 이미지를 대체하는 텍스트의 분량이 많을 때 해결문제.

제가 첫 번째 댓글에 의견드린 것처럼 이런경우 가능하면 텍스트로 처리하는 것이 좋다는 것을 다시한번 강조하구요. 그 다음 longdesc 라는 속성을 사용할 것을 권해드렸습니다. 일단 display:none 으로 숨긴 텍스트는 스크린리더도 읽을 수 없다고 위에서 설명드렸기 때문에 부연설명 드리지 않아도 될 것 같습니다. 하지만 원칙적으로 longdesc 속성을 사용하면 스크린리더가 읽을 수 있습니다.(방금 신현석님께 문의해본 결과 국산 스크린리더는 longdesc 속성을 지원하지 않는 것으로 알고 있다고 합니다. 대략 좌절이군요. ㅜㅡ;)

결국 display:none 되어 있는 텍스트는 다른 방식으로 표현하는 것이 낫겠습니다. 우선 텍스트로 된 콘텐츠를 입력하시고 이미지를 배경으로 처리한 다음 텍스트는 영역 밖으로 숨기는 방법(위에서 설명드린 IR 기법) 입니다. IR 기법은 Image 숨김기능을 사용하는 분들에게 접근성에 문제가 되지만 스크린리더 사용자에게는 문제가 되지 않습니다. 역시 접근성 문제 때문에 권장하고 싶지 않은 방법이지만 현재의 방법보다는 낫다고 판단됩니다.(물론 현재의 방법이나 IR 기법이나 모두 문제가 있으므로 피하는 것이 좋다는 견해가 있다면 그 말씀이 옳습니다.)

[corenet]

위에 지적한 사항들에 대해서 최대한 적용한다고 했습니다.
아직 일부 table을 사용한 곳들과 form label 등에 대해서는 문제가 있습니다.
이 부분은 좀 더 시간을 가지고 적용을 해야 할듯 합니다. (다른 일들이 밀려있다보니..)
작업을 하면서 약간 애매했던 부분들을 정리할 수 있었습니다.
좋은 내용들 고맙습니다.

IR 기법은 아래 페이지에 있는 z-index 방법으로 변경했습니다.
http://www.nmindplus.com/2006/09/24/z-index/
이 방법이 현재 방법들중에서 최선이 아닌가 싶습니다.
disable images / disable styles 상태에서도 무리가 없이 다 표현할 수 있지 않을까 생각됩니다.

이 방법에는 어떤 문제가 있을까요?
제가 생각할때는 표현할 수 있는데로 표현하면서 접근성도 충분히 고려해 주고 있다고 생각되는데요..

[dece24]

nmind 님께서 소개하신 IR 기법은 제가 알고 있는 방법 가운데 나름 '표현'에 있어서는 가장 괜찮다(접근성에 대한 문제는 없기 때문에) 라고 생각하고 있습니다.

하지만 여전히 남아있는 문제는 [li][a][span]메뉴[/span][/a][/li] 이런 코드가 시멘틱 하지 않다라는 겁니다.

span 이 아무런 의미를 갖지 않으면서도 마크업 되어있다는 점이 문제입니다.
제가 너무 Critical 한건가요 ㅡㅡ;

[quri]

저는 이런 방법을 가끔 쓰기도 합니다.

코드: 모두 선택

<h1 class="quri" >myTitle</h1>

.quri {    
  width: 100%;
  border: 0;
  height: 5em;
  padding-left: 2100px;
  text-indent:-3000em;
  background: url(/images/img_title.gif) no-repeat;
}

padding 으로 밀려난놈이 width와 height 로 인해 짤려 안보이게 되더라구요.

주로 input button 에 사용해 왔습니다.

저도 span tag 를 추가 하는것은 절대 반대 입니다.

[겨미겨미]

저는 이런 방법을 가끔 쓰기도 합니다.

코드: 모두 선택

<h1 class="quri" >myTitle</h1>

.quri {    
  width: 100%;
  border: 0;
  height: 5em;
  padding-left: 2100px;
  text-indent:-3000em;
  background: url(/images/img_title.gif) no-repeat;
}

padding 으로 밀려난놈이 width와 height 로 인해 짤려 안보이게 되더라구요.

주로 input button 에 사용해 왔습니다.

저도 span tag 를 추가 하는것은 절대 반대 입니다.

quri님께서 사용하신 Image Replace 방법 역시 이미지 비활성화 시 접근성의 문제를 갖습니다. 이미지 요소가 아닌 텍스트를 img 태그를 이용하는 것도 불필요한 마크업을 추가해서 접근성의 문제를 해결한 Image Replace 기법을 활용하는 것도 모두 속 시원하지는 않죠. 접근성을 생각한다면 이 속 시원하지 않은 두 가지 방법 중 한가지를 택하는 게 좋을 것 같습니다.

군더더기 없는 마크업을 위해 접근성을 희생한다는 것, 저도 예전에 Image Replace 기법을 사용하면서 "이 정도 쯤이야"하고 생각했는데요. 왜 이런 마크업을 쓰는지 생각해보고 생각이 좀 바뀌었습니다. 이미지 비활성화 시 접근성 문제를 일으키는 Image Replace 기법은 쓰지 않기로요. ^^;