Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Nur ein Test

Sonntag, 31. Juli 2016

So, ich hab' jetzt auch mein Blog für die Nutzung von PhotoSwipe eingerichtet.

… und irgendwann werde ich dann Fancybox "entsorgen".

Nachtrag 02.08.2016:

Ja ist denn heute schon "Irgendwann"? 😀 Fancybox ist hier im Blog durch Photoswipe ersetzt. ✔︎


Google Suche entrümpeln - mobil

Donnerstag, 28. Juli 2016

Über die total vermüllte Google Suche, und was man dagegen tun kann, habe ich erst kürzlich geschrieben: Google entrümpeln. Schön und gut — auf dem Desktop. Aber was unterwegs, auf dem Smartphone. Dort empfinde ich den Müll als noch hinderlicher. Und leider kenne ich keine Möglichkeit, mittels eines User-Stylesheets o.ä. die unerwünschten Inhalte auszublenden. Zumindest nicht auf dem iPhone.

Doch auch für diesen Fall gibt es eine Lösung:
Startpage von Ixquick ist eine Suchmaschine, die anonym auf Google zugreift, und, erfreulicher Nebeneffekt, den von Google ausgelieferten Müll nicht anzeigt.

Screenshot 1
Die Startseite von classic.startpage.com auf dem iPhone
Screenshot 2
Eine Suche nach dem Suchbegriff "webdesign" zeigt auf classic.startpage.com ausschließlich organische Treffer.

Startpage als Standardsuchmaschine in iOS einzustellen, geht leider nicht. Die dort möglichen Alternativen Bing, Yahoo und DuckDuckGo sind meines Erachtens von der Qualität der Suchergebnisse nicht mit Google vergleichbar.
Also entweder

  • Im Browser vor der eigentlichen Suche classic.startpage.com aufrufen, oder, besser
  • classic.startpage.com als Icon auf den Homebildschirm legen ("zu Homebildschirm hinzufügen"). Diese Variante hat den Vorteil, dass man Startpage nach den eigenen Wünschen (Sprache usw.) konfigurieren kann, bevor man das Icon speichert.

Komfort für Tastaturnutzer

Sonntag, 24. Juli 2016

Blinde Menschen, die mit einem Screen Reader surfen, haben gegenüber sehenden Tastaturnutzern — also Surfern, die aus welchem Grund auch immer keine Maus benutzen können — seit jeher einen Vorteil: Sie können mit Hilfe ihres Screen Readers verschiedene Elemente auf der Seite direkt anspringen. Z. B. alle Überschriften auf der Seite.
Tastaturnutzern ist dieser Komfort verwehrt. Navigieren mit der Tastatur bedeutet: mit der Tabulator-Taste mühsam von Link zu Link springen. Mit viel Glück besitzt eine Website wenigstens einen oder mehrere Skiplinks, um mit der Tastatur direkt zu wichtigen Inhalten zu navigieren.

Aber Besserung ist in Reichweite. Das PayPal Accessibility Team und die University of Illinois stellen ein geniales Script zur Verfügung, das den einfachen Skiplink zu einer komfortablen Navigationshilfe erweitert: SkipTo.js

Das Skript kann praktisch ohne Konfiguration "out of the box" benutzt werden. Wobei "out of the box" heißt: Einbinden der externen JavaScript-Datei ins HTML, also eine Zeile HTML:
<script type="text/javascript" src="https://paypal.github.io/skipto/downloads/js/SkipTo.min.js"></script>

Das Skript ist hier auf meiner Site in Aktion.
Der Aufruf erfolgt entweder unmittelbar nach dem Laden der Seite mit der Tab-Taste und Enter, oder, von überall auf der Seite, mit einem Tastaturkürzel:

  • Microsoft Internet Explorer – ALT+0(Null).
  • Mozilla Firefox – ALT+SHIFT+0 (Windows) oder CONTROL+ALT+0 (Mac OS).
  • Google Chrome – CONTROL+ALT+0 (Windows) oder CONTROL+OPTION+0 (Mac OS).
  • Safari – CONTROL+0 (Windows) oder CONTROL+OPTION+0 (Mac OS).

Nachtrag 25.07.2016

Für Smartphones habe ich SkipTo deaktiviert. Da auf diesen Geräten typischerweise keine Tastatur zur Navigation genutzt wird.

Nachtrag 28.07.2016

SkipTo ist jetzt auch vor Screen Reader Nutzern versteckt. Weil das Script in Verbindung mit einem aktiven Screen Reader zu unvorhersehbarem Verhalten bis zum Absturz des Browsers führt. (Das ist übrigens keine Diskriminierung von blinden Seitenbesuchern; Screen Reader Nutzern stehen ohnehin weit umfangreichere Navigationshilfen zur Verfügung.)


Mit CSS ein Symbol (Wasserzeichen) über ein Bild legen

Donnerstag, 21. Juli 2016

Dass Bilder auf Webseiten per Mausklick vergrößert werden können, zeige ich mit einem Lupensymbol in der rechten unteren Ecke des Vorschaubildes an. (Die Technik zur Vergrößerung ist nicht Themas dieses Beitrags. Ich mache das mit Fancybox oder Photoswipe).


Demobild

Hinweis: Dieses Demobild wird bei Mausklick nicht vergrößert. Es soll lediglich das eingeblendete Lupensymbol gezeigt werden.

Diese Lupensymbol könnte man natürlich mit einem Bildbearbeitungsprogramm einfügen.
Eleganter geht es aber mit HTML, und einigen Zeilen CSS.

Das Lupensymbol wird dazu im HTML als img mit der Klasse "after" eingesetzt, und beide (Vorschaubild und Lupensymbol) in ein Element (z. B. span) mit der Klasse "over" eingeschlossen. Der HTML Code sieht dann — vereinfacht, ohne den Code zur Anzeige des vergrößerten Bildes — so aus:

<span class="over">
<img src="pfad_zum_Vorschaubild.jpg" alt="Demobild">
<img span class="after" src="pfad_zum_Lupensymbol.png" alt="" />
</span>

Und das CSS dazu:

.over {
position: relative;
display:inline-block;
}
.over .after {
position: absolute;
bottom: 5px;
right: 5px;
}

Eventuell möchte man das Lupensymbol auch noch per CSS stylen:

img.after {width:20px height:auto;opacity:.8; …}


Lightbox Alternativen angetestet

Donnerstag, 7. Juli 2016

Menschen in einer Bildergalerie
Foto: deviantart.com Lizenz: CC Attribution-Share Alike 3.0.

Eine Bildergalerie braucht man immer wieder. Seit jeher benutze ich Fancybox als Galerie-Script, als Lightbox-Alternative.
Weil es:

  • valides HTML erzeugt,
  • relativ schlank und
  • einigermaßen barrierefrei ist.

Im Laufe der Jahre sind aber doch immer mehr Schwächen aufgetaucht:

  • Fancybox 1 (letzte Version 1.3.4) wird seit 2011 nicht mehr weiter entwickelt. Vermutlich (und verständlich), weil der Entwickler wohl die (kostenpflichtige) Version 2 bevorzugt behandelt.
  • Fancybox 1.3.4 arbeitet mit aktuellen Versionen von jQuery nur noch, wenn zusätzlich das Migrationstool jquery-migrate.js geladen wird.
  • Barrierefreiheit: Der (unvermeidbare, aber für blinde Menschen nutzlose) Link zum Vergrößern der Bilder irritiert Screen Reader Nutzer.

Ich habe mich daher nach Alternativen umgeschaut. Klar, Lightbox-Alternativen gibt es wie Sand am Meer. Ich bin einfach mal einer Empfehlung von Matthias Mees gefolgt:

  1. Magnific Popup von Dmitry Semenov, und
  2. PhotoSwipe vom gleichen Entwickler

Für die beiden Scripte, sowie für Fancybox habe ich jeweils eine Demo-Seite erstellt. Ich habe die Einstellungen jeweils so gewählt, dass der optische Eindruck in allen drei Demos möglichst identisch ist. Vor allem habe ich die Scripte in mein übliches Layout eingebaut, um eventuelle Unverträglichkeiten mit anderen Scripten zu testen.

Die Demos:

Fazit

PhotoSwipe hat das Zeug zum “Testsieger”. Unabhängig von jQuery, perfektes Look & Feel auf Touchscreens und kleinen Smartphone-Monitoren. Zudem: Bildunterschriften / Bildbeschreibungen perfekt umsetzbar. Sowohl für sehende, als auch blinde Nutzer.

PS: Es gibt natürlich auch “handgemachte” Lösungen, die wirklich alle Wünsche bezüglich Barrierefreiheit erfüllen. Die blinde Bloggerin Eva Papst präsentiert auf Ihrer Website Bilder mit Bildbeschreibungen.


Archiv:

Kategorien:

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