Outline ist wirklich over and out im Firefox

Outline Bug im Firefox

Designer hassen ihn. Usability Experten fordern ihn ein. Outline. Der kleine, feine so hilfreiche Rand, wenn man per Tastatur auf einen Link oder in ein Formularfeld tabt oder klickt. Die kleinen Pünktchen rund um jedes wunderbare Headerbild, die jeden Designer die Haare Grau werden läßt und er schlussendlich zu 99% auf Usability oder Barrierefreiheit pfeift. Und ich oute mich: ich versteh beide.

Ich mag auf einen Firefox Bug hinweisen, der seit 2009 einfach so vor sich hinschmort. Außerdem kurz erklären welche Alternativen es zu Outline gibt. Wenngleich es keine wirklich befriedigende Lösung an sich gibt. Solang immer mehr Browser ein Eigenleben bei der Gestaltung von Outline führen, solang wird es immer öfter heißen: Outline:none, auch wenn diese Linien wirklich hilfreich sind.

Outline, wie ihn einige noch kennen
Outline, wie ihn einige noch kennen

Als Netbook Userin mag ich diese Linien, die mir anzeigen wo ich mich grad hingetabbt habe ;). Als WebDesigner bekomm auch ich die Krise, wenn das Design schlichtweg bescheidenst aussieht, wegen dieser Linien.

Und wenn dann noch Firefox seit 2009 Bugs bei der Verwendung von Outline hat, zumindest sicher,wenn man box-shadow irgendwo bei den InputFeldern verwendet, wird Barrierefreiheit zu versuchen zur Liebhaberei.

Die Bugs von Firefox

When an outline and a box-shadow are applied to the same element, the outline is rendered outside the box-shadow (instead of immediately outside the border).

Bug Report

So wird der Bug bei Firefox beschrieben und genau das macht er auch. Erst dieser Tage gab es wieder einen Beitrag zu diesem Bug, gelöst ist er nicht.

ich steh dazu, dass ich Designschwächen in Kauf nehme

Für mich steht die Benutzbarkeit einer Webseite im Vordergrund. Ich mag einfach, dass soviele Menschen wie irgendmöglich die Webseite benutzen können. Manchmal muss ich schlichtweg auch Abstriche machen, Perfektion ist für mich in diesem Bereich nicht und nicht mehr erreichbar. Daher bremse ich Outline nicht aus und akzeptier den Firefox Bug einfach.

Pseudoklassen nutzen :focus :active

Bei Links gestalte ich jedoch mit den Pseudoklassen :focus und :active, weil ich da für mich weniger WorkArounds für die diversen Browser brauche und ich mehr Freiheiten sehe.

CSS3 bringt hier mehr Hürden als Hilfreiches

Wenn ich sehe wieviele WorkArounds bei den diversen Browsern nötig sind, um Outline so zu gestalten, damit es nicht das Design bricht, werden die Hürden eine Website barrierefrei (barrierefreier) zu gestalten immer höher. Es wird immer schwieriger und schwerer auch dem Kunden die Notwendigkeit zu erklären, weil nun mal Ästhetik einen höheren Stellenwert hat. Ob ich das gutheiße oder nicht ist eine philosophische und ethnische Frage, aber keine die den Alltag des WebDesigners prägen kann.

Artikel zum Thema von anderswo

  • Remove dotted outline versus accessibility
  • Eine Sammlung an WorkArounds um CSS 3 und Outline in den Griff zu bekommen – sowohl im Artikel wie in den Kommentaren- der gepunktete Rahmen.
mts

Ebenfalls informativ und lesenswert