Entries tagged as webdev

2008-12-11 jQuery-skipnavHighlight - nicely highlighting skip link targets

[deutsche Version dieses Beitrags anzeigen]

When I read about the Skip Links of the recently relaunched Website of City of Stockholm in the "EfA-Laborbericht, Teil 7" (german) I got instantly aware that I want to use this technique from now on as well.

To avoid "jumping" of the highlighted Containers the Developers used the CSS 2 Property outline which does not add up to the width of the Element it's surrounding like border would do. Sadly this Property is only available in the newest Browser Generation which makes the effect entirely invisible in the Internet Explorers.

To work around this Issue I used another approach. My little jQuery Plugin "skipnavHighlight"created an empty DIV and uses it to draw a Border around the link target.

You can find the working Demo here and you can download the Code of skipnavHighlight.jquery here.

2008-12-11 jQuery skipnavHighlight - Skip-Link-Ziele Anschaulich machen

[switch to english Version of this Post]

Als Tomas Caspers in seinem gestrigen "EfA-Laborbericht, Teil 7" auf die Skip-Links der frisch relaunchten Website der Stadt Stockholm verwies war mir klar, daß ich diese einfache und einfach Sinnvolle Technik zukünftig unbedingt ebenfalls nutzen möchte.

Um ein "Springen" der markierten Container zu vermeiden setzten die Entwickler der Webseite auf die CSS2 Eigenschaft: outline die das umrandete Element nicht verbreitert wie es border machen würde. Leider ist diese Eigenschaft nur in der neuesten Browser Generation verfügbar, was das Feature in den Internet Explorern vollständig verschwinden lässt.

Um diesen Makel zu umschiffen habe ich einen anderen Lösungsweg eingeschlagen. Mein kleines jQuery Plugin "skipnavHighlight" erzeugt ein leeres DIV und malt damit einen Rahmen um zu markierende Linkziel.

Eine funktionierende Demo gibt es hier und herunterladen kann man den Code von skipnavHighlight.jquery hier.

2008-12-01 Der Webkrauts Adventskalender 2008 öffnet seine Türchen

Banner: Best Practice im Web

Auch dieses Jahr beglücken die Webkrauts die Webstandards-affinien Web Entwickler wieder mit 24 prächtigen Vorweihnachtsgeschenken. Das diesjährige Thema der Artikelserie ist "Best Practices im Web".

Den Anfang macht dieses Jahr Ansgar Hein mit seinem Bericht "Stadt 2.0: Interaktiv und barrierefrei" in der er seine Erfahrungen bei der Erstellung von barrierefreien Stadtportalen anhand des Beispiel der Stadt Moers teilt.

Meine eigenen 2-3 Artikel werden innerhalb der nächsten 24 Tage folgen :-)

2008-11-19 LogFocus - handy Bookmarklet for Keyboard Accessibility testing

[deutsche Version dieses Beitrags anzeigen]

Offering usability for Users without Mouse is one of the biggest and most important Steps when building accessible Websites. While testing for Keyboard Accessibility you might find yourself very often in Situations like "Where is my Cursor?" or "What Element has the Focus right now?". Especially when Elements get moved offscreen things might end up confusing.

A Script, I've been using for a while to solve situations like this, I have now converted into a handy Bookmarklet.

LogFocus works in all Browsers that offer a Console. In Firefox you need Firebug. In Safari/WebKit you need to activate the "develop" Menue. For Internet Explorer I recommend using Companion.JS. In Opera the build in Console in Dragonfly is used.

To install the Bookmarklet simply drag the following Link into your Bookmarks.

LogFocus

From there you can run it on every Page by simply clicking on it.