Blog Archive

2009-12-07

Firefox and Internet Explorer user style sheet for better keyboardnavigation

When you tab through a web page with your keyboard, a visual focus will move through all the links and form controls in the page. Modern browsers such as Opera, Safari, and Google Chrome and most of mobile browsers provide a visually distinctive focus. This clear focus dramatically enhances usability and accessibility of keyboard users (eg. people of visually impaired or low vision) as well as general convenience for majority of users. However two widely used browsers, Internet Explorer and Firefox stick to the traditional, not very conspicuous visual focus of gray dotted outline. This faint outline focus often makes me get lost when I use my keyboard for the within-page navigation. Compare the following default visual focus of each browser (for Windows):

Prominent visual focus of three modern browsers
Apple Safari Google Chrome Opera
bluish rounded thick focus of Apple Safari yellow rounded focus of Chrome browser thick and rounded bluish focus of Opera browser
Marginally distinguishable visual focus of two major browsers
Firefox Internet Explorer 8
gray dotted focus of Firefox gray dotted focus of Internet Explorer 8

To get a clearer visual cue of where I am in a web page, I set the following user style sheet for Firefox and Internet Explorer.

:active, :focus {
	outline-width: 2px !important; 
	/* outline (unlike border) property does not take the space */
	outline-style: solid !important;
	-moz-outline-radius: 4px;
	/* this affects Firefox only, it makes the outline rounded  */
}

Refer to the articles below to get information about how to set your user style sheet in the two browsers:

Once you configured your user style sheet successfully, all the objects (including text links, image links, radio buttons, text input fields, image type buttons, etc) will be clearly outlined and stand out! Now enjoy your keyboard navigation and never get lost within a page!

Improved visual focus of two major browsers
Firefox Internet Explorer 8
rounded outline focus of Firefox thick outline focus of Internet Explorer 8

Be careful that the Internet Explorer version 6 and 7 do not support CSS outline property.

2009-05-27

노무현 전 대통령님의 서거를 애도합니다.

대통령에 당선되기 전에 불의와 타협하지 않고, 정치인으로서 실패가 빤히 보이는 길을 당당하게 선택하신 당신의 모습에 반해 정치적으로 당신과 조금 다른 견해를 가지고 있었지만 당신에게 저의 한 표를 던졌습니다. 재직 기간동안 대통령으로서 스스로 근엄함과 엄숙함을 포기하고, 반대하는 사람들의 동네북이 되고, 수구 언론들에게 잘근잘근 씹히는 껌이 되셨으나 소통과 참여의 문을 열어놓은 당신의 모습이 좋아보였습니다. 퇴임 후 다른 전직 대통령들과 다르게 고향으로 돌아가 편안한 동네 이장으로, 옆집 아저씨가 되셔서, 농사를 짓는 당신의 웃는 모습이 참말로 감동이었습니다. 그런데 그런 당신이 이렇게 갑작스럽게 가시다니요. 아직도 믿기지 않습니다, 당신의 살아있는 그 모습을 다시 볼 수 없다는 것이. 그러다 당신이 가셨을 마지막 순간까지 얼마나 외롭고, 고통스러웠을까를 생각하니 가슴이 저며옵니다.

당신의 영전에 가보고 명복을 비는 국화꽃 한 송이라도 바치고 싶지만 여전히 생업에 바쁜 저의 현실의 벽에 막혀있습니다. 당신이 말씀하신 것처럼 삶과 죽음이 모두 자연의 한 조각일지 몰라도 남은 자들에게 당신은 이제 너무나 먼 곳에 계십니다. 당신을 추모하며, 저의 어설픈 연주를 당신의 영전에 바치고, 저 세상에서나마 편안히 잠드시기를 빕니다.


고 노무현 전 대통령님이 퇴임 후 손녀와 자전거 타는 모습

노무현 전 대통령님께 바치는 추모곡 버전 0.8 (김동진님의 가곡 진달래꽃을 약간 편곡하여 연주했습니다.)

2009-03-23

Two things to be fixed in next update of Internet Explorer 8

I am quite thrilled to have a standards compliant and decent new version of Internet Explorer 8 produced by Microsoft. It is absolutely different from its predecessors and good enough to be praised by lots of standards devotees. I am sure that all the users who are stick to the old school version 6 or 7 do not have any reason of hesistating to upgrade. Now there would be a very exciting browser war among star browsers: Internet Explorer, Firefox, Chrome, Safari, Opera and some more. With the launch of new Internet Explorer, I tested two things as a keyboard user. The keyboard usability is highly important especially for some group of people including users with screen readers, users with motor disabilities, users with screen magnifiers, and users with mobile devices. The result of the test was unsatisfactory and I hope to see a fix of this soon.

Keyboard navigation within a page problem

This is a well known bug in the previous version of Internet Explorer and I stated this in the other post: The next tab navigation goes wrong after the activation of a skip navigational link within a page. Developers used some work-arounds to avoid this same-page navigation problem. I expected to see an improvement of this troublesome issue in Internet Explorer 8 but it sitll has the same bug. You can identify this problem by yourself at this testing page. Safari and Chrome have the same bug and only some Gecko based browsers (i.e. Firefox, SeaMonkey, etc) work exactly as expected today. Opera works differently according to the viewport size. It works very unique way and its keyboard navigation between links (Shift + arrow keys) is dependent on how much you see within a page. Hopefully I would like to deal with this Opera’s unique problem later.

Keyboard navigation between two frames problem

This is more subtle and has not been issued a lot since framed web pages are not used often in standards friendly web development these days. The problem is like this. When you activate a link in a frame whose target is in the other frame, the focus should be jumped into the other frame. Unfortunately there is no modern visual browser which support this. Although you activate the link in the first frame, you are still in the first frame and by pressing the tab again, you will be directed to the next link in the same frame. Look at this cropped frames sample page from University of North Texas.

Frame navigation sample page: After activating one link by pressing Enter key in the first frame, the focus should move to the target frame (path b) not within the current frame (path a)

The link in the picture, “Links Challenge” has “right” as the target attribute and it causes a change in the right frame. When you navigate this page with keyboard only, it is natural to continue your tab navigation in the “right” frame after selecting the “Links Challenge” link in the left frame. In reality, however, when you press the tab key again after “Links Challenge” is activated, you will be directed to the “Images Challenge” within the same frame not “Skip Navigation” link in the target frame. In short, in the picture, path “a” is wrong way and path “b” is the right way to navigate with the keyboard. Unfortunately there is no visual browsers (at the time of this writing) who support the path “b” and only two screen readers, JAWS and Home Page Reader make up for this and they will lead you to follow path b according to Jim Thatcher.

2009-03-19

PDF annotation software as an alternative to trainees' note taking

PDF (Portable Document Format)

Many people misunderstand that PDF is Adobe System’s proprietary format while the truth is it was released as an open standard. Therefore we have dozens of and hundreds of PDF solutions from simple desktop readers to huge and complicated enterprise systems. Everybody agrees that Adobe Reader is definitely one of the most popular PDF readers on various platforms? Actually we have dozens of other simple PDF readers (such as Foxit Reader), of course.

PDF creation

However, it is another common misconception that Adobe Acrobat is the only commercial software which can produce PDF files. I have used several different applications to create PDF in my workplace and home: CutePDF, doPDF, PDFCreator, OpenOffice.org, and our company’s own EDMS. Most of the free software apps have some limitations in accessibility (most of them do not support tagged PDF) but still they are good enough to make a quick PDF file.

PDF editing

It is a bit difficult to find an easy-to-use free PDF editing software app. But we do have. PDFescape, PDFfiller and PDFVue are wonderful but free web based PDF editing, form-filling, and commenting platforms. You don’t need to install any software to edit your PDF files.

Annotation on PDF

Here is my issue as a trainer: I wanted to distribute my presentation materials or trainees’ workbook with an electronic format such as PDF. I fully agree that it is not a good idea to use only electronic format in a typical classroom, for I am not sure if learners are focusing on the training materials and not distracted. People will suffer from pain in their eyes while gazing into the screen for a long time. The biggest problem, however is they cannot enjoy adding their personal notes and writings on the electronic file in a convenient way. I googled and found two free apps: PDF-Xchange viewer and Jarnal. My choice was PDF-Xchagne viewer since Jarnal is too big and requires a tablet PC for easy use. Free version of PDF-Xchange supports most of commenting options: highlighting, typewriting, underlining, sticky note, line drawing, polygon drawing and so much. Moreover, this personalized file can be securely saved, shared, referred, searched and re-distributed thanks to the EDMS in my company.

Commenting tools in PDF-Xchange viewer

PDF workbook in the classroom

I have not tested this (PDF annotating) in a real classroom. I expect lots of obstacles, stiff resistance, repeated trials and errors from my coworkers and trainees. This is not a problem of technology but a problem of people’s habit, behavior, and tradition. I never saw any successful case in e-book business except Amazon’s Kindle. I’ll have to be very careful to practice this in the real classroom. At best, it might work in some very limited conditions. Korean government (Ministry of Education and Science) is also testing e-textbook (or digital textbook) for K12 education. We might need smarter hardware and software supporting natural viewing and writing based on intensive human behavior research.

2009-02-14

오랜만에 인터넷 세계에

오랜만에 블로그에 글을 써본다. 그동안은 결혼하고 새로운 생활을 꾸려나가느라고 온라인 세상에서 멀어지기도 했었고, 회사 안에서 블로그, 게시판, 위키, 파일 공유, 회의실 예약 시스템 등을 작은 조직에 맞게 만들고, 다듬고, 전파하는 재미에 빠지기도 했었고, 보수적인 대기업의 벽을 실감하기도 했었다. 그러는 동안 개인적인 블로그 활동에 잠시 흥미를 잃었기도 하고, 블로그에 올릴만한 가치있는 아이디어들을 만들어내지도 못했다. RSS 리더에 들어가니 글이 엄청나게 많이 쌓여 있어서, 즐거움 반, 한숨 반이 나온다. 게다가 TV나 신문도 잘 접하지 않아서 오랜만에 들어가본 뉴스에는 분노를 자아내는 것들이 많다. 그러니 뉴스를 보지 않고 살아온 최근 얼마 동안이 참 행복했던 시절이었음이 분명하다. 개인적으로 결혼을 하면서 새로운 빛의 삶이 시작되었지만, 여전히 우리는 화려한 전과 기록을 자랑하는 2MB가 한 나라의 대통령인 어두운 현실에 놓여 있다는 것을 자각하게 되었다. 그리고 그 사람이 주인장 노릇하는 청와대에서는 상상할 수 없는 짓을 하고 있다는 것도...

2009-01-07

옛날 제로보드 홈페이지가 해킹을 당했습니다.

워드프레스를 이용한 블로그를 쓰기 전에 2006년 초까지 제로보드라는 PHP 게시판을 썼습니다. 그런데 그게 상당히 옛날 버전이어서 보안이 매우 취약합니다. 그래서 스팸에 대한 대처도 거의 전무하고, 더욱 문제인 것은 해킹 위협에 그냥 노출되어 있다는 것입니다.

옛날 홈페이지에 악성 코드가 iframe으로 계속 삽입되어 생성되고, 이게 파일에서도 DB에서도 지워지질 않습니다. 한국 정보 보호 진흥원 인터넷 침해 사고 대응 지원 센터(http://www.krcert.or.kr)가 알려준 바로는 이 악성 코드가 홈페이지 방문자의 개인 정보를 가져갈 것으로 의심이 된다고 하는군요. 게시판의 관리자 기능도 먹통이 되어 버렸고, 대략 난감입니다. 어딘가 백도어가 설치되어 보안 취약점이 계속 노출되고 있는 것 같은데... 아무튼 옛날 버전의 게시판을 그냥 그 상태로 남겨놓은 것이 큰 실수였던 것 같습니다. 옛날 버전의 웹 프로그램에 대해서 제 때에 보안 취약점 패치를 하는 것과 평소 보안 관리를 잘 하는 것이 매우 중요하다는 것을 큰 댓가를 치르고 알게 되었습니다.

어쨌든 문제 해결까지 상당히 시간이 걸릴 것 같습니다. 흑흑...

2008-12-20

제가 결혼을 합니다.

오랫동안 혼자 살았던 인생의 긴 전반기를 마치고 이제 둘이서 나머지 삶을 살기로 하였습니다. 짧은 연애 기간 탓에 추억을 만들기도 전에, 한 달 앞으로 다가온 결혼 준비를 하려니 참 갈팡질팡 정신이 없습니다. 그럼에도 불구하고, 언제나 저의 부족함을 잘 이해해주고 따뜻한 사랑의 마음으로 감싸주는 1월의 신부가 있어서 즐겁게 준비하고 있습니다. 2009년 기축년 새해의 첫 달, 행복한 예식에 소중한 여러분을 초대합니다.

Wedding Invitation

삼성동 코엑스몰 앞에서 예비 신랑과 신부아름다운 꽃이 피기까지 가꾼 이의 정성과 물과 바람과 흙과 햇볕이 있었듯이, 인생의 기쁜 순간을 맞이하는 저희 두 사람의 곁에는 많은 분들의 보살핌과 배려와 우정이 숨어 있었습니다. 언제나 이러한 분들에 대한 고마움을 잊지 않고 서로 사랑하며, 바르게 살겠다는 소중한 맹세의 시간을 갖고자 합니다. 함께 새출발하는 저희 두 사람의 모습을 부디 오셔서 지켜봐 주시기 바랍니다.

신현년
하명강
의 차남 승식 (그레고리오)

김덕수
이순자
의 장녀 희진 (힐데가르트)

혼배 미사 (결혼식 + 피로연)

  • 일시: 2009년 1월 17일 토요일 정오(12시) iCAL 결혼식 일정을 구글 캘린더에 추가하기
  • 장소: 경기도 성남시 분당구 분당동 132 요한 성당 [요한 성당 교통편▼]
    지하철로 오실 때

    분당선 서현역 → 2번 출구쪽 에스컬레이터 이용 → 삼성프라자 백화점 2층 → 마을 버스 3-2번 → 요한 성당 앞 정류장에서 내립니다.

    버스로 오실 때
    효자촌 우성 프라자 앞 정류장에 하차하는 버스
    • 광역 버스: 303, 1001, 1005-1, 9000, 9001, 9401, 9402, 9403, 9407, 9408, 9409, 9414
    • 시내 버스: 2, 33-1, 51, 77-1, 720, 820, 1116 (하차하여 정류장에서 택시 이용 3분 소요)
    요한 성당 앞 정류장에 하차하는 버스
    • 광역 버스: 8151, 1500, 1500-2
    • 시내 버스: 17, 33, 119, 442, 520, 520-1
    • 마을 버스: 3, 3-1, 3-2
    • 공항 버스 이용시 – 분당 서현역 정류장에서 하차 후 택시 이용 (7분 소요)
    주차

    성당 지하 주차장(180대) 및 율동 공원 주차장 (무료)

  • 분당행 버스: 예식 당일 분당행 버스 1대가 광주역 앞에서 아침 7시에 출발합니다.
  • 화환은 일체 사절합니다. 이를 대신하여 사랑의 쌀▼을 이웃에게 기증할 수 있습니다.
    사랑의 쌀

    신랑 신승식과 신부 김희진의 혼배를 축하해주시는 분께 알려드립니다. 우리 성당에서는 혼배가 있을 때 축하 화환의 반입이나 진열을 일체 불허합니다. 이를 대신하여 “사랑의 쌀”을 어려운 이웃에게 기증하실 수 있습니다. 예식 1일 전까지 성당 사무실에 문의한 후 현물 또는 현금으로 보내주시면 됩니다. 기증하신 분의 성함을 혼배 당일 식장 앞에 전시해 드리며, 보내주신 쌀은 불우한 이웃에게 신랑 신부의 이름으로 보내드립니다.

    신랑 신부의 혼배도 축하해 주시고, 어려운 이웃에게 도움을 주실 수 있습니다.

    축하받으실 분
    혼배 일시 2008년 1월 17일 12시
    신랑 이름 신승식 그레고리오
    신부 이름 김희진 힐데가르트
    보내주시는 분
    성명
    기관명
    연락처
    입금 계좌:
    국민은행 270937-04-001046 (예금주: 천주교수원교구유지재단)
    문의:
    분당요한성당 사무실 전화 031-780-1112, FAX 031-780-1109

    분당요한성당 귀중

피로연 (광주)

  • 일시: 2009년 1월 9일 금요일 정오(12시) ~ 오후 3시 iCAL 피로연 일정을 구글 캘린더에 추가
  • 장소: 광주광역시 동구 동명동 80-1 웨딩홀 오페라하우스 [오페라하우스 교통편▼]
    고속도로 이용시

    동광주 IC로 들어와서 사거리에서 우회전 → 서방 사거리에서 좌회전 → 지산 사거리에서 200미터 앞 오른쪽

    버스 이용시
    • 백운동 방향에서 오실 때 → 조대 입구 → 살레시오 여고 승강장에서 내립니다. → 맞은편
    • 산수동 방향에서 오실 때 → 지산 사거리 → 살레시오 여고 승강장에서 내립니다.
    공항에서 오실 때

    공항에서 1000번을 타고 살레시오 여고 승강장에서 내립니다.

    시내 버스

    01, 15, 17, 27, 28, 35, 55, 80, 1000(공항 버스)

2008-12-08

웹 접근성 품질 마크 심사 끝

지난 몇 달동안 나를 최대한 괴롭혔던 것이라면, 단연코, 웹 접근성 품질 마크 심사였다. 웹 접근성 품질 마크는 이번이 4회째인데 대상 웹 사이트가 갈수록 늘어나 열 댓 명의 심사위원 한 사람에게 배정된 양이 만만치 않았다. 한 사이트에 대해 세 사람이 심사하고, 세 사람의 의견을 모아서 마지막으로 다시 한 사람이 보고서를 정리한다. 주말이나 저녁에 쉬는 시간이면 품질 마크 귀신이 나를 따라다니며 "네가 지금 이러고 있을 시간이 있어?"라며 괴롭혔다. 평가 기간동안 개선이 일어나면 다시 심사를 반복해야 했는데, 접근성이 개선된 것은 참 반가운 일이지만, 평가하는 사람들에겐 노동이 더 늘어나므로 반가운 소식만은 아니었다. 스물 여섯 개의 지표를 수십 개의 페이지에서 확인하는 일은 상당한 중노동이다. 그런 수십 아니 수백 수천 개의 페이지를 만든 사람의 노고에 비하면 별 것 아니겠지만.

웹 접근성은 모로 가거나 홀로 가도 대충, 빨리 앞으로만 가면 된다는 기술 지상주의나 성장 제일주의에 대해, "올바른 방향으로, 합의된 규칙을 지키며, 다같이 함께 가지 않으면 진보하지 않는 것"이라고 딴지를 거는 제동 장치이며, 기술과 디자인의 바른 길을 제시해주는 항법 장치이다. 다행히 이런 제도 때문인지 거의 바닥에서 출발한 한국 공공 기관의 웹 접근성은 눈에 띄게 좋아지고 있다. 대부분의 일반 기업들의 웹 사이트는 아직도 세계 최하위 수준이지만.

나중에 시간이 나면, 여러 사이트에서 공통적으로 자주 나오는 문제점들을 모아서 사례집으로 만들어도 좋을 것 같다. 키보드 보안 프로그램을 강제로 설치하도록 우기는 사이트들(개인적으로 키보드 보안 프로그램이야말로 과장된 보안 위협에 기반한 사기성 프로그램의 극치라고 생각한다.), 아직도 기본 중의 기본인 URI를 감추거나 페이지 제목을 제대로 안 쓰는 사이트, 뻔한 HTML을 놔두고 정말로 희한한 자바스크립트를 개발하여 적용한 사례 등등... 아무튼 오늘로 나에게 주어진 모든 사이트에 대한 보고서까지 다 마쳤다. 제발 다시 재심이 들어오지 않았으면 좋겠다. 연말을 편하게 보낼 수 있게...