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)가 알려준 바로는 이 악성 코드가 홈페이지 방문자의 개인 정보를 가져갈 것으로 의심이 된다고 하는군요. 게시판의 관리자 기능도 먹통이 되어 버렸고, 대략 난감입니다. 어딘가 백도어가 설치되어 보안 취약점이 계속 노출되고 있는 것 같은데... 아무튼 옛날 버전의 게시판을 그냥 그 상태로 남겨놓은 것이 큰 실수였던 것 같습니다. 옛날 버전의 웹 프로그램에 대해서 제 때에 보안 취약점 패치를 하는 것과 평소 보안 관리를 잘 하는 것이 매우 중요하다는 것을 큰 댓가를 치르고 알게 되었습니다.

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