Barrierefreie Web-Typografie: Design, Anwendung und technische Aspekte
Barrierefreie Web-Typografie: Design, Anwendung und technische Aspekte
Phil Garnham Fonts für Barrierefreiheit
Responsive Webdesign ist erwachsen geworden, und es haben sich neue Arten des Lesens und des Umgangs mit Text entwickelt. In Verbindung mit den jüngsten Entwicklungen bei den responsiven "variablen" Font Technologien, die es ermöglichen, Fonts in unterschiedlichen Breiten, Gewichtungen und Kontrasten anzuzeigen, ist ein Bewusstsein für die barrierefreien Font Attribute heute wichtiger denn je.
Die Wahl einer barrierefreien Schrift kann eine entmutigende Aufgabe sein. Die Fülle an Informationen über barrierefreies Schriftdesign, Anwendungen und Codemethoden ist ziemlich überwältigend. Eines ist klar: Die Lesbarkeit des Inhalts ist wahrscheinlich das Hauptziel für fast alle Webseite. Die hier aufgeführten Punkte sollen als Denkanstoß dienen, wenn Sie eine Schrift für Ihre Marke auswählen.
Schrift Entwurf
Lesbarkeit vs. Lesbarkeit: Bei der Lesbarkeit geht es um die Frage: "Können Sie diesen Buchstaben oder dieses Wort erkennen?" "Können Sie dieses Wort interpretieren und verstehen? Bei der Lesbarkeit geht es um die Frage: "Wie wohl fühlen Sie sich beim Lesen? Barrierefreies Design ist sowohl lesbar als auch lesbar.
Serif vs. Sans: Unsere Forschung in Zusammenarbeit mit Mencap ergaben, dass die serifenlose Schrift Fonts als die am besten zugängliche Schriftart angesehen wird. Der Detaillierungsgrad von Buchstaben mit Serifen wurde von Menschen mit Leseschwäche als zu komplex empfunden. Sans Fonts haben eine vereinfachte Struktur; ihre Formen fühlen sich näher an unserer gelernten Handschrift an und wurden daher als besser lesbar erachtet. Im Browser werden monolineare Sans-Buchstaben bei kleineren Pixelgrößen sauberer dargestellt, insbesondere in den rauesten Rendering-Umgebungen.
Buchstabenformen: Die Wahl einer Schrift mit guter Buchstabenerkennung erleichtert die Lesbarkeit. Menschen mit Sehbehinderungen können bestimmte Buchstaben als verwirrend empfinden, daher ist es wichtig, dass potenziell verwirrende Buchstabenformen klar definiert sind. Häufige Übeltäter sind das 'I' (Auge), 'i' (Unterauge), 'l' (el) und '1'. Ein geschlossenes 'C' kann bei kleinen Pixelgrößen wie ein 'O' aussehen. Offene Zählerformen erleichtern das Lesen. Die Kombination von 'r' und 'n' kann wie ein 'm' gelesen werden. Lange Ober- und Unterlängen sind ebenfalls wichtig. Sie Hilfe bei der Definition von äußeren Wortformen, die das Auge schnell erfassen und interpretieren kann.
Font Proportionen: Eine große x-Höhe und moderate bis breite Proportionen sind am besten zugänglich. Die x-Höhe von Schrift ist wichtig, weil sie oft einen größeren Weißraum innerhalb eines Buchstabens suggeriert und so die Definition und Klarheit fördert. Oft werden kondensierte und komprimierte Breitenstile als flüssigeres und reaktionsschnelleres Layout angepriesen. Es ist wichtig, sich darüber im Klaren zu sein, dass die Verwendung eines komprimierten Font bei begrenztem Platz (mobil) auch die Zugänglichkeit einschränken kann. Ausgiebiges Testen der im Kontext verwendeten Fonts ist entscheidend.
Andeutung: Hinweise sind eine hinzugefügt am Datenebene innerhalb von Font , die beschreiben, wie stark ein Pixel ein- oder ausgeschaltet werden sollte, um die Qualität eines Buchstabens bei einer bestimmten Pixelgröße zu verbessern. Trotz Verbesserungen bei der Bildschirmauflösung ist Font Hinting immer noch ein wesentlicher Prozess bei der Schriftgestaltung. Die meisten Foundrys automatisieren das Hinting und erzielen damit sehr gute Ergebnisse, aber man sollte die Erwartungen nicht zu hoch schrauben. Keine noch so große Menge an Hinting wird eine schwergewichtige Font in 12px Größe gut aussehen lassen.
Typische Anwendung
Gewicht: Erstellen Sie eine Hierarchie, indem Sie jedem Font eine Rolle zuweisen. Eine Hierarchie ermöglicht es dem Auge, Informationen in eine klare Erfahrung aufzuschlüsseln. Verwenden Sie offene, mittelgroße Schriftschnitte für die Unterüberschriften und den Hauptteil. Richten Sie einen Test ein, um verschiedene Browser und Umgebungen zu testen, oder verwenden Sie Browser-Stapel für einen Überblick. Die Gewichtung kann sich von einer Umgebung zur anderen dramatisch ändern: Ändern Nächste . Falls gewünscht, implementieren Sie Schrift-Rendering-Mix um das Erscheinungsbild auszugleichen.
Größe: Die Größe ist wichtig. Beachten Sie, dass jede Font in einem anderen Maßstab auf dem Schriftkörper sitzt und dass die tatsächlichen Größen zwischen Fonts stark variieren können. 14px in einer Font kann 18px in einer anderen entsprechen. Die durchschnittliche Größe für Körper reicht von 14px - 16px. Als allgemeine Regel gilt 16px plus als die umfassendste. Font-Größe kann sich auch auf die Rendering-Qualität auswirken. Finden Sie die Sweetspots, die die besten Rendering-Ergebnisse für Ihre primären Plattformen liefern.
Zeilenhöhe: Geben Sie der Schrift Raum zum Atmen. Das Auge muss mühelos von einer Zeile zur nächsten springen können: Nächste . Die Richtlinien für barrierefreie Webinhalte empfehlen einen Wert von 1,5 für den Textkörper. Überprüfen Sie den Wert und verringern oder erhöhen Sie ihn nach Bedarf.
Zeilenlänge: Das Scannen langer Textzeilen ist eine Herausforderung für Ihre Augen. Untersuchungen zeigen, dass die durchschnittliche Online-Zeilenlänge etwa 70-80 Zeichen beträgt. Begrenzen Sie die Zeilenlänge auf maximal 16 Wörter.
Schriftausrichtung: Zentrierter Text ist kein zugänglicher Text. Durch das Zentrieren entstehen unterschiedliche Ausgangspositionen. Dies schafft Probleme für Sehbehinderte.
ALL CAPS: Verwenden Sie niemals "ALL-CAPS" im Fließtext. Verwenden Sie Kapitälchen, wenn eine kurze Großschreibung erforderlich ist. Sie eignen sich hervorragend zur Hervorhebung, für Abkürzungen und Zwischenüberschriften.
Ligaturen: Berücksichtigen Sie die Gestaltung von Ligaturen - fi, fl usw... Diese kombinierten Buchstaben können Harmonie schaffen, aber auch für Menschen mit Leseschwäche verwirrend sein.
Farbe: Wie alle visuellen Elemente muss auch die Schrift einen ausreichenden Kontrast aufweisen. Graue Schrift auf weißem Grund kann schwer lesbar sein, wenn die Grautöne und Font zu leicht sind. Unsere FS Untitled® verfügt über fein abgestufte Gewichte, um Hilfe Nutzern ein ausgewogenes Erscheinungsbild zu bieten. Weiße Schrift auf dunklem Hintergrund "leuchtet" auf dem Bildschirm, sie erscheint enger und einige Fonts erfordern daher möglicherweise eine Anpassung des Buchstabenabstands.
Technischer Typ
Font Ladestrategien: Langsame Verbindungen (mobil) und große Font Dateien führen zu langsamen Ladezeiten für den Text. Eine einzelne WOFF-Datei mit einem vollständigen europäischen Zeichensatz ist 30KB - 50KB groß. Der Zustand von FOUT (Flash of Unstyled Text) oder FOIT (Flash of Invisible Text) muss berücksichtigt werden. FOIT ist die vorherrschende Browser-Standardeinstellung und aus ästhetischer Sicht ist FOIT wünschenswert, aber aus Sicht der Zugänglichkeit ist FOUT sicherlich der richtige Weg. Etwas Inhalt zu sehen ist besser als gar kein Inhalt. Ziel ist es, Text in einem Fallback zu zeigen, bis alle Seiten von Fonts geladen sind. Implementieren Sie mit Webfont-Loader und setzen Sie ein Cookie, da dies den FOUT minimiert, wenn der Betrachter sich weiter in die Website hineinbewegt. Alternativ können Sie den neuen CSS-Deskriptor Font-display setzen, der die Konfiguration des Ladens von Font über CSS ermöglicht. Mehr Informationen dazu hier.
Fallback Fonts: Die Auswahl ist vor allem auf dem Handy begrenzt. Jordan Moore's Fallback-Kompatibilitätstabelle für Mobiltelefone veranschaulicht das Problem. Achten Sie bei der Auswahl eines Fallbacks auf ähnliche Gewichte und Proportionen. Passen Sie die Fallback-Metriken an die von Ihnen gewählte Font Größe an. Legen Sie Ihre Entscheidung fest, indem Sie die von Ihnen gewählte barrierefreie Font über die Ausweichlösung legen und deren Angemessenheit beurteilen.
text-rendering: Use optimiseLegibility to enable kerning and improve rendering quality. This setting also enables ligatures, so review the design of the ligatures and their shape complexity. If necessary disable them by setting: .classname { font-feature-settings: “liga” 0; }
Schutz von Fonts: Die Entwicklung einer hochwertigen Schrift erfordert jahrelange Bemühungen und Investitionen. In Anbetracht der wichtigen Rolle, die der Typ in allen Webprojekten spielt, ist es nur fair, dass Sie Maßnahmen ergreifen, um die Investition in sie zu schützen. Verwenden Sie CORS für die Bereitstellung von Fonts, um sicherzustellen, dass nur zugelassene Websites Zugriff auf die Dateien haben.
Bei Fontsmith wollen wir Schrift so zugänglich wie möglich machen. Unser zugängliches Font FS Me® ist mit einem Pro-Set erhältlich, das über 150 Sprachen abdeckt. Wir haben mit Beschilderungs- und Umweltgruppen zusammengearbeitet, um eine Wegweiserschrift des 21. Jahrhunderts zu entwickeln Schrift FS Millbank®zu entwickeln, der die Navigation in belebten Umgebungen erleichtern soll.
Eine frühere Version dieses Artikels erschien zuerst im Net Magazine.
Variable Webdateien Font stehen vor der Tür, und die Flexibilität einer inzwischen standardisierten Font -Familie wird bald weit geöffnet sein. Sowohl Designer als auch Entwickler werden in der Lage sein, das Gewicht und die Breite der Schriften , die auf einer Website und in bestimmten Umgebungen verwendet werden, anzupassen. Lassen Sie uns mit den Grundprinzipien der barrierefreien Online-Typografie ein besser lesbares Web schaffen.