Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Suchen

Donnerstag, 16. Oktober 2014

Was wäre "Neuland" ohne komfortable Suchfunktionen? Voran natürlich die allseits geliebte Tante Google.

Heute möchte ich aber nicht über Google & Co schreiben, sondern über

Seiteninterne Suchfunktionen auf Webseiten und in Apps.

Jeder aktuelle Browser kann komfortabel innerhalb von Webseiten suchen. Mit Strg + F, und dann mit Enter zum jeweils nächsten Treffer springen.
Die neuesten Browserversionen zeigen zusätzlich noch einen Hinweis wie "1 von 5 Übereinstimmungen" (Firefox), "1 von 5" (Chrome, Opera) oder "5 Treffer" (Safari).

In meinem Suchscript

habe ich versucht, die Sache ähnlich komfortabel zu gestalten. Die Treffer werden auf den Zielseiten farbig unterlegt, und zusätzlich wird die Zielseite bis zum ersten Treffer gescrollt.

Screenshot Firefox
Die Seite mit dem Suchtreffer (in diesem Fall die Startseite von webdesign weisshart) wird bis zum ersten Treffer (Internet) gescrollt.

Interessant wird es mit mobilen Geräten

iOS/Safari hat die seiteninterne Suche etwas versteckt. Eigentlich Schade um diese coole Funktion.

Screenshot iPhone 1
Ins Adressfeld, also dort, wo man normalerweise die Adresse der zu öffnenden Seite eingibt, den Suchbegriff eintippen. Es werden mehrere Vorschläge angeboten, je nach Konfiguration des iOS-Geräts, z. B. die Suche nach dem eingegebenen Begriff bei Google fortzusetzen.
Screenshot iPhone 2
Wenn man ganz nach unten scrollt, kommt als letzter Vorschlag "Auf dieser Seite [Suchbegriff] suchen"
Screenshot iPhone 3
Diesen Vorschlag antippen, und auf der aktuellen Seite werden die Suchtreffer gelb hinterlegt. Mit den Pfeiltasten in der Fußleiste kann man dann bequem von Treffer zu Treffer springen.

ähnliche Features bieten fast alle für iOS verfügbaren Browser.

iOS-Apps

Meine neue Lieblingsapp auf dem iPhone, NoteBox, versucht, die geschilderte Funktionalität von Safari nachzuahmen. Bei NoteBox gibt es eine sowohl eine seitenübergreifende als auch eine seiteninterne Suche. Die Umsetzung ist noch etwas holprig. Aber die App ist relativ neu, und wird vom Entwickler intensiv gepflegt. Da ist noch Verbesserung zu erwarten.

Sonderfall Screen Reader

Gerade für blinde IT-Nutzer, die ein längeres Dokument nicht mit einem Blick scannen können, ist eine auch mit Screen Reader funktionierende seiteninterne Suche wichtig. Funktionierend heißt: Treffer anspringen (fokussieren), und den Kontext (die Umgebung) automatisch vorlesen.
Die verschiedenen Screen Reader haben diese Funktion implementiert.

Für Interessierte hier beispielsweise die Befehle für den kostenlosen Screen Reader NVDA:

  • NVDA-Taste+STRG+F öffnet ein weiteres Fenster, in dem Sie einen Text eingeben können, der im aktuellen Dokument gesucht werden soll.
  • NVDA-Taste+F3 aucht die nächste Zeichenkette des gesuchten Textes im aktuellen Dokument, welche zuvor eingegeben wurde.
  • NVDA-Taste+Umschalt+F3 sucht die vorherige Zeichenkette des gesuchten Textes im aktuellen Dokument, die zuvor eingegeben wurde.

iOS VoiceOver

Safari unterstützte seit iOS 6 die oben beschriebene seiteninterne Suche mit dem betriebssystemeigenen Screen Reader VoiceOver. Genauer: Wenn VoiceOver aktiv war, wurde der Fokus automatisch in den ersten Treffer gesetzt, und der Kontext vorgelesen. Weitere Treffer konnten auf die gleiche Art angesprungen und vorgelesen werden. In iOS 8 (bis einschließlich Version 8.0.2) ist diese Funktionalität, das automatische Vorlesen, leider kaputt. Aber das ist ja nicht das einzige Problem mit iOS 8.



2 Kommentare

  1. Hi! Hast du bei deinem aktuellen Firefox immer noch die Anzeige der gefundenen "Übereinstimmungen" unten in der Leiste? Oder hat Mozilla wieder mal etwas Bewährtes einfach entfernt?

    Denn bei meinem Firefox 31.3.0 ESR (in der Arbeit) fehlt das. Und ich finde kein Addon, das mir ganz simpel alle per Strg+F gefunden Wörter zählt, oder noch einfacher das markierte Wort zählt.

    Hast du zufällig ein Script dafür (für die Verwendung in "Stylish")?

    Kommentar von Johann — Donnerstag, 7. Mai 2015 - 16:39 Uhr

  2. @Johann
    In der Standard Version 37.0.2 ist die Anzeige drin. Schwer vorstellbar, dass die ESR dieses Feature nicht mitbringt.
    Ich würde mal beim Support nachfragen, wozu heißt das Teil schließlich Extended Support Release (ESR).

    Kommentar von Fritz — Donnerstag, 7. Mai 2015 - 17:01 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

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