Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

SayText - eine kostenlose iPhone App, mit der blinde Anwender sich Gedrucktes vorlesen lassen können.

Dienstag, 29. Juni 2010

www.docscannerapp.com/saytext/

Dass so etwas kostenlos zur Verfügung gestellt wird, ist schon mal gut. Aber jetzt gleich zu einem ersten Test.

Die Aufgabe: ein Behördenschreiben, also relativ sauberes gedrucktes Schriftbild.

Der Ablauf:

  1. VoiceOver aktivieren.
  2. SayText aufrufen.
  3. iPhone auf die Vorlage legen.
  4. SayText starten.
  5. Das iPhone langsam nach oben bewegen, dabei darauf achten, dass das iPhone nicht verdreht oder verkantet wird
  6. Sobald die App erkennt, dass das ganze Blatt erfasst wird, ertönt ein Piepton. Dann iPhone ruhig halten. Die Auslösung erfolgt automatisch, sobald die Kamera fokussiert hat. (alternativ wäre auch manuelles Auslösen möglich. Für einen blinden Benutzer macht das aber wohl weniger Sinn.)
  7. Ab jetzt läuft alles automatisch: Scanning - Detect orientation - OCR. Leider wird der Fortschritt nicht automatisch angesagt, sondern muss mit VoiceOver Gesten abgefragt werden.
  8. Sobald das OCR abgeschlossen ist, kann der erkannte Text mit VoiceOver gelesen werden.

Das Ergebnis liest sich ungefähr so:

Sceenshot
Sceenshot
Sceenshot
Sceenshot
Sceenshot
Sceenshot

Der Steuerfreibetrag wtrd grundsämich
pdna Jahr md fßrda gesamte Laufzeit
der Rente benickslchtigt Für jeden
neuen Rentnerjnhrgeng ab 2000 erhöht
sich der Besteuerungsanteil um zwei
Prozentpunkte und pden eecerr
Reritnerfahrgang ab 2021 um einen
Prozentpunkf, Der sich so ergebende
Steuerfreibetrag sinkt demnach jeden
necen
_ Rentnenahrgang schrittweise eb. Bel
den Rentnerjnhrgängen ab dem Jahr
2040 werden dann 100 der Rente aus
gesetzlichen Rentenversicherung

Ob dies genügt, um ein Behördenschreiben zu interpretieren, möchte ich nicht beurteilen.

Als stark verbesserungswürdig halte ich auch die benötigte Zeit. Im Beispiel dauerte der Vorgang sage und schreibe 4 Minuten.

Wie gesagt: Die App ist kostenlos.

Nachtrag: Der Test wurde mit einem iPhone 3GS durchgeführt. Vermutlich fallen die Ergebnisse mit einem iPhone 4 besser aus: Bessere Kameraauflösung, Blitzunterstützung, höhere Prozessorleistung.

Nachtrag 08.07.: Die heute erschienene Version 1.1 scheint etwas schneller zu arbeiten. Von 4 auf ca. 2 1/2 Minuten für die gleiche Vorlage. Immerhin. Der Chef der Entwicklerfirma verspricht in einem Demo-Video eine Beschleunigung um 75%. Es bleibt das Problem der miserablen Erkennungsrate; zumindest auf dem 3GS.


Der gepunktete Rahmen des Submit-Buttons

Samstag, 19. Juni 2010

Der Firefox macht um den Absende-Button von Formularen einen gepunkteten Rahmen, wenn man den Button per Tabulator-Taste ansteuert.
Das kann im Falle eines sorgfältig gestaltetes Designs arg stören. Ein Beispiel ist der per CSS "rund gemachte" Absende-Button meines Suchformulars. (siehe diesen Beitrag.)
Screenshot

Ein eckiger Rahmen um einen runden Button, das sieht wirklich nicht gut aus.
Aber dieser Rahmen widersetzt sich sich allen Versuchen, ihn per CSS zu entfernen, recht störrisch.

Und es geht doch

Screenshot

Dirk Ginader hat es ganz kurz und trocken getwittert.

Die CSS Anweisung dazu lautet:

input[type=submit]::-moz-focus-inner {border: 1px dotted transparent;}

Ja, genau so. Auch wenn die Syntax fremd erscheint.

Wer nicht generell alle Submit-Buttons stylen will, sondern nur bestimmte mit id oder class ausgezeichnete Buttons, kann die CSS Anweisung natürlich entsprechend abändern. Für einen Button mit der Klasse senden :

.senden::-moz-focus-inner {border: 1px dotted transparent;}
bzw. für einen Button mit der id senden:
#senden::-moz-focus-inner {border: 1px dotted transparent;}

Wichtig: Bitte unbedingt sicherstellen, dass der Fokus, wenn nicht mittels des gepunkteten Rahmens, dann auf andere Art klar kenntlich gemacht wird! Dies ist unentbehrlich für Tastatur-Nutzer, damit sie den Fokus sehen, d. h. wissen, welches Seitenelement gerade aktiv ist.

PS: Kennt jemand eine Methode, den Rahmen auch für Webkit (Chrome, Safari) und Opera zu entfernen. Nach dem IE frag' ich erst gar nicht. Dort fällt es übrigens gar nicht so sehr ins Gewicht, weil der IE ohnehin den per CSS rund gestalteten Submit-Button nicht darstellen kann.


Rechtschreibprüfung in beliebigen Sprachen

Freitag, 18. Juni 2010

In diesem Blogbeitrag habe ich erst kürzlich über das nützliche Firefox Add-on "Deutsches Wörterbuch" berichtet.
Was für ein irreführender Name. Das "Deutsch Wörterbuch" lässt sich ganz einfach um weitere Sprachen erweitern. Auf der Seite Wörterbücher und Sprachpakete gibt es für fast alle denkbaren Sprachen Wörterbücher, die sich mit wenigen Klicks in die Rechtschreibprüfung des Firefox integrieren lassen.
Die Wahl der jeweils benötigten Sprache trifft man fallweise im Kontextmenü (Rechtsklick), wenn sich der Cursor in einem Texteingabefeld befindet.
Screenshot Kontextmenü

Und schwupps: Schon klappt die Korrekturfunktion auch wenn ich einen Kommentar in einem englischsprachigen Blog poste.
Screenshot Kontextmenü


CSS für iPhone 4 (und iPad?)

Montag, 14. Juni 2010

Seit langem statte ich meine Seiten mit einem fürs mobile Surfen optimierten CSS aus. Weil mobil Surfen, so ist jedenfalls mein Eindruck, erst wirklich Spaß macht, seit es das iPhone gibt, habe ich mir auch angewöhnt, die Anzeige gleich auf die verfügbare Breite des Geräts (in der Hochformat-Ansicht) einzustellen.
Dazu dient folgender Meta-Tag:

<meta name="viewport" content="width=320" />
Weil das Display des iPhone eben 320 px in der Breite auflöst.

Aber jetzt kommt das iPhone 4 mit 640 px. Und obiger Meta-Tag wird dazu führen, dass die Anzeige die doppelte Breite des Displays einnimmt, also zu horizontalem Scrollen zwingt. Eine Horrorvorstellung. Was tun?

<meta name="viewport" content="width=640" />
führt auf iPhones < 4 dazu, dass eine Webseite nur noch in Briefmarkengröße dargestellt wird.

Aber Safari stellt eine wesentlich elegantere Methode zur Verfügung:

<meta name="viewport" content="width=device-width, user-scalable=yes" />

Der Wert device-width liest die auf dem Gerät verfügbare Breite aus, anstelle einer festen Angabe in Pixel.
Und user-scalable=yes ermöglicht das Zoomen. Ohne diese Angabe lässt das Meta-Tag Zoomen nicht zu. Ganz Böse! Man wäre auf horizontales Scrollen angewiesen, um die Seite zu lesen.

Screenshot iPhone
Demoseite
Die Demo macht natürlich nur mit dem iPhone Sinn, oder einem User Agent Switcher, z. B. diesem Firefox Add-on



Referenz

Anmerkung: Was das iPad mit diesen Angaben wohl macht? Vielleicht könnte mal ein "iPadler" einen Blick darauf werfen.


Besuchte Links auf Webseiten kennzeichnen.

Mittwoch, 9. Juni 2010

Eine alte Usability- und Accessibility-Forderung: Besuchte Links kennzeichnen. Und zwar nicht nur farblich.
Auf webdesign weisshart wurde das bisher ganz deutlich in Form eines Häkchens hinter besuchten Links gemacht.
Screenshot aus der Navigation

hacks.mozilla.org hat vor einiger Zeit angekündigt, dass der CSS Selector :visited aus Sicherheitsgründen zukünftig nicht mehr unterstützt wird:

For many years the CSS :visited selector has been a vector for querying a user's history. It's not particularly dangerous by itself, but when it's combined with getComputedStyle() in JavaScript it means that someone can walk through your history and figure out where you've been. And quickly - some tests show the ability to test 210,000 URLs per minute. At that rate, it's possible to brute force a lot of your history or at least establish your identity through fingerprinting. Given that browsers often keep history for a long time it can reveal quite a bit about where you've been on the web.

At Mozilla we're serious about protecting people's privacy, so we're going to fix this problem for our users. To do so we're making changes to how :visited works in Firefox. We're not sure what release this will be part of yet and the fixes are still making their way through code review, but we wanted to give a heads up to people as soon as we understood how we wanted to approach fixing this.

Seit gestern setzt als erster Browser der Safari 5 diese "Drohung" um. Es ist also wohl nur eine Frage der Zeit, bis Firefox nachzieht. Das Häkchen ist damit Geschichte. Es bleibt die farbliche Kennzeichnung. Eine spannende Frage kann ich derzeit nicht testen: Wie sind besuchte Links zukünftig in Screen Readern erkennbar?

Nachtrag: VoiceOver, der Screen Reader von Apple, erkennt besuchte Links, hat mir eben ein Bekannter bestätigt.


Rechtschreibprüfung im Firefox

Montag, 7. Juni 2010

Ein Firefox Add-on, das eigentlich auf keinem Rechner fehlen sollte: Deutsches Wörterbuch. Hilfreich, um beim Ausfüllen von Online-Formularen Flüchtigkeitsfehler, Tippfehler und Buchstabendreher zu erkennen.
Screenshot Tippfehler im Formular

Von Carsten Knobloch stammt die pfiffige Anleitung um Fehler deutlicher zu markieren.

Weniger bekannt: mit einem Rechtsklick auf den markierten Fehler öffnet sich ein Kontextmenü mit Korrektruvorschlägen und der Option, das irrtümlich als fehlerhaft erkannte Wort dem Benutzerwörterbuch hinzuzufügen.
Screenshot Tippfehler im Formular


Eine Seite soll nicht auf sich selbst verlinken.

Sonntag, 6. Juni 2010

Eine berechtigte Forderung, wenn es um Usability im Allgemeinen, oder um Barrierefreiheit im Besonderen geht:

Eine Seite soll nicht auf sich selbst verweisen.

Es leuchtet ohne nähere Erklärung ein, dass das folgende Beispiel irritieren kann:

Du bist hier: Startseite - zur Startseite wechseln

Screenshot der Startseite mit Link zur StartseiteDieses Beispiel findet sich auf einer ansonsten technisch absolut sauber umgesetzten Seite. Der Seitenbetreiber mag mir nachsehen, dass ich ausgerechnet sein Projekt als negatives Beispiel zitiere. Im günstigsten Fall ist er mir für den Hinweis dankbar. Übrigens: Toscho nannte das Problem beim Namen: Deppenlink



Mehr als irritierend kann so etwas für Menschen sein, die nicht den Überblick über den ganzen Bildschirm haben. Zum Beispiel Benutzer von Screen Readern. Idealerweise sollte man die jeweils aktuelle Seite in einer Navigation nicht nur nicht verlinken, sondern auch mit einem Hinweis ausstatten, z. B.: "Standort:". Wie dies gedacht ist, zeigt folgender Screenshot aus der Navigation auf meiner Startseite, mit abgeschaltetem CSS (wie auch Screen Reader die Seite vorlesen):
Screenshot der Seitennavigation


Aber jetzt mein Rezept gegen den "Deppenlink"

Das Problem: Die Navigation wird per PHP in alle Seiten eingebunden. Immer die gleiche Navigation. Nun muss natürlich PHP entscheiden, welches die jeweils aktuelle Datei ist, und den Link auf sich selbst durch einen unverlinkten Text ersetzen.

Zuerst den Dateinamen der aktuellen Seite in eine Variable:
<?php $a = $_SERVER['PHP_SELF']; ?>

Und dann eine if-else Abfrage, hier am Beispiel eines Links, der zur Seite /index.php führt:

<?php
if ($a!="/index.php") {
echo '<a href="/">MStartseite</a>';
} else {
echo '<span class="cur"><dfn>Standort: </dfn>Startseite</span>';
}
?>

Anmerkung:
In der Praxis schreibe ich diese if-else Abfrage in Kurzform. Hier jedoch zugunsten der einfacheren Lesbarkeit die ausgeschriebene Form.

Wozu nun der span class="cur"? Nun, dieser Span kann jetzt individuell per CSS so gestylt werden, dass er zum Design der Seite passt.

Und was hat es mit /lt;dfn>Standort: </dfn> auf sich?
Der Hinweis "Standort:" soll nur von Screen Readern vorgelesen werden.
Eine einfache CSS-Regel erledigt dies:

dfn {
position:absolute;
left:-9000px;
width:0;
height:0;
overflow:hidden;
display:inline;
}


Ein Suchformular mit CSS3 gestaltet

Samstag, 5. Juni 2010

Ich habe das Suchfeld auf dieser Seite mal ein wenig "aufgehübscht". Ohne ein einziges Bild, ausschließlich mit CSS. Und weil inzwischen alle modernen Browser CSS3 unterstützen, habe ich ausgiebig Gebrauch gemacht von den CSS3-Eigenschaften radius, gradient und box-shadow.
Im Browser sieht das Suchfeld so aus:
Screenshot
Demo mit CSS im Quelltext


Wie schnell sollen Webseiten sein?

Mittwoch, 2. Juni 2010

Die Antwort ist einfach: Es kann gar nicht schnell genug sein.
Um zu testen, wie schnell die eigene Webseite ist, bietet Google im Rahmen der Webmastertools jetzt folgenden Test:

Im Durchschnitt benötigen Seiten auf Ihrer Website 0,9 Sekunden zum Laden (aktualisiert am 31.05.2010). Dies ist schneller als 93 % der Websites. Diese Schätzungen sind von mittlerer Genauigkeit (zwischen 100 und 1000 Datenpunkten). Das folgende Diagramm zeigt an, wie sich die durchschnittliche Ladezeit Ihrer Website in den letzten Monaten verändert hat. Zu Ihrer Information wird auch der 20%-Quantil aller Websites angezeigt, wobei die langsamen und schnellen Ladezeiten voneinander getrennt dargestellt werden.

Grafik zeitlicher Verlauf der Ladezeit


Wie aus der Grafik zu erkennen ist, hat sich die Geschwindkeit meiner Seiten in letzter Zeit weiter verbessert. Dies ist kein Zufall, sondern das Ergebnis von intensiver Detailarbeit. Wichtigstes Hilfsmittel dabei: Das Firefox/Firebug Add-on Page Speed.
Page Speed misst nicht nur, sondern gibt auch gezielte Hinweise auf Schwächen und Verbesserungsmöglichkeiten.
Wenn Sie selbst einen Test mit Page Speed machen wollen, ohne selbst Firefox, Firebug und Page Speed zu installieren, dann schauen Sie doch mal bei gtmetrix.com vorbei.


Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE