Firefox and Internet Explorer user style sheet for better keyboard navigation

Posted by Greg Shin as Lives on Sunday, December 6th, 2009

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.

Keywords(Tags): , ,
Trackback URL: http://gregshin.pe.kr/blog/archives/296/trackback

Add Comments »

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

Posted by Greg Shin as Lives, MIDI on Wednesday, May 27th, 2009

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

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

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

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

Keywords(Tags): , , ,
Trackback URL: http://gregshin.pe.kr/blog/archives/285/trackback

Add Comments »

Page 1 of 6212345...Last Page