Icons & Illustration

Bilder & Slideshow Icons & Illustration Diagramme

Es sind aussagekräftige Symbole und Bilder zu verwenden.

BITV 2.0

Icons & Illustration Diagramme

Die Software sollte es den Benutzern ermöglichen, zu wählen, ob nur die Bildschirmsymbole, die Bildschirmsymbole mit der Textbeschriftung oder nur die Textbeschriftung der Bildschirmsymbole angezeigt werden sollen.

ISO 9241-171

Icons & Illustration Diagramme

Um die Leserlichkeit von Grafiken zu verbessern, sollte die Software den Benutzern ermöglichen, die für die Darstellung des Inhaltes dienenden Attribute zu verändern, ohne jedoch deren Bedeutung zu ändern

ISO 9241-171

Bilder & Slideshow Animation Icons & Illustration Fehlermeldungen, Hilfe & Hinweise Diagramme

Textalternativen in elektronischen Dokumentationen und Hilfen bereitstellen: Informationen, die durch die Software in Form von Bildern und Graphiken dargestellt werden, müssen auch als beschreibender Text zur Verfügung gestellt werden, der sich für Screenreader, zum Ausdrucken oder zur Umwandlung in Brailleschrift eignet, damit er mithilfe eines alternativen Verfahrens gelesen werden kann

ISO 9241-171

Icons & Illustration Buttons & Links Schhnittstellen-Elemente allgemein Allgemeines

Gesten: Geben Sie allen Bedienelementen und interaktiven Elementen ein Trefferziel, das mindestens 44pt x 44pt misst. Personen mit eingeschränkter Mobilität benötigen größere Trefferziele, damit sie mit Ihrer App interagieren können. Zu kleine Steuerelemente können für alle Benutzer frustrierend schwer zu treffen sein.

Apple Inc.

Ästhetik & Sinnliches Icons & Illustration

Logos und dekorative Elemente - Dekorative Elemente (wie Logos oder Illustrationen) erfüllen vielleicht nicht die Kontrastverhältnisse, aber wenn sie eine wichtige Funktion erfüllen (wie die Verlinkung zu einer Website), hilft es, sie unterscheidbar zu machen.

Google

Icons & Illustration Buttons & Links Schhnittstellen-Elemente allgemein

Berührungsziele sind die Teile des Bildschirms, die auf Benutzereingaben reagieren. Sie gehen über die visuellen Grenzen eines Elements hinaus. So kann ein Symbol beispielsweise 24 x 24 dp groß erscheinen, aber die es umgebende Polsterung umfasst die vollen 48 x 48 dp des Berührungsziels.

Google

Icons & Illustration

Elemente mit Zustandsänderungen - Bei Symbolen, die zwischen Werten oder Zuständen umschalten, kündigen Sie das Symbol entsprechend der Darstellung für den Benutzer an.

Google

Icons & Illustration Buttons & Links Schhnittstellen-Elemente allgemein
Hier ist zu sehen wie Buttons und Icons in der korrekten Zeigerzielgröße aussehen sollte. Ein Praxisbeispiel aus dem material.io Guide von Google.

Zeiger-Ziele sind ähnlich wie Berührungsziele, gelten aber für die Verwendung von bewegungserfassenden Zeigegeräten. Zeigerziele haben eine Größe von mindestens 44 x 44 dp. Avatar: 40dp; Icon: 24dp

Google

Responsive & Gestaltungsraster Schrift & Text Icons & Illustration

Vergrößern Sie die Größe der aussagekräftigen Icons mit zunehmender Schriftgröße. Stellen Sie sicher, dass die Icons auch bei größeren Schriftgrößen gut zu sehen sind.

Apple Inc.

Farbe & Kontrast Icons & Illustration
in der linken Bildhälfte sieht man ein Icon mit korrekten Kontrastverhältnis. In der linken Bildhälfte sieht man das gleiche Icon mit falschen Kontrastverhältnis.

Links-Korrekt: Diese Symbole folgen den Empfehlungen für das Farbkontrastverhältnis und sind vor ihrem Hintergrund lesbar.

Rechts-Falsch: Diese Symbole folgen nicht den Empfehlungen für das Farbkontrastverhältnis und sind vor ihrem Hintergrund möglicherweise schwer zu erkennen.

Google

Farbe & Kontrast Icons & Illustration
Das bild zeigt links ein Logo mit den korrekten Farben. Rechts sieht man das Logo mit veränderten Farben damit es dem Kontrastverhältnis entspricht. Was nicht empfohlen wird.

Links-Korrekt: Dekorative Logos, die unterscheidbar sind, entsprechen möglicherweise nicht den Kontrastverhältnissen.

Rechts-Falsch: Verzerren Sie Ihr Logo nicht, um die Kontrastverhältnisse einzuhalten.

Dekorative Elemente (wie Logos oder Illustrationen) entsprechen möglicherweise nicht den Kontrastverhältnissen, aber wenn sie eine wichtige Funktion erfüllen, hilft es, sie unterscheidbar zu machen.

Google

Navigation Leichte Sprache Icons & Illustration Buttons & Links
Links im Bild sieht man ein Hamburger Icon mit korrekter Beschreibung was für eine Aktion erfolgen wird. Rechts sieht man ein Hamburger Icon welches nicht die Aktion die verfolgen wird beschreibt

Aktionsverben geben an, was ein Element oder Link tut, wenn es angetippt wird, und nicht, wie ein Element aussieht. Dies beschreibt, was ein Element tut, ohne sich auf die Sehschärfe zu verlassen.

Links-Korrekt: Der Zugänglichkeitstext für ein Navigationsmenü könnte "Navigationsmenü anzeigen" und "Navigationsmenü ausblenden" (bevorzugt) oder "Hauptmenü anzeigen" und "Hauptmenü ausblenden"lauten.

Rechts-Falsch: Ziehen Sie in Betracht, Texte zur Barrierefreiheit zu überarbeiten, die nicht angeben, welche Aktion erfolgen wird.

Google

Icons & Illustration
Links im Bild ist das Icon mit der richtigen Benutzeraufgabe beschrieben. Rechts im Bild wurde das Icon falsch benannt, was Nutzer in die Irre führen könnte.

Barrierefreie Software wird die korrekte Interaktion für den Benutzer beschreiben.

Links-Korrekt: Der Befehl "Sprachsuche" beschreibt die Benutzeraufgabe (Suche) gepaart mit der Eingabemethode (Sprache).

Rechts-Falsch: Erwägen Sie die Überarbeitung von Befehlen, die nicht vollständig ausdrücken, wie ein Steuerelement zu aktivieren ist. Dieser Sprachbefehl sagt "tippen", obwohl er durch Drücken einer Tastatur, eines Schalters oder einer Braillezeile ausgewählt werden könnte.

Google

Leichte Sprache Icons & Illustration
Links im Bild wurde die Aktion welches das Icon auslöst korrekt vergeben. Rechts im Bild ist das Icon mit falscher Beschriftung zu sehen.

Links-Korrekt: Die laut vorgelesene Beschreibung gibt die durch das Symbol dargestellte Aktion an.

Rechts-Falsch: Eine Beschreibung, wie das Symbol aussieht, erklärt möglicherweise nicht, was die Aktion bewirkt.

Google

Icons & Illustration Überschriften & Label
In dem Bild sind Icons zu sehen in einem UI. Sie tragen keinen Namen, sind jedoch versteckt gelabert, damit Screenreader die Funktion auslesen können.

Damit die Benutzer von Bildschirmleseprogrammen wissen, welche UI-Elemente angetippt werden können, ermöglichen Sie es Bildschirmleseprogrammen, die Namen von Komponenten laut vorzulesen. Das contentDescription-Attribut kann Komponenten (wie Schaltflächen, Icons und Registerkarten) hinzugefügt werden, die Icons ohne sichtbaren Text enthalten.

Links: 1. Beschriften Sie das Suchsymbol; 2. Beschriften Sie das Mikrofonsymbol

Rechts: 1. Beschriften Sie das Bearbeitungssymbol; 2. Beschriften Sie das Chat-Symbol

Google

Icons & Illustration Schhnittstellen-Elemente allgemein
Ein Apple UI welches eine Standard Geste (nach links Wischen zum entfernen) zeigt.

Es wird erwartet, dass Systemgesten unabhängig von der verwendeten Anwendung funktionieren.

Apple Inc.

* Die angegebenen Preise sind Endpreise. Aufgrund der Kleinunternehmerregelung gemäß § 19 UStG erfolgt kein Ausweis von Umsatzsteuer.