Alle Beiträge von Marc Haunschild

Inclusives Design: Formulare mit HTML und CSS

Auf den meisten Ihrer Seiten bieten Sie vermutlich Informationen an, die „nur“ gelesen werden sollen. Vielleicht haben Sie für Ihre Texte schon viel getan, um diese zugänglich zu machen.

Auch  Formularen sollten Sie die gleiche Aufmerksamkeit widmen. Formulare sind schließlich eine Möglichkeit, mit Ihren Besuchern in Kontakt zu treten. Worauf Sie bei der Erstellung von inklusiven Formularen achten müssen, erfahren Sie in diesem Artikel.

Inclusives Design: Formulare mit HTML und CSS weiterlesen

SVG – einfach, flexibel, schnell und robust!

Jede Webseite sollte SVG (Scalable Vector Graphics) verwenden (haunschild.de tut es zum ersten mal in diesem Artikel, passenderweise in Form des SVG-Logos).

Viele andere Webseiten setzen SVG bereits seit Jahren ein. Die Technik ist robust und sinnvoll.

 

Vorab ein Aktualisierungshinweis

Nachdem ich mich eine Weile mit SVGs beschäftigt habe, würde ich die inline einbinden. Hier einige Links – alle auf CSS-Tricks von Chris Coyier – wie es geht, warum inline-SVGs (meistens) die beste Wahl sind und welche Probleme (samt Lösungen) es damit gibt:

 

 

 

Die Vorteile von SVG

Das SVG-Logo bestehnd aus den Buchstaben "SVG" auf orangem Hintergrund
Das offizielle Logo – das erste Bild im SVG-Format auf haunschild.de
  • skalierbar und damit ideal für responsive Webseiten
  • inklusiv und damit geeignet für zugängliche Webseiten
  • effizient und damit geeignet für performante Webseiten
  • veränderbar mittels CSS und damit wartbar und anpassbar an z.B. ein Redesign, Bildschirmgrößen, Farbschemata usw
  • cachable – also vom Browser wiederverwendbar, ohne wiederkehrende http-Requests und zudem als Satz (Sprite) gruppierbar und als einzelne Datei speicherbar (ein http-Request für viele Icons/Bilder)
  • wiederverwertbar auch vom Entwickler und damit DRY (don#t repeat yourself)
  • einfach in der Anwendung mittels Image-Element (in HTML) oder als Hintergrund-Grafik (in CSS)
  • einfach in der Erstellung mittels entsprechender Tools (z.B. Adobe Illustrator) und zahlreich kostenlos im Web verfügbar.
  • einsteigerfreundlich und daher ohne hohen Lernaufwand verwendbar, aber
  • mächtig, wenn man mit der Zeit das Format und die Syntax lernt
  • Problemlöser für Gestaltungsaufgaben, bei denen CSS-Lösungen sehr umständlich oder unmöglich sind
  • Browserunterstützung nahezu komplett für Basis-Funktionen, Filter und Effekte (can I use-Abfrage )

SVG – einfach, flexibel, schnell und robust! weiterlesen

Kleinigkeiten und so

Manchmal reite ich auf scheinbaren „Kleinigkeiten“ herum, welche die Konzentration stören und den Anwender zum Denken zwingen. „Don’t make me think“ war seit jeher meine Prämisse bei der Entwicklung von Webseiten. Wenn es um inclusive Design geht, ist das sogar noch wichtiger, denn Menschen mit Behinderungen, insbesondere Nutzer von assistiver Technik, haben ohnehin schon mehr zu leisten. Jedes weitere Detail das Aufmerksamkeit erfordert, erschwert die Bedienung von Webseiten zusätzlich. Kleinigkeiten und so weiterlesen

Barrierefreiheit erreichen mit WordPress

Mit WordPress kann man Barrierefreiheit nach WCAG 2.0 erreichen, keine Frage. Längst keine Selbstverständlichkeit. Aber es gibt Zugänglichkeit niemals out-of-the-box.

Wp und ein Theme, das Barrierefreiheit für sich beansprucht, ergeben nicht automatisch eine barrierefreie Website.

Zu viel redaktionelle Fragen bleiben offen: sind Texte korrekt ausgezeichnet, Alternativtexte vorhanden, sind alle verwendeten PlugIns ebenfalls in der Lage die Richtlinien zu erfüllen und werden sie so konfiguriert und bedient, dass das Endergebnis kein Zugänglichkeitsalbtraum wird?

Es gibt also eine Menge zu beachten. Warum? Weil WordPress plus Theme keine Website sind. Das wichtigste fehlt: Inhalte.

Die Web Content Accessibility Guidline behandelt eigentlich nur eine Frage: kommt jeder Mensch an den Content / die Inhalte oder wird er dabei behindert?

Darum: WordPress und ein Theme, das sich zu recht „zugänglich“ nennt, sind lediglich die notwendigen Voraussetzungen für eine barrierefreie Webseite.

Siehe auch „Themes are no Websites

Für Schulungsangebote zum Thema Barrierefreiheit (auch ohne WordPress) besuchen Sie bitte mhis.de – web designed for YOU!

Aus Fehlern lernen

Designer sind kreativ. Diesen Satz wird wohl niemand anzweifeln. Ein bisschen weniger bekannt ist (außerhalb der IT-Szene), dass auch Programmierung ein kreativer Prozess ist.

Für einen Außenstehenden mag Logik oder mathematisches Verständnis, auswendig-gelerntes Theorie-Zeugs die Hauptzutat eines Programms oder einer Web-Anwendung sein.

Wer selber programmiert weiß, dass logisches Verständnis eines Sachverhaltes und die nötigen theoretischen Grundlagen nur die Voraussetzung zu einer Problemlösung sind, die eines kreativen Ansatzes bedarf. Oft beschreitet man einen Lösungsweg zum ersten Mal. Aus Fehlern lernen weiterlesen

CSS: Flex-Box

Flex-Boxen sind der aktuelle Stand der Technik bei der Umsetzung responsiver Layouts. Responsive Designs wiederum sind die einzige zeitgemäßen Designs.

Grund genug also, sich mit der Technik auseinanderzusetzen, zumal der Einstieg nicht kompliziert ist.

Zoe Mickley Gillenwater zeigt im folgenden Video was Flex-Boxen tun und wie sie das Leben der Entwickler vereinfachen. Zumal sich die Notwendigkeit von Fallbacks in naher Zukunft erledigt hat. CSS: Flex-Box weiterlesen

Flexbox Froggy

Flexboxen sind ein CSS-Layout-Konzept, das inzwischen von allen aktuellen Browsern unterstützt wird.

Nur wenn noch (sehr) alte Browser wie der InternetExplorer oder älter in einem Projekt berücksichtigt werden müssen, können Flexboxen nicht ohne Fallback-Lösung verwendet werden. Höchste Zeit also, sich mit dem Thema mal auseinander zu setzen. Am besten mit Spaß am Lernen. Den bietet Flexbox Froggy: Eine schöne Seite um spielerisch den Umgang mit den CSS-Flexboxen zu erlernen.

Jetzt zu Flexbox Froggy

DIN-A4 großes Cover mit blau-rotem Farbverlauf

Homepage erstellen mit HTML5

Die eigene Homepage ist immer noch der beste Platz für eine verlässliche Selbstdarstellung. Was für Netzwerke und Medien auch kommen und gehen, haunschild.de gibt es bereits seit knapp 20 Jahren!

Nur über die eigene Homepage können Sie komplett selbst bestimmen. Wenn Sie wissen möchten, wie Sie sich Ihr eigenes zu Hause im Internet aufbauen, hilft Ihnen mein HTML5-Buch aus dem Herdt Verlag für Bildungsmedien:

HTML5 – Grundlagen der Erstellung von Webseiten

Gedruckt (gut zum Durchlesen): http://www.herdt.de/artikel/HTML5/HTML5/#description

Digital (gut zum nachschlagen): http://herdt-digital.de/product/HTML5