마크업 개발, 어떤툴들을 사용하시나요? View more presentations from mctenshi

들어가기 앞서… 오랜만에 펜을 잡… 아니 키보드를 두들겨봅니다. 이 글이 나태해진 제 자신에게 변화의 시작이 되기를 바라봅니다. 여기까지만 존대말… ^^; 이 글은 Accessible Culture의 Programmatically Determined라는 글의 일부 발번역과 나의 견해가 포함된 글임을 알린다. 프로그래밍 방식으로 결정 “프로그래밍 방식으로 결정” 이라는 문구는 61개의 WCAG 2.0 성공 기준 중 6개에서 눈에 띄는 항목이다. 그것은 아마 처음으로 [...]

한국 정보문화진흥원 사이트에 landmark roles를 적용한다면? Landmark roles는 정적인 웹 페이지에 책갈피를 달아놓은 것이라고 설명할 수 있다. 이는 HTML을 스타일링하지 않아도 어느 부분이 메인 컨텐츠 영역인지 사이드바(부가 정보) 영역인지 메인 메뉴(내비게이션) 영역인지 명확하게 구분하도록 해준다. Landmark roles는 현재 다음의 8종류가 있다. application: 웹 응용 프로그램에 선언한다. 여기서 웹 응용 프로그램이란 GMail, SVG와 같은 정적인 웹 [...]

WAI-ARIA의 tab, 아직 사용하긴 이르다. 라는 글을 썼었는데, 탭을 헤딩으로 탭 내용을 헤딩에 이어지는 컨텐츠로 구성한 마크업을 위한 자바스크립트 라이브러리는 찾기가 어려워 하나 만들었다. 이름하여 flowTab. (기본적으로 자연스럽게 흐르는 컨텐츠를 탭 UI로 만든다 하여 이렇게 지었다.) 마크업과 자바스크립트를 아래 코드와 같이 작성하면 된다. <script type="text/javascript"> // <!– $(function() { $(‘#tabs’).flowTab(); // $(‘#tabs’).flowTab({tabSelector: ‘> .heading’}); }); [...]

WAI-ARIA에는 다양한 위젯 – 여기서 위젯이란 tab, dialog, alert 등을 말한다. – 이 있는데 그 중 tab은 아직 조금 문제가 많은 것 같다. WAI-ARIA 저작 가이드 문서의 tab 부분을 보면 탭 인터페이스를 구현하는 방법을 자세히 소개하고 있는데 그 중 키보드 인터페이스에서 좌/우, Ctrl+Tab/Ctrl+Shift+Tab, Ctrl+PageUp/Ctrl+PageDown 키를 이용하여 탭과 탭을 이동하는 기능을 구현하도록 문서화되어 있는데 좌/우 키는 [...]

이 글은 아래의 두 문서 내용의 요약 정리본이다. WAI ARIA Live Regions – MDC How to use ARIA Live Regions for dynamic content – CodeTalks 이 글을 통해 ARIA 개발의 감각을 끌어올릴 수 있기를 바라며 스펙(Taxonomy of WAI-ARIA States and Properties)에 더 많은 내용이 있으니 참고바란다. 예제들은 ARIA를 지원하는 스크린리더(Korean JAWS for Windows (한글용; 유료), [...]

KWAG 12번째 모임 발표자료 WAI-ARIA in Real World(on slideshare.net)입니다. 첫 발표라 긴장되고 어색했다는 느낌이 드네요. 죄송해요. ㅠ_ㅠ 발표에서 빼먹었던 내용들 이렇게 큰 모임에서의 발표는 처음이었던 관계로 긴장이 되어 준비했던 것들을 다 전달해드리지 못했습니다. 아쉬운 마음 글로나마 보충해봅니다. 참가하셨던 분들 중에 몇 분이나 보실지는 모르겠지만 도움이 되셨으면 좋겠네요. 브라우저별 ARIA 지원표에서… 프리젠테이션 10번 슬라이드의 내용입니다. 브라우저별 [...]

CSS Zen Garden 웹 폰트 버전, 잘 나와요! ㅋ 오페라10 알파 버전이 공개되었습니다. 다양한 기능과 속도 향상과 더불어 웹 폰트도 지원하는군요. 파이어폭스 3.1도 웹 폰트를 지원하니 이제 모든 주요 브라우저(IE와 사파리 포함)가 웹 폰트를 지원하게 되었네요. EOT냐 TTF냐 하는 이슈가 있긴 합니다만, Ajax 등장시절 구글 지도가 그랬던 것처럼 Best Case가 나오면 붐이 일 수도 있지 [...]

우리는 자신의 전자 시종에게 억압당하고 있다. 이 책을 우리의 해방을 위해 바친다. 사내의 동료들(웹 클라이언트 개발자들)과 Humane Interface (인간 중심 인터페이스)를 읽기 시작했습니다. 인간-기계 사이의 인터페이스는 무엇보다 인간이 사용하기 편해야한다.라고 이야기하는 이 책은 우리가 일상적으로 사용하고 있는 기계들에 대하여 알고 있는 불편한 점이나 혹은 익숙해져 불편한지 조차 모르는 것들을 끄집어내고 인간중심으로 바꾸어가는 방법과 그러기 위해 [...]

접근성을 해치지 않는 자바스크립트의 사용 신현석님의 접근성을 해치지 않는 자바스크립트의 사용이라는 글을 읽어보셨는지요? 혹시 어렵고 복잡하다고 생각하실지 모르나 자바스크립트 기술 위에 HTML 표준에 대한 이해가 수반된다면 크게 복잡한 과정이 아닙니다. 웹 사이트 개발에 들어가기 앞서 위의 과정을 이해하고 있다면 접근성을 해치면서(?) 사용하는 자바스크립트와 같은 비용으로 자바스크립트가 불가능한 환경의 접근성, 검색엔진 최적화(SEO) 등의 이득을 챙길 수 [...]

현 시대의 CSS로는 마크업의 무결성을 보장하면서 원하는 표현을 충분히 할 수 없다. 그 대표적인 예가 폰트와 배경이미지이다. 그 중에서도 폰트와 같은 경우는 기본 텍스트만으로는 원하는 결과물을 얻기가 힘들다. 이럴 때 우리가 가장 많이 사용하는 방식이 <img> 태그 혹은 이미지 대치법(Image Replacement)이다. 정보를 꾸며주기 위한 <img> 태그 <img> 태그는 사전적으로는 정보를 지닌 – 의미 있는 – [...]

여러 개의 제출 버튼을 가진 폼의 접근성에 대하여 이야기를 하였었는데 결론은 <input> 태그가 제한적이나마 사용될 수 있다는 것이었다. 좀 더 풍부한 표현이 가능한 <button> 태그가 IE에서 버그를 가지고 있는 관계로 사용할 수 없다고 하였었는데 그게 어느정도 가능할 수 있다는 결론을 얻었다. 자바스크립트를 통한 IE의 <button> 태그 버그 극복 <button> 태그가 IE에서만 문제가 되고 있고 IE는 [...]

요즘 웹에는 접근성의 문제를 해결하지 못한 RIA, 즉 Ajax가 많이 쓰인다. 예를 들어 Drag & Drop 기능을 웹 사이트에 붙인 경우 마우스를 사용할 수 없는 사용자나 스크린리더 사용자들에게 그것을 조작할 수 있게 하기는 힘이 든다. 웹 접근성 가이드라인과 Ajax KWCAG 1.0 에는 Flash나 동영상 등의 외부 플러그인에는 적절한 대체 컨텐츠를 제공하여야 한다는 내용이 담겨 있다. [...]

오늘(2007년 11월 27일) 있었던 민간기업의 웹 접근성 모범사례(Best Practices) 세미나에 다녀왔다. 포털들의 웹 접근성 보장 노력을 보다. 포털들은 빠르게 바뀌어가고 있지는 않지만, 점진적으로 그리고 체계적으로 웹 접근성을 업무에 도입하고 있다. 예전에 만들었던 table 레이아웃을 하나 둘 씩 덜어내고 제대로 된 markup, 웹 표준 준수, 시각장애인들과의 교류를 통한 실제로 도움이 되는 웹 접근성 테스트 등을 진행하고 [...]

Brian McAllister의 Accessible Unobtrusive Slider를 소개한다. 키보드로 제어할 수 있는 슬라이더 제목에서도 알 수 있지만 Accessible Unobtrusive Slider는 키보드로 제어할 수 있는 슬라이더 라이브러리이다. 슬라이더 UI는 HTML5에서 지원 예정인데, 현재로서는 표시할 방법이 자바스크립트를 이용한 라이브러리를 통하는 수 밖에 없다. 그래서 많은 관련 라이브러리들이 공개되어 있는데 키보드 제어 가능한 라이브러리는 드문 편이다. 마우스 휠을 활용할 수 [...]

겸손한 자바스크립트의 사전적인 의미는 문서(HTML)와 동작(자바스크립트)를 분리하는 것이지만, 그 이전에 기본은 자바스크립트를 사용하는 모든 경우에 대해 사용 가능한 경우와 가능하지 않은 경우를 염두하여 설계하는 것이다. 웹 페이지를 제작하면서 자바스크립트를 어떤 부분에 사용해야겠다라고 마음 먹으면 우리는 자바스크립트를 표시하는 <script> 태그를 쓴다. 앞서 얘기한 설계대로 <script> 태그의 사용 가능하지 않은 경우를 위해 <noscript> 태그를 쓸 수 있다. [...]

방탄 Ajax 표지 DOM Script의 저자 제레미 키스(Jeremy Keith)가 쓴 방탄 Ajax가 출간되었습니다. DOM Script에서 올바른 DOM, 겸손한(unobtrusive) 자바스크립트에 관한 이야기를 했다면 이번엔 올바른 Ajax의 활용, 접근성을 확보하는 Ajax 개발론, 즉 겸손한(unobtrusive) Ajax에 대해 이야기하고 있습니다. 이 책에서의 Ajax는 Asynchronous JavaScript and XML가 아닌 미국과 영국 등에서 과거에 쓰였던 Ajax라는 단어의 뜻으로서 정의하고 있습니다. 쉽게 [...]

웹 사이트 개발을 하다보면 하나의 폼에 여러 개의 제출 버튼을 써야하는 경우가 있다. 그 경우 자바스크립트를 사용하지 않고 원하는 기능을 구현하려면 어떻게 해야할까? IE의 버그로 인해 여러 방법 중 대부분이 사용이 어렵지만 submit 타입의 input 태그를 여러 개 넣어서 폼을 구성하면 버그 없고 자바스크립트 의존적이지 않은 결과물을 만들 수 있다. 그럼 실제로 각 글에 체크박스가 [...]

(그림1. 전송 버튼이 적용되지 않은 select 태그) 그림1은 현재 게시판의 분류나 바로가기 메뉴 등에서 선택 시 바로 폼을 전송시키거나 자바스크립트를 이용하여 페이지 전환을 하는 용도로 쓰이고 있다. 그러나 키보드 사용자나 자바스크립트를 사용할 수 없는 사용자를 고려하였을 때 위와 같은 사용은 불가하다. 자바스크립트가 불가능한 사용자를 위해 <noscript> 태그를 이용하여 서브밋 버튼을 추가하면 되지 않느냐? 그것은 반쪽짜리 [...]

보도자료: 2012년까지 장애인 13만여명에 IT보조기기 보급 이밖에 장애인이 공공부분의 인터넷 사이트를 손쉽게 이용할 수 있도록 `웹 접근성 준수’를 제도화하기 위해 올해안에 웹 접근성 국가표준을 개정하기로 했으며 공공기관은 물론 민간기관들의 참여를 이끌어내기 위해 `웹 접근성 품질 마크’를 적극적으로 부여하기로 했다. 정부 차원에서 장애인들의 IT 활용 활성화를 추진하고 있다는 기사가 났다. 웹 접근성에 대해 국가 차원의 관심과 [...]