NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


웹 접근성을 고려한 게시판 제작 기법.

본문 건너 뛰기

민간부문의 장애인 웹 접근성 제고 세미나(2008.11.3)에서 ‘웹 접근성을 고려한 게시판 제작 기법’이라는 주제로 발표하였습니다. 400석짜리 대한상공회의소 국제회의실 홀은 아침부터 저녁까지 가득 차 있었고 약 500여분 정도가 참석하셨다고 하는군요. ‘장애인 차별금지 및 권리구제 등에관한 법률‘이 당장 2009년 4월 부터 ‘공공기관’을 시작으로 적용되기 때문에 많은 분들께서 기다리는 세미나 였다고 생각합니다. 오전에는 주로 웹 접근성에 관한 사회 전반의 분위기에 관한 이야기들로 시작되었고 오후 시간으로 접어들면서 점점 IT 실무자들에게 필요한 주제로 전환 되었습니다. 물론 저도 다양한 이야기를 들어보고 싶어서 아침부터 저녁까지 함께 했고 제 발표는 오후에 진행이 되었습니다. PDF 형식의 자료 배포를 선호하지 않고 사용성이나 접근성이 모두 떨어진다고 생각하기 때문에 발표자료를 이렇게 블로그에 풀어 놓습니다.

  1. 게시판 인터페이스의 웹 접근성.
    1. 숨은 레이어를 가능한 사용하지 않기.
    2. HTML 문법으로 수행 가능한 동작을 Javascript로 처리하지 않기.
    3. Form 전송기능을 Javascript로 처리하지 않기.
    4. 숨은 제목(h*, caption, legend)을 제공하기.
    5. label이 생략된 input은 title 속성을 사용하기.
    6. Permalink 제공하기.
    7. ‘리치 텍스트 에디터’를 제공할 때 ‘플레인 텍스트 에디터’를 함께 제공하기.
    8. 사용자의 실수(세션만료, 로그아웃, 새로고침, 뒤로가기)를 만회할 수 있는 기회 제공하기.
    9. CSS를 지원하지 않는 Form Control요소를 장식하지 않기.
  2. 게시판 인터페이스의 CSS 활용 기교.
    1. 가변폭 텍스트와 줄바꿈 처리에 관한 테이블 표현 기법.
    2. 숨은 제목 제공 기법.
    3. 텍스트 버튼 만들기.

1.1. 숨은 레이어를 가능한 사용하지 않기.

숨은 레이어란 display:none을 이용하여 일부 콘텐츠를 화면에 출력하지 않고 숨겨두는 형태를 말합니다. 이 방법이 문제가 되는 이유는 현재 국산 화면낭독기가 display:none 되어있는 콘텐츠를 모두 읽어내기 때문입니다. 현재 국내에서 50%이상의 점유율을 보이고 있는 화면낭독기 ‘센스리더’는 display:none을 읽지 않아야 한다는 웹 개발자들의 충고를 일부 수용하여 환경설정에서 display:none을 읽지 않을 수 있도록 조치하였지만 기본값은 여전히 display:none을 읽도록 설계되어 있습니다. 시각장애인들이 상황에 맞지 않는(또는 불필요한) 콘텐츠를 건너 뛰는데 많은 시간을 소비한다는 점을 감안할 때 숨은 레이어는 되도록 자제하는 것이 좋다는 의견 입니다. CSS의 모든 속성에는 각각의 속성들을 여러 종류의 미디어들(시각장치, 음성장치, 점자장치…)이 어떻게 받아들여야 하는지가 정의되어 있고 display 속성은 모든 장치에서 이 속성을 받아들이도록 명시되어 있습니다. 참조 CSS2 display, CSS2 Media Group.

1.2. HTML 문법으로 수행 가능한 동작을 Javascript로 처리하지 않기.

a 엘리먼트에 유효하지 않은 href 값을 사용하고 Javascript에 의존하여 페이지 이동을 수행하는 경우가 종종 발견 됩니다. Javascript를 지원하지 않는 브라우저  환경(PC, Mobile)에서는 링크에 접근할 수 없으므로 Javascript는 사용하지 않거나 겸손하게(Javascript를 지원하지 않는 환경에서도 기능할 수 있도록 Javascript 기능은 HTML으로부터 독립적으로 분리) 설계하여야 합니다.

1.3. Form 전송기능을 Javascript로 처리하지 않기.

<input type="submit" value="확인" />, <input type="image" alt="확인" /> 엘리먼트를 사용하면 Javascript 없이도 Form 전송 기능을 수행할 수 있습니다. 그러나 이때 <a href="#" onclick=""><img /></a> 형태로 마크업 한 다음 Form 전송 기능을 Javascript로 처리하는 경우도 자주 발견 됩니다. 이런 경우도 HTML이 해야 할 일을 Javascript가 가로챈 경우로써 Javascript를 지원하지 않는 사용자 환경에서 작동하지 않습니다. 또한 화면낭독기는 HTML 마크업 기반으로 웹 문서를 읽어내기 때문에 Form 전송 버튼을 <a> 엘리먼트로 마크업 한 경우 해당 버튼을 ‘~링크’라고 읽어주게 되고 이 버튼이 진짜 Form 전송 버튼인지 확신할 수 없게 되는 문제가 있습니다. <input type="submit" value="확인" /> 형식으로 올바르게 마크업 하는 경우 화면낭독기는 ‘확인 전송 버튼’ 이라고 읽게 됩니다. <input type="image" alt="확인" /> 형식으로 마크업 하는 경우 ‘확인 이미지 버튼’ 이라고 읽어주게 됩니다.

1.4. 숨은 제목(h*, caption, legend)을 제공하기.

시각이 있는 사용자들은 전체적인 내용을 한눈에 훑어내는 능력이 있기 때문에 각각의 콘텐츠 덩어리에 소제목을 부여하지 않더라도 어떤 내용인지 파악한 다음 빠르게 무시하거나 즉시 읽기를 시작할 수 있습니다. 그러나 시각이 없는 사용자들은 소제목을 생략하면 콘텐츠 본문을 읽어보아야만 해당 항목이 무엇을 의미하는지 추측할 수 있게 됩니다. 소제목을 표현하는 엘리먼트로는 h*, caption,  legend 등이 있는데 시각이 있는 사람들에게는 보이지 않고 시각이 없는 사람들만 인지할 수 있도록 설계할 수 있습니다. 이 기법은 이 글의 본문 ‘숨은 제목 제공 기법‘에 소개되어 있습니다.

1.5. label이 생략된 input은 title 속성을 사용하기.

서식 제어 요소들(input, textarea…)을 label 엘리먼트와 명시적으로 짝지어 주어야 한다는 지침label 엘리먼트의 적용 문법은 익히 알고 계시리라 생각 됩니다. 그러나 때로는 너무도 익숙한 인터페이스이기 때문에 label을 생략하는 것이 관행처럼 굳어버린 서식 제어 요소도 있고 label을 넣을 수 없는 경우도 있습니다. ‘검색’ 필드에서 label 엘리먼트를 사용하지 않는것이 label을 관행처럼 생략하는 대표적인 예 입니다. 하나의 인풋을 2~3개로 나누어 놓는 형태(주민등록번호, 전화번호, 우편번호…)는 각각의 인풋에 label 엘리먼트를 모두 연결해 줄 수 없는 사례에 해당 됩니다. 이런 경우 억지로 label 엘리먼트를 사용할 필요가 없습니다. 서식 제어 요소에 title 속성을 사용해도 동일한 효과를 얻을 수 있습니다. <input type="text" title="주민번호 뒷자리" /> 라고 마크업 하는 경우 화면낭독기는 label 대신 title 속성에 적힌 문자를 읽어주게 됩니다. 그러나 label 텍스트가 존재할 때에는 되도록 title 속성을 사용하는 것 보다 label 엘리먼트와 input을 명시적으로 연결해 주는 것이 좋습니다. label 텍스트는 서식 제어 요소에 ‘포커스’를 넣거나 ‘체크’ 또는 ‘체크 해제’ 기능을 수행하기도 하는 이유 때문입니다.

예)

1.6. Permalink 제공하기.

Permalink란 변하지 않는 고유한 URL을 의미합니다. 웹 사이트를 개편하거나 CMSContent Management System를 교체하는 과정에서 흔히 게시물의 고유한 주소체계가 자주 바뀌어 불편을 격게 됩니다. 웹 사이트 관리자는 사이트가 개편 되더라도 게시물의 고유한 주소가 변하지 않도록 설계 단계에서부터 고려하여야 합니다.

1.7. ‘리치 텍스트 에디터’를 제공할 때 ‘플레인 텍스트 에디터’를 함께 제공하기.

리치 텍스트 에디터란 WYSIWYGWhat You See Is What You Get 방식의 웹 기반 편집기를 말합니다. 포털에서 제공하는 ‘네이버 스마트 에디터’나 ‘다음 에디터’가 이에 해당합니다. 대부분의 리치 텍스트 에디터들이 갖는 치명적인 접근성 문제는 키보드로 접근할 수 없거나 또는 편집창에 한번 들어가면 키보드만으로는 빠져 나올 수 없다는 것 입니다. 리치 텍스트 에디터에 접근하더라도 Tab키를 사용하면 ‘들여쓰기’ 명령으로 받아들이기 때문에 빠져 나올 수가 없는 것입니다. 따라서 리치 텍스트 에디터를 제공할 때 플레인 텍스트 에디터를 함께 제공하여 선택할 수 있도록 하면 키보드만을 사용하거나 시각 장애가 있는 사람도 글을 작성할 수 있게 됩니다. 한편 이 둘을 함께 제공하고자 할 때 풀어야 할 문제는 리치 텍스트 에디터에서 플레인 텍스트 에디터 사이를 전환하게 될 때 서식정보(제목, 글자크기, 색상 등..)들을 어떻게 처리해야 하는지 입니다. 리치 텍스트 에디터에서 플레인 텍스트 에디터로 전환하게 되면 스타일 정보들이 모두 사라지기 때문에 발생하는 고민 입니다. 글쓰기 화면 예제 보기.

1.8. 사용자의 실수(세션만료, 로그아웃, 새로고침, 뒤로가기)를 만회할 수 있는 기회 제공하기.

사용자는 언제 세션이 만료되어 로그아웃이 되는지 모릅니다. 그것을 친절하게 경고하거나 알려주는 사이트도 거의 없기 때문에 웹에서 글을 작성하다가 잠깐 한눈을 팔게되면 오랜시간 공들여 작성한 문서를 잃게 됩니다. 또한 사용자는 실수로 새로고침(Ctrl+R. F5)키를 누르거나 뒤로가기(backspace)키를 누를 수 있습니다. 이 한번의 실수로 오랜시간 작성한 글을 잃도록 방치하는 것은 옳지 않습니다. WCAG 2.0 PRProposed Recommendation 에도 이와 관련된 새 항목이 추가 되었습니다. WCAG 2.0 Guideline 2.2.5 재인증 : 인증된 세션이 만료 되었을 때 사용자는 데이터를 잃지 않은 상태로 재 인증 후에 계속해서 활동할 수 있어야 한다.

1.9. CSS를 지원하지 않는 Form Control 요소를 장식하지 않기.

Form Control(서식 제어) 요소는 모든 브라우저들이 CSS를 제한적으로만(color, background, border, width, height 정도) 지원하고 있습니다. 이것을 제한하는 이유는 웹 개발자(디자이너 포함)가 이것의 모양을 마음대로(극단적으로) 바꾸었을 때 발생할 수 있는 치명적인 사용성 및 보안 문제 때문으로 추측 됩니다. 하지만 최근에는 디자이너들이 Form Control 요소의 디자인을 마음대로 가공하기 시작했습니다. 물론 악의적이지도 않고 극단적이지도 않아서 시각이 있는 사람이라면 마우스를 이용해서 이용할 수 있지만 보통의 경우 키보드 접근에 문제가 생기고 설사 키보드 접근을 지원(정확하게 말해서 키보드가 접근되는 것처럼 흉내내는 것)했다 하더라도 화면낭독기가 접근할 수 없게 됩니다. 왜냐하면 CSS를 지원하지 않는 Form Control 요소를 가공하기 위하여는 표현을 위한 가짜 마크업이 들어가게 되기 때문입니다. 디자인 하지 말아야 하는 Form Control 요소는 제 글 ‘서식 제어 요소의 디자인은 제한되어야 한다‘ 라는 글을 참고해 주세요.

2.1. 가변폭 텍스트와 줄바꿈 처리에 관한 테이블 표현 기법.

게시판 목록 페이지에서 가장 골치아픈 문제 가운데 하나는 테이블 셀의 너비를 효율적으로 사용하지 못하고 있다는 점 입니다. 보통의 경우 각 컬럼의 너비값을 지정하여 고정시키는데 이렇게 너비가 고정된 셀 안에서 문자들은 셀의 너비보다 커지게 되면 줄 바꿈이 되고 셀의 너비보다 작은 경우에는 공간을 낭비하게 됩니다. 지금 설명드리는 CSS 기법은 제목 컬럼을 제외한 나머지 컬럼들의 너비가 문자의 크기에 따라서 결정될 수 있도록 하고 줄 바꿈 되지 않도록 처리하는 기법 입니다. 예제 페이지에서 브라우저의 너비를 극단적으로 좁게(또는 넓게) 조절해 보세요. 게시판 목록 페이지 예제 보기.

table { width:100%; }
th, td { white-space:nowrap; }
td.title { width:100%; white-space:normal; }

2.2. 숨은 제목 제공 기법.

숨은 제목등을 display:none 을 이용하여 제공하는 기법은 화면낭독기의 설정이나 종류에 따라서 읽지 못할 수도 있고 본래 읽지 않아야 하는 속성이기 때문에 안전한 방법이 아닙니다. 따라서 화면 낭독기 사용자를 위하여 숨은 제목을 제공하고자 할 때 더 이상 display:none 기법을 사용하는 것은 안전하지 않습니다. 시각이 없는 사람에게 숨은 제목을 제공하는 CSS 기법은 다음과 같습니다.

.selector { position:absolute; height:1px; overflow:hidden; }

2.3. 텍스트 버튼 만들기.

버튼의 질감이나 입체 표현은 background-image를 사용하고 버튼의 내용물에 해당하는 문자는 텍스트로 처리하는 기법으로써 버튼을 마크업 하는 방법과 CSS 기법을 설명합니다. 문자의 길이에 따라 늘어나는 가변폭 버튼을 표현하려면 background-image를 두 번 사용해야 하는데 현재로서는 하나의 엘리먼트에 이미지를 한 번만 적용할 수 있기 때문에 표현을 위한 span 엘리먼트가 사용됩니다.

링크 버튼 :
<a href=”#” class=”button”><span>TEXT</span></a>
서식 전송 버튼 :
<span class=”button”><input type=”submit” value=”TEXT” /></span>
사용자 인터페이스 조작 버튼 :
<span class=”button”><button type=”button”>TEXT</button></span>

텍스트 버튼 예제 보기예제에 사용된 이미지 보기CSS 보기.

분류: CSS,웹 기획,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2008년 11월 14일, 7:17 | 정찬명 | 댓글: 56개 |
트랙백URI - http://naradesign.net/wp/2008/11/14/257/trackback/

56개의 댓글이 있습니다.

  1. ajju 댓글:

    언제나 이곳에 오면 뼈가 되고 살이 되는 내용들을 많이 접하게 되는데 이번 포스팅도 참 도움이 많이 될 만한 내용들이네요 ^^

    한주 마무리 잘하시고 주말도 즐겁게 지내세요 ^^

  2. 꼬냉 댓글:

    오늘 첨으로 왔어요~ 정말 다시 생각하게 만드는 글들이네요~ 감사합니다.

  3. 정찬명 댓글:

    적어도 두 분께 도움이 되신것 같아 기쁩니다. ajju님과 꼬냉님도 즐거운 주말 되세요! ^^

  4. 무명 댓글:

    저런 적어도 두분;;;
    저도 포함해 주세요~ ㅋ 늘 감사하게 생각합니다.

  5. 송진석 댓글:

    텍스트 버튼에 onmousever 와 onmousedown 으로
    마우스르 올렸을떄와 클릭했을때 효과를 주게 하면 어떨까요?
    http://img.fotobada.com/eve2.0/basic/btn05.png 와같은 이미지파일을
    background-position을 변경해서요.

  6. 정찬명 댓글:

    무명님, 저도 감사합니다. ^^

  7. song 댓글:

    아.. onmouseover 와 onmousedown는 마우스 전용이군요. -_-;
    onfocus 가 있긴해도 onmousedown 처리를 할만한게 있을라나 모르겠네요.

  8. 정찬명 댓글:

    송진석님, 의견 감사합니다. 사실 처음에는 제안주신 내용과 비슷하게 코드를 작성 했었습니다. 저는 마우스 오버시 다른 배경이미지를 불러오도록 했었는데요. 이 기법이 IE 브라우저에서 마우스 반응에 따라 깜빡거리는 버그가 있어서 포기를 했습니다. 같은 이미지를 사용하게 되면 깜빡이는 증상이 사라지는지 지금 기억이 나지 않는데요. IE에서 괜찮다면 매우 좋은 방법이라고 생각합니다. 감사합니다. ^^

  9. 정찬명 댓글:

    a 엘리먼트에 적용한다면 CSS의 :hover, :active, :focus 가상선택자를 활용해서 표현이 가능할것 같습니다. ^^

  10. song 댓글:

    image.src 변경시 이미지가 깜빡이는데..
    이미지의 포지션을 변경하는건 깜빡임이 없더라고요.
    http://img0.gmodules.com/ig/f/JB08UxZqEXw/intl/ALL_kr/svc_sprite_all.gif
    구글도 참 잘 쓰는 방식이죠. 플래시인줄 알았다는..

  11. 정찬명 댓글:

    앗, 그렇군요! 다음부터 이 방법 사용해야 겠네요. ^^ 감사합니다.

  12. 봄눈 댓글:

    세미나를 가보지 못해서 무척 아쉬웠는데
    이렇게 친절하게 올려주신 글 읽으면서
    바로 눈 앞에서 설명해 주시는 것 같은 기분이 들었습니다~! 하하

    추운데 건강하시죠^^)/
    다음주면 분당갑니다~

  13. 정찬명 댓글:

    봄눈님, 분당 오시면 술한잔 찐하게 하자구요! ㅎㅎ.

  14. 박영식 댓글:

    오오… 정말 감사합니다. 잘 활용하겠습니다.

  15. 삐돌이 댓글:

    항상 좋은 자료를 만들어 제공해 주셔서 대단히 감사드립니다.

    앞으로도 좋은 자료 부탁드립니다. 삐돌이 올림

  16. 길앞잡이 댓글:

    항상 여기 들리면서 느끼는거지만
    정말 저에게 뼈와살이되는 내용만 있네요~
    좋은정보 감사드립니다 ~^^

  17. 강영민 댓글:

    항상 좋은 자료 감사드립니다.
    잘 읽었습니다. (_._)

  18. 아크몬드 댓글:

    가독성 높고, 좋은 내용의 포스트 오랜만에 보고 갑니다..ㅎㅎ

  19. 이재헌 댓글:

    항상 많은 것을 배워가면서도 인사도 못드렸네요.
    댓글로나마 좋은 자료와 정보들에 대해 감사드립니다. ^^

  20. 마르도르 댓글:

    좋은 정보 감사 드립니다.

  21. 진달래 댓글:

    안녕하세요.
    자주 와서 참고하고 많이 배워가는 1인중에 한명인데요…^^;;

    위 테이블 기법대로 회사 cms 템플릿을 만들다가 문제점이 발생되서 문의드리려고합니다.
    (ie7 에서만 일어나는 듯 합니다.)

    위 td 안에 float 된 버튼이나 텍스트 영역 뭐 기타 이런저런 녀석들(중요한건 float)이 오게 되면
    처음엔 괜찮지만(멀티탭에 그 테이블 작업물들을 탭마다 띄워놓은상태여야 합니다.)
    딴 작업(포토샵,드림위버나 탭이 아닌 새창에서 딴작업 등)후 다시 table 이 있는 창에 와서 탭끼리 왔다 갔다 하면
    float된 영역이 td 안으로 반쯤 숨어버립니다.
    다시 새로고침하면 정상으로 랜더링 되구요;;;

    제가 작업한 테이블 뿐만이 아닌
    공개해 주신 테이블에서도 마지막 td와 그 전 td에 float 된 영역을 잡고 th보다 길게 텍스트를 넣어보니
    그래도 반쯤 숨어버리더군요…
    혹시 이런 문제점들을 접하신적이 있나 해서 문의 드립니다.

    제가 쓰고 제가 다시 읽어봐도 말이 어렵네요 흐흑…

    혹시 이해 안되시면 dalrae2580앳nate.com 으로 메일 주시면 관련 소스를 드릴게요;;

    그럼 수고하시고 즐거운 저녁되세요~

  22. 정찬명 댓글:

    진달래님 안녕하세요? 내용을 이해하기가 어렵네요. ㅎㅎ. dece24앳gmail.com 으로 관련 소스와 설명을 첨부해 주시면 한번 봐드리겠습니다.

    PS : 진달래님 이메일주소는 로봇이 긁어 갈까봐 수정해 놨습니다.

  23. 진달래 댓글:

    메일 드렸습니다.

  24. skj 댓글:

    넘 감사드립니다…와우~~

  25. 미희 댓글:

    전에 다른 작업하다 발견한 사항이 input type=”file”일 경우에는 파이어폭스에서는 css가 안 먹어서 size=”50″ 이런식으로 처리를 한 기억이.. OTL..

  26. 정찬명 댓글:

    맞아요. firefox는 다른 서식 콘트롤들에 대해서는 다른 어느 브라우저보다 CSS 지원범위가 넓지만 file 타입만은 안그렇더라구요.

  27. 한근희 댓글:

    좋은 정보 잘 보고 갑니다. 북마크라도 해두어야 겠네요 ^^

  28. 손희조 댓글:

    위글 보다가 궁금한게 있어서 글 남깁니다.

    위는 네이버 검색버튼을 예로 든것인데요 이미지 버튼을 이렇게 쓰면
    (1.3. Form 전송기능을 Javascript로 처리하지 않기.)적절한 방법인가요?

  29. 손희조 댓글:

    (INPUT class=btn
    onmousedown=”this.src=’http://wstatic.naver.com/w9/btn_sch_down.gif'”
    onmouseover=”this.src=’http://wstatic.naver.com/w9/btn_sch_over.gif'”
    onclick=”clickcr(this,’sch.action’,”,”,event);” tabIndex=2
    onmouseout=”this.src=’http://wstatic.naver.com/w9/btn_sch.gif'” type=image
    alt=검색 src=”http://wstatic.naver.com/w9/btn_sch.gif”)

    위글 보다가 궁금한게 있어서 글 남깁니다.

    위는 네이버 검색버튼을 예로 든것인데요 이미지 버튼을 이렇게 쓰면
    (1.3. Form 전송기능을 Javascript로 처리하지 않기.)적절한 방법인가요?

  30. 정찬명 댓글:

    @손희조
    네이버 검색 버튼의 경우 자바스크립트를 사용하고 있지만 자바스크립트를 제거해도 서식 전송이 가능하도록 설계되어 있기 때문에 겸손하게 사용한 예제라 볼 수 있습니다. 자바스크립트를 끈 상태에서도 서식 전송이 제 기능을 수행한다면 괜찮지만 자바스크립트에 서식 전송 기능을 전적으로 의존해서 구현한 경우 자바스크립트를 껐을 때 문제가 되므로 접근성이 떨어진다고 판단할 수 있습니다.

  31. Eric 댓글:

    출처를 밝히지 않았네요.
    양해 바랍니다~^^

  32. KaGuRa 댓글:

    프로젝트 준비하면서 웹접근성에 대해서 너무 많이 강조를 해서
    여기저기 찾아보다가 이곳에 와서는 많이 배워가네요._(__)_
    고맙습니다 <- 이말밖에 드릴게 없네요 ^^

  33. 댓글:

    궁금한게 있는데요~
    테이블에 caption을 제공하고 dispaly:none으로 하면 제대로 숨겨지는데..
    이는 화면낭독기에서 읽어질수 없다고하여
    아래처럼 사용하라 하셨는데..

    .selector { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }

    이렇게했을경우.. caption부분에 공백이 생기는데..
    어떻게 해결할수 있을까요?

  34. 정찬명 댓글:

    caption 요소에 margin:0; padding:0; 속성을 추가해 보세요. 원치 않는 여백이 제거 될 것입니다. 앞으로 질문 주실 때 어떤 브라우저인지 종류와 버전을 알려 주시면 더 빨리 답변을 드릴 수 있습니다. ^^

  35. 댓글:

    해결되었습니다~ 감사합니다.^^ 많은 정보 얻어갑니다~~ㅎㅎ

  36. 박은아 댓글:

    이제 막 웹접근성에 따른 코딩을 시작한 사람이예요..
    이곳에서 참고하며 배우고 가는데, 해결되지 않는 부분이 있어서 문의를 드립니다.

    여기에 게시판 목록 예제처럼 동일하게 처리했을때

    td 사이에 아무런 문자열도 없이 처리를 하게 되면, 파이어폭스나 익스플로러 8에서는 정상적으로 보이는데, 익스플로러 7이하 버전에서는 css 가 안 먹혀서 라인이 사라지는 현상이 일어나더라구요..

    이럴땐 어떻게 처리를 하면 될까요?
    답변 좀 부탁드릴께요

  37. 정찬명 댓글:

    그래서 저는 내용 없는 셀에 항상 & nbsp; 가 남도록 합니다. 이 방법보다 더 좋은 방법을 아직 찾지 못했거든요. 혹시 더 좋은 방법 발견하시면 저도 좀 알려주세요. ^^

  38. 박은아 댓글:

    그렇군요^^
    답변주셔서 고맙습니다.

  39. 여우 댓글:

    게시판 웹표준 및 웹접근성 관련해서 검색하다가 처음 왔는데요..
    여기에 질문해도 되는지는 모르겠지만^^
    제가 궁금한 부분이..
    게시판 목록에도 테이블처럼 caption, summery를 제공해야하는지해서요..

  40. 정찬명 댓글:

    여우님, 안녕하세요?
    제가 중요한 정보를 빼먹었는데 적절하게 잘 질문해 주셨네요.
    네, 게시판용 테이블에도 caption 또는 summary가 필요 합니다.

    한편
    caption은 표의 제목을 마크업하는 요소,
    summary는 표의 내용을 요약하는 속성 이라는점 알고 계시죠? ^^

    예를 들어 자유게시판이라면 다음과 같이 제공하는 것이 하나의 적절한 예라 할 수 있겠습니다.

    [table summary=”자유게시판에 900개의 글 목록”]
    [caption]자유게시판 글 목록[/caption]
    [/table]

    둘 다 제공하면 좋지만 최소한 둘 중 하나 만이라도 사용하는 것이 좋겠습니다.

  41. 박은아 댓글:

    저번에 td 사이에 아무런 문자열도 없이 처리를 하게 될 때 익스플로러 7이하 버전에서는 css 가 안 먹혀서 라인이 사라진다고 문의 드렸던 사람인데요..
    하나만 더 여쭤볼려구요..
    내용 없는 셀에 항상 & nbsp; 가 남게 해달라고 요청했더니, 기획하시는 분이 그 방법은 아닌거 같다고 하셔서 어쩔 수 없이 td 1픽셀씩 클래스로 넣어줬어요.

    그러니까 스타일 페이지 .sBg2 {background-color:#E7DDBE; width:1px;} 로 정의하고
    테이블에서 로 했더니 익스플로러 7에선 1픽셀의 세로줄을 화면에 표시하지 않더라구요..
    혹시 좋은 방법이 없을까요…

  42. 박은아 댓글:

    내용 수정이 안되네요…
    테이블에서 (td class=”sBg”)(/td) 로 줬어요

  43. 정찬명 댓글:

    박은아님 안녕하세요? td 요소에 클래스를 왜 주는지 잘 이해를 못하고 있습니다. 한편 &nbsp 와 같은 더미 데이터를 넣지 않고 다른 방법으로는 IE 6~7 에서 빈 셀의 보더 표시 방법을 저도 찾지 못했습니다. 저로써는 해결 불가능 이네요. 한편 뾰족한 대안이 없는 상황에서 무조건 더미 데이터는 안된다고 말하기도 어렵지 않나 하는 생각도 들구요. ^^

  44. 모락모락 댓글:

    숨은 제목 제공 기법에 관한 css 를 보다 궁금한 점이 생겨 여쭤보는데요..
    다른 것들은 이해가 가는데 ‘position:absolute’ 만 주는 이유는 무엇인가요?
    어떤 역할을 하는 것인지 궁금합니다

  45. 정찬명 댓글:

    모락모락님 안녕하세요?
    position:absolute 속성은 숨은 제목이 주변의 다른 흐르는 블럭들을 밀어내거나 줄바꿈하지 않도록(즉, 의도하지 않은 마진이 발생하지 않도록) 영향을 주지 않기 위하여 분리(띄움)하는 역할을 합니다. 너비와 높이가 모두 0px 이더라도 position:absolute 속성을 선언하지 않으면 어떤 브라우저들은 원치 않는 마진을 발생 시킵니다.

  46. 홈박스 댓글:

    게시판 읽기 페이지에 대한 예는 없는지요?
    읽기 부분에 대한 것도 많이 참고하려고 하는데 아무리 찾아도 없네요 ㅜ_ㅜ

  47. […] 웹 접근성을 고려한 게시판 제작 기법. – […]

  48. skynle 댓글:

    웹2.0이랑은 거리가 먼 이야기네요..
    웹2.0에 맞게 장애인을위한 판독기를 업뎃하는게 모든 사람을 위해서 좋을수도 있다는 생각 입니다. 판독기 만드는 업체에서 이런걸로 정부에 제안해서 플젝하나 하면 될듯한 느낌이 팍팍 드네요.. ^^

  49. 정찬명 댓글:

    @skynle
    네, 웹 제작자 뿐만 아니라 보조공학기기 제조사의 역할도 중요한게 사실입니다. 한편 현재 국내 보조공학기기 제조사들의 웹에 대한 이해가 부족한 부분이 좀 아쉬움으로 남네요. ^^

  50. 최대호 댓글:

    안녕하세요
    전주에서 교육 잘받고 있는 교육생입니다. ^^
    게시판 샘플 예제 소스 잘 보았습니다.
    혹 회원가입 예제도 하나 알려주시면 감사하겠습니다..

    방문하신 모든분들 즐거운 하루 되시길….

  51. 최대호 댓글:

    ^^ 정말로 감사 합니다.
    조심이 내려 오시기 바랍니다…

    교육시간에 뵙겠습니다…. 오신분들 즐거운 하루 되시길…

  52. 랭커 댓글:

    구글링이나 관련문서를 참고해 봐도 도저히 방법을 못 찾아… 결국 이곳에 질문글 남깁니다.(게시글과 관련성이 많이 떨어진다면 삭제 부탁드립니다)

    현재 제 블로그에서 겪고 있는 문제는 구글 검색결과에 본문글 하단에 있는 ‘관련글 목록’이 중복콘텐츠로 검색되어진다는 것입니다. 다른 말로 표현을 하자면, 페이지의 특정 영역(예:푸터)만 검색에 반영되지 않도록 할 수 있는 방법이 있을까요?

    1) 별도 페이지라면 헤드에 [meta content=’noindex,noarchive’ name=’robots’/]를 삽입하거나 [link rel=”canonical”]을 이용하면 되겠지만, 관련글 목록은 제가 임의로 삽입한 코드라 적용할 수 없는 문제가 있습니다.

    2) 관련글 목록의 제목 링크[a]에 rel=”nofollow”를 설정하고 1주일간을 지켜봐도 여전히 중복콘텐츠로 노출이 됩니다.

    P.S 방법을 못 찾아… 이곳에 관련 없는 질문글 드리는 염치없음을 양해 부탁드립니다.

  53. 정찬명 댓글:

    @랭커
    죄송해요. 저도 잘 모르는 분야라서 드릴 답변이 없네요.

  54. 익명 댓글:

    1.8 Guideline 2.2.5 재인증 …. 방법 좀 쉽게 설명 부탁드립니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님