Click Event Binding with Clickable Elements

너무 기초적인 내용인데, 이리 저리 사이트 둘러다니다보면 생각보다 지켜지지 않는 경우가 많아서 포스팅 하기로 했지만..사실 별 내용없다.
요점은 click 이벤트는 clickable한 요소에 등록하자.

내 눈은 Clickable 하지않거든? ㅋㅋ

먼저 아래 코드를 보자.

<img onclick="like('post', 1)" alt="좋아요" src="btn_like.png" />

위 코드는 시멘틱(Semantic)하지 않고,
clickable하지 않은 요소에 이벤트를 등록해 키보드로 이용을 할 수 없다는 또 다른 문제점이 있다.
이것은 접근성적인 측면에서 큰 문제가 된다.

너무나 당연해 얘기하는것 조차 민망하지만, click 이벤트가 일어나는것들은 Clickable한 요소를 이용해 마크업을 해야한다.
클릭커블한 요소들은

  • a
  • button
  • input type=”button”
  • input type=”submit”

정도가 있다.

그러므로 위 img태그는 아래와 같이 수정되어야 한다.

<a href="#" onclick="like('post', 1)"><img alt="좋아요" src="btn_like.png" /></a>

href에 알맞은 url까지 적어주면 금상첨화.

<a href="/like?content_type=post&content_id=1" onclick="like('post', 1)"><img alt="좋아요" src="btn_like.png" /></a>

아. 물런 url은 실제로 동작을 해야한다.

이것만으로도 충분하지만, html과 js를 분리시키는게 더 나은 방법(Unobtrusive)임으로 분리를 시켜준다.

<a href="/like?content_type=post&content_id=1" data-content-type="post" data-content-id="1" class="like-button"><img alt="좋아요" src="btn_like.png" /></a>

이런식으로 필요한 정보들은 data 속성(attribute)를 이용해서 제공을 하고

.like-button에 이벤트(event)를 등록(bind)한다.

$(".like-button").click(function(e) {
  e.preventDefault();
  var content_type = $(this).attr("data-content-type");
  var content_id = $(this).attr("data-content-id");

  // ajax ...
});

장애없는 사이버세상

한국정보문화진흥원(이하 KADO)에서는 예전부터 웹 접근성 향상을 위해 많은 노력을 들여왔습니다.

  • 웹 접근성 실태조사
  • 웹 접근성 표준화
  • 웹 접근성 전문교육
  • 웹 접근성 경진대회
  • 웹 접근성 품질마크제
  • KWCAG

등등, 차별 없는 인터넷 세상을 만들기 위해 많은 분께서 땀방울을 흘리시며 수고하고 계시죠.
그 결과로 몇몇 관공서나 공공기업에서 접근성을 준수하도록 개선이 되는 기쁜 일이 있었습니다.

하지만, 이것들이 민간기업(nhn, 다음 등등)에 적용되기란 아무래도 여러 가지 이유로 인해 한계가 있습니다.
다음에 윤석찬님(차니)이 계시고, nhn에는 “웹 표준”이라는 팀이 존재하고 있지만 역시나 여러 가지 이유로 모든 웹페이지 페이지 마다 접근성이 준수되기에는 힘이 듭니다.
요즘 깨어진 의식을 가지신 분들이 많이 입사하시고, 혹은 기존분들의 의식이 깨어져서 많은 진척이 있는 중이지만, 모든 페이지에 적용하기엔 한계가 있고 더군다나 에이전시, SI 업체에는 이런 깨어진 의식을 가지신 분을 찾기가 어렵다는 것이지요. 모래 속의 진주처럼 의식을 가지신 분이 계셔도, 상사와(회사와)의 마찰 때문에 묵살되는 경우가 다반사죠.

물론 대형포털인 nhn과 다음이 한다면, 에이전시, SI 업체들이 “다음이랑 nhn한다 우리도 하자”라며 너도나도 따라할 수 있겠지만, 따라 할지 안 할지는 미지수이죠. 즉 이것은 어디까지나 “가정”이고, 따라한다고 해도 이분들이 정말로 접근성을 이해하고 준수하는 것이 아니니 순수성(? 뭐라고 표현을 해야 할지 모르겠어요.)이 결여되어있죠.

가장 강력하고 확실한 해결 방법은, “법”으로 정해버리는 거죠.
이미 몇몇 나라들은 법으로 정해버렸습니다.
영국은 1999년 말에 시행되어, 몇 년간의 유해기간을 주어, 몇 해 전에 영국의 모든 웹사이트들이 준수 하는걸로 바뀐 걸로 알고 있으며, 결실을 맺어가고 있습니다.
네덜란드도 새로운 법안이 지난 1월에 발표되었고,
일본도 2004년 6월에 INSTAC(일본의 IT,신기술분야의 표준을 만드는 단체쯤이라고 여기시면 될듯)에서 지침을 제정하였습니다.
미국은 재활법 508조라는 강력한 법이 있죠.

하지만, 법으로 시행한다고 해도 역시나 순수성 결여에 대한 답은 되지는 않을 것입니다.
그러므로 법보다 선행되어야 할 것이 마음가짐이 아닌가 생각합니다.
이러한 의식이 없는 상태에서 법으로 시행이 되어버린다면, 어쩔 수 없이 지키는 상태가 되어버리죠.
이런 건 진정한 “차별 없는 인터넷”이 아닌, “차별 하고 있는, 차별 없는 인터넷” 속 빈 강정일 뿐인 거죠.
담당자가 코딩을 하면서 “아 xx, 왜 이렇게 해야 해, xx 귀찮네 @#!$!#” 라는 생각이 들기보다,
“내가 조금 번거롭더라도 이렇게 하면 많은 사람과 몸이 불편하신 분들도 편하게 이용할 수 있겠지.” 라는 마음가짐.
아 얼마나 아름답습니까?

KADO에서 이번에 하는 “장애 없는 사이버세상 웹 접근성 향상 캠페인”은 사람들의 인식을 깨닫게 하는 아주 좋은 캠페인이 아닌가 생각합니다.
비록 아직 많이 알려지지 않았고, 관련 종사자 대부분의 분도 웹 접근성에 대한 이해가 부족하지만, KADO와 KWAG같은 단체의 노력 하나하나가 큰 열매로 돌아오리라 믿어 의심치 않습니다..!!

시각장애인들「대법원 두고보자」

zdnet에 흥미로운 기사가 있네요.(http://www.zdnet.co.kr/news/internet/browser/0,39031243,39156229,00.htm)

아직까지 많은 공공기관 사이트들이 IE에서만 돌아가거나, 스크린리더기에서 제대로 작동 될 수 없는등의 접근성이 낮은 곳이 너무나 많이 있습니다.

일반적인 사람들만을 위한 사이트인거죠.
ActiveX, Flash 등.. 이런것들은 스크린리더기에서 구독하는것이 현기술상 불가능에 가깝습니다.

가장 많이 지적되는 문제점들이 대체텍스트의 부재와 Flash, ActiveX에 대한 문제입니다.

많은 이미지들의 대체텍스트가 누락되었고, 있다고 하더라도 제대로 된 대체 텍스트를 제공하고 있지 않습니다.(대체텍스트에 대해서는 다음 포스팅을 기약하며;;)

Flash는 대부분 탑메뉴 혹은 서브메뉴로 이용하는 곳이 많습니다.
Flash에 대한 몇가지 문제점을 적는다면..

  1. Flash 메뉴 대부분이 onmouse 하면 서브메뉴가 펼쳐지는 형식의 메뉴 구조이지요..
    마우스움직이다보면, 메뉴가 휘릭 사라지고, 다시 가야하고..
    다들 몇번씩 경험하셨겠죠?
    상당히 불편한 구조 입니다.
  2. 탭브라우징이 제대로 안되는 것들이 많습니다.
    키보드 만으로도 접근이 가능해야 하는데, 그렇지 않은것들이 비일비재하죠.
  3. 스크린리더기에서는 구독이 힘듭니다.
    그럼 메뉴간의 이동을 할 수 가 없습니다.
    그렇게 되면 사이트이용에 상당한 제약을 받게 되죠. 심하면 메인페이지만 보고 나머지 메뉴로 이동이 불가능한 경우도 있을 수 있습니다.

이 외에 여러가지가 있을 수 있겠지만..생각나는대로 적었습니다.
(부족하거나 잘못되었다면 댓글을 남겨주세요)

김기창교수님의 소송과, 이 사건의 소송이 제발 승소하여서..
공공기관을 시작으로, 국내 모든 사이트들이 일반인과 IE만을 위한 사이트가 아닌, 모든사람과 모든 브라우져에서 사용이 가능한 한국이 되었으면 하는 바람입니다.

KWAG 7th 워크샵

  • 일시 : 2007년 2월 24일 토요일 오전 10시 30분부터 오후1시 30분까지
  • 주제 : TFT로 다시 태어나는 KWAG
    • 웹 접근성 관련 TF의 필요성 및 TF 활동 관련 설명 : What’s KTF?
    • TF 및 TFTeam Member 구성 : What’s Best TF?
    • TF별 Gloal & Master Plan 수립 : Mind 스토밍
    • TF별 Team Member Exchange : 실수는 1번뿐
  • 장소 : NHN 경기도 성남시 분당구 정자동 (찾아오는 길1찾아오는 길2)
  • 인원제한 : 50명 (선착순 마감)

에서 합니다~

자세한것은
http://kwag.net/Workshop/070224
여기서 확인을 하세요~

많은 분들이 오셔서 좋은 의견 나눴으면 좋겠습니다~!

웹접근성에 대한 고민..

사실 포스팅된 내용은, 웹표준Day 에서 토론해볼려고 했던 주제입니다.
그런데, 능력이 안되어서..ㅎㅎ;;
개인적인 여력이 된다면, 좀 더 정리해서..토론해 보고 싶네요. ㅎㅎ

제가 오래전부터 고민하던것이 있습니다.

우리가 생각하는 접근성의 의미가 부합되지 않는
사이트나 서비스 혹은 메뉴(이하 사이트라 칭함) 같은경우는 어떻게 해야되나..

라는 생각입니다.
이런 사이트같은 경우, 표준은 준수 할 수 있지만
우리가 알고있고, 현재 새워져 있는 웹접근성지침에는 어긋날 수 밖에 없지요..

얘가 무슨말을 하나..? 라고 생각하셨죠..?
제가 써놓고도 이해가 잘 않가네요..
(아, 이 무책임함..ㅎㅎ)

보다 쉽게 알려드리기위해
Flash를 놓고 예를 들어 보겠습니다.

Flash로만 표현이 가능한 콘텐츠들이 있습니다.
(Flash로만 표현 가능한 콘텐츠 자체가 접근성에 위배된다고 말씀하시면 어쩔 수 없지만)
그 사이트나 서비스 혹은 메뉴의 성격상 Flash를 써야만 하는 경우가 있습니다.
이런 경우도 “접근성이 좋지 않다” 라고 평가가 되는건지 궁금합니다.

그렇다고 Flash가 비표준이냐..? 그것도 아닙니다.
Flash는 엄연한 웹 표준입니다.

한 예로는,

사진사이트같은경우
실질적으로, 시각장애인들이 무언가를 하기엔 불가능한 사이트입니다.(콘텐츠 자체가 이미지이므로)
그런곳에서 사진View 라던가, 간단한 수정작업을 위해 Flash를 썻다고 할경우..

이것또한 접근성에 위배되는건가요..?
꼭 이 사이트에, 우리가 말하는 접근성을 지켜야 할까요..?
(이런 사이트는 그래픽기반이므로, CSS를 끄거나 JS가 끄면 구동자체가 안될 수 도 있죠)
어떻게 보면 우리가 생각하는 접근성이, 이 사이트에선 의미가 없는걸 수 도 있죠.

많은 분들이, 접근성에 대한 fallback은 시각장애인에 대해서만 고려하시는것 같아요..
현재 놓여있는 지침들도 둘러보면 그런 사항들이 많구요.

저의 이런 물음에 정찬명님께서, 답변을 해 주셨는데

시각장애인만 고려한다는 전제는 어느곳에도
없습니다. 다만 시각장애인을 고려하면 약시,
청각장애, 지체장애인에 대한 접근성이 모두 함께
개선됩니다. 가장 쉬운예로 키보드만으로 조작
가능한지를 평가하는 것은 시각장애인을 염두해 두고
진행할 수도 있겠지만 사실은 지체장애인의
접근성과도 관계가 있습니다

옳은 말씀입니다. 하지만 흠…뭐라고 해야 할까요..
정말 모든 사항들에 대해서, 시각장애인에게 맞추면 다른 사항들도 따라오는걸까..?
하는 의문점이 생깁니다.

위에 열거한것들이, 제가 접근성에 대해 고민하는것 중 한 부분입니다.
우리가 생각하는 접근성 정의는
모든 브라우져에, 모든 사람들이 차별없이 동일한 정보를 습득하는것
입니다.

사진사이트 같은경우, 이미 특정인들만을 대상으로 한 사이트이기때문에..
웹접근성 정의에 벗어나므로, 접근성에 대해선 배제를 해야 되는걸까요..?

현재 새워진 접근성지침같은것을 보면, 시각장애인에 대한 fallback만 있을뿐이죠.
우리가 생각하는 접근성과, 접근성지침이…정말로 접근성 정의에 부합하는지..
한번쯤 생각해 봄직합니다.

ps>어쩌면 저혼자 쓸대없는 생각을 하는 건지도 모르죠..