Webseiten leichter verständlich machen

Eine Website ohne Bildschirm klingt nicht richtig, oder? Wie ein Buch ohne Seiten oder ein Auto ohne Lenkrad. Doch es gibt Hörbücher, freihändige Fahrzeuge. Und zunehmend werden Websites genutzt, ohne dass sie überhaupt angesehen werden – zumindest von Menschen.

Telefonassistenten und Heimlautsprecher sind ein wachsender Teil des Internet-Ökosystems. In dem Artikel werde ich versuchen aufzuschlüsseln, was das für zukünftige Websites bedeutet, was Designer dagegen tun können und warum dies endlich ein Sprung nach vorne in Richtung Barrierefreiheit sein könnte. Immerhin sind mehr als zwei Drittel des Internets für Sehbehinderte nicht zugänglich. Es ist an der Zeit, Websites leicht zugänglich zu machen.

Invasion der Heimlautsprecher

Der weltweite Umsatz mit intelligenten Lautsprechern lag 2019 bei über 147 Millionen, und Pandemie oder keine Pandemie, der Trend geht nach oben. Reden ist schließlich schneller als Tippen. Von Google Home über Alexa bis hin zu Smartphone-Assistenten, Autos und sogar Kühlschränken verwenden immer mehr Menschen Programme, um in ihrem Namen im Internet zu suchen.

Abgesehen von den eher ominösen Big Brother Inc.-Untertönen dieses Trends kann man mit Sicherheit sagen, dass Hunderte Millionen Menschen bereits jeden Tag das Internet erkunden, ohne es tatsächlich anzusehen. Bildschirme sind für das Surfen im Internet nicht mehr unbedingt erforderlich, und Websites sollten sich an diese neue Realität anpassen. Diejenigen, die das nicht tun, schneiden sich von Hunderten Millionen Menschen ab.

Entwickler, Designer und Autoren sollten gleichermaßen auf die Möglichkeit vorbereitet sein, dass ihre Arbeit überhaupt nicht gesehen oder angeklickt wird – sie wird gehört und angesprochen.

„

Unsichtbarkeit gestalten

Das Thema Website-Geschwätzigkeit hat zwei Hauptaspekte – Technik und Sprache. Beginnen wir mit der Technik, die den ganzen Weg von der grundlegenden Inhaltsstruktur bis zum semantischen Markup und darüber hinaus durchläuft. Ich bin genauso scharf auf gutes Schreiben wie jeder andere, aber das ist nicht der richtige Ort, um anzufangen. Sie könnten eine Website-Kopie haben, die einer Aufführung von Daniel Day-Lewis würdig wäre, aber wenn sie nicht richtig arrangiert und ausgezeichnet ist, wird sie für niemanden viel wert sein.

Uralte Fundamente

Die Idee, dass Websites verstanden werden, ohne gesehen zu werden, ist nicht neu. Screenreader gibt es seit Jahrzehnten, wobei zwei Drittel der Benutzer Sprache als Ausgabe wählen und das letzte Drittel Braille wählt.

Der Fokus dieses Artikels geht noch weiter, aber die Screenreader-freundliche Gestaltung von Websites bietet eine felsenfeste Grundlage für die ausgefalleneren Dinge unten. Ich werde mich nicht zu lange damit aufhalten, da andere ausführlich zu diesem Thema geschrieben haben (Links unten), aber unten sind Dinge, an die Sie immer denken sollten:

• Klare Navigation auf der Seite und über die Website.
• Richten Sie die DOM-Struktur am visuellen Design aus.
• Alt-Text, nicht länger als 16 Wörter oder so, wenn ein Bild keinen Alt-Text benötigt (wenn es zum Beispiel ein Hintergrund ist), haben Sie leeren Alt-Text, nicht keinen Alt-Text.
• Beschreibende Hyperlinks.
• 'Zu Inhaltslinks springen'.

Visuelles Denken macht uns tatsächlich blind für viele Designfehler. Nutzer können die Teile selbst zusammensetzen und tun dies oft auch, aber das bringt maschinenlesbaren Websites nicht viel. Um Websites leicht zugänglich zu machen, müssen Sie zunächst Text-to-Speech (TTS)-freundlich gestalten. Das ist eine gute Praxis und verbessert die Zugänglichkeit massiv. Gewinnen, gewinnen.

Weiterführende Literatur zu TTS-Design und Zugänglichkeit

• Text-to-Speech von W3C
• Front End North Teil 2: Leonie Watson hat mich umgehauen
• Text-zu-Sprache mit AWS (Teil 1)
• Text-to-Speech und wieder zurück mit AWS (Teil 2)
• Hinweise zur Client-gerenderten Barrierefreiheit
• Kennzeichnungskontrollen des W3C
• Verwendung des Attributs aria-label von Mozilla
• Ich habe das Internet einen Tag lang mit einem Screenreader benutzt
• Von den Experten: Globale Entwicklungen der digitalen Zugänglichkeit während COVID-19

Ausgefallenere Sachen

Das Design für Screenreader und Barrierefreiheit ist nicht nur ein starkes Fundament, sondern auch um seiner selbst willen gut. Grund genug, es zuerst zu erwähnen. Es sorgt jedoch nicht ganz für den Aufwärtstrend des „freihändigen“ Surfens, über den ich zu Beginn dieses Artikels gesprochen habe. Sprachbenutzerschnittstellen oder VUIs. Dafür müssen wir uns mit semantischem Markup befassen.

Websites leicht zugänglich zu machen bedeutet, Inhalte auf einer viel granulareren Ebene zu kennzeichnen. Wenn Leute ihren Heimassistenten nach den neuesten Nachrichten oder einem Rezept fragen oder ob das Restaurant am Dienstagabend geöffnet hat, wollen sie nicht mit ihrer Stimme auf einer Website navigieren. Sie wollen die Informationen. Jetzt. Dazu müssen Informationen auf Websites eindeutig gekennzeichnet sein.

Ich bin dieses Jahr eher durch das Semantic-Web-Kaninchenloch gestolpert, und ich habe nicht die Absicht, mich hier zu wiederholen. Das Web kann und sollte danach streben, maschinenlesbar zu sein, und dazu gehört auch Geschwätzigkeit.

Dafür existiert bereits semantisches Markup. Eine heißt „speakable“, eine Schema.org-Eigenschaft, die sich derzeit in der Beta-Phase befindet und die Teile einer Webseite hervorhebt, die „besonders geeignet für die Text-zu-Sprache-Konvertierung“ sind.

Zum Beispiel rezensiere ich als Hobby mit zwei Freunden jede Woche ein Album. Wir haben kürzlich die Website mit integriertem semantischem Markup neu gestaltet. Unten sehen Sie einen Teil der strukturierten Daten einer Seite, die Speakable in Aktion zeigen:

 { "@context": "https://schema.org", "@type": "Review", "reviewBody": "It's breathless, explosive music, the kind of stuff that compels listeners to pick up an instrument or start a band. Origin of Symmetry listens like a spectacular jam — with all the unpolished, patchy, brazen energy that entails — and all in all it's pretty rad, man.", "datePublished": "2015-05-23", "author": [ { "@type": "Person", "name": "Andre Dack" }, { "@type": "Person", "name": "Frederick O'Brien" }, { "@type": "Person", "name": "Andrew Bridge" } ], "itemReviewed": { "@type": "MusicAlbum", "name": "Origin of Symmetry", "@id": "https://musicbrainz.org/release-group/ef03fe86-b54c-3667-8768-029833e7e1cd", "image": "https://alpha.audioxide.com/api/images/album-artwork/origin-of-symmetry-muse-medium-square.jpg", "albumReleaseType": "https://schema.org/AlbumRelease", "byArtist": { "@type": "MusicGroup", "name": "Muse", "@id": "https://musicbrainz.org/artist/9c9f1380-2516-4fc9-a3e6-f9f61941d090" } }, "reviewRating": { "@type": "Rating", "ratingValue": 26, "worstRating": 0, "bestRating": 30 }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".review-header__album", ".review-header__artist", ".review-sidebar__summary" ] } }

Wenn also jemand seinen Heimlautsprecher-Assistenten fragt, was Audioxide von Origin of Symmetry von Muse hält, sollte Speakable ihn zum Albumnamen, dem Künstler und der mundgerechten Zusammenfassung der Rezension weiterleiten. Bequem und auf den Punkt. (Und erspart den Leuten die Tortur, sich unsere vollständigen Zusammenfassungen anzuhören.) Nichts ist da, was vorher nicht da war; es ist nur richtig beschriftet. Sie werden auch feststellen, dass die Auswahl einer CSS-Klasse ausreicht. Leicht.

Diese Art von Funktionalität eignet sich besser für bestimmte Arten von Websites als für andere, aber die Möglichkeiten sind riesig. Rezepte, Nachrichten, Ticketverfügbarkeit, Kontaktinformationen, Lebensmitteleinkäufe … all diese Dinge und mehr können besser gemacht werden, wenn wir uns nur angewöhnen, Websites leichter zugänglich zu machen, jede Seite vollgepackt mit klar strukturierten und beschrifteten Informationen Anfragen zu beantworten, wenn sie kommen.

Darüber hinaus arbeiten die großen Köpfe an Orten wie Google und Mozilla hart an dedizierten Web-Sprach-APIs, die anspruchsvollere Benutzerinteraktionen mit Dingen wie Formularen und Steuerelementen ermöglichen. Technologie wie diese steckt noch in den Kinderschuhen, aber man sollte sie unbedingt im Auge behalten.

Der Aufstieg von Heimlautsprechern bedeutet, dass alte und neue Welten aufeinanderprallen. Für das eine zu sorgen, sorgt für das andere. Vergessen wir nicht, dass Websites seit Jahrzehnten für Screenreader entwickelt wurden.

Weiterführende Lektüre

• Sprechende Web-Apps – Einführung in die Sprachsynthese-API
• Web-Sprachkonzepte und -nutzung durch Mozilla
• Was sind Sprachbenutzeroberflächen? Von der Interaction Design Foundation

Schreiben zum Sprechen

Sie haben Schritte unternommen, um Ihre Website für Screenreader, Suchmaschinen und all das gute Zeug besser verständlich zu machen. Glückwünsche. Jetzt kommen wir zu den unschärferen Themen Ton und Persönlichkeit.

Das Design einer Website zum Sprechen unterscheidet sich vom Design zum Lesen. Die Art der Benutzerinteraktionen ist unterschiedlich. Ein wichtiger Punkt, den Sie im Auge behalten sollten, ist, dass Websites bei Sprachabfragen fast immer reagieren – Fragen beantworten, Rezepte geben, Bestellungen bestätigen.

Eine Open NYT-Studie ergab, dass für Haushaltsbenutzer „die Interaktion mit ihren intelligenten Lautsprechern manchmal zu frustrierenden oder sogar lustigen Austauschen führt, aber das fühlt sich nach einer besseren Erfahrung an, als an ein Telefon gebunden zu sein, das Benachrichtigungen ausgibt“.

Mit anderen Worten, Sie können und sollten das Problem nicht erzwingen. Das Look-at-me-Ethos von Pop-ups und Anzeigen und endlosem Engagement hat hier keinen Platz. Ihre Aufgabe ist es, eine gute Seite zu haben, die auf Befehl so klar und prägnant wie möglich Informationen gibt. Ein virtueller Butler, wenn man so will.

Das bedeutet sprachlich:

• Prägnante Sätze,
• Einfache, einfache Sprache,
• Von vorn geladene Informationen (denken Sie an die umgekehrte Pyramide),
• Antworten als ganze Sätze formulieren.

Sagen Sie, was Sie schreiben, laut, lassen Sie es sich von kostenlosen Text-to-Speech-Systemen wie TTSReacher sagen. Wörter können laut ausgesprochen anders klingen als niedergeschrieben und umgekehrt. Ich habe meine Vorbehalte gegenüber Lesbarkeitsalgorithmen, aber sie sind nützliche Werkzeuge, um die Klarheit zu messen.

Weiterführende Lektüre

• „Lesbarkeitstest für Sprachinhalte“ auf A List Apart
• Die Elemente des Stils von William Strunk Jr.

HAL, ohne die schlechten Bits

Das Gespräch mit Websites ist Teil einer breiteren Verlagerung hin zu kanalunabhängigen Weberlebnissen. Die Natur von Websites ändert sich. Von Desktop zu Mobile und von Mobile zu Smart-Home-Systemen werden sie immer flüssiger. Wir alle kennen die „Mobile-First“-Indizierung. Wie lange dauert es, bis es „Voice-First“ ist?

Sich von starren Zwängen zu lösen, ist entmutigend, aber auch befreiend. Wir sehen uns Websites an, wir hören ihnen zu, wir sprechen mit ihnen. Jeder ist wie ein kleiner HAL, mit so viel oder wenig Persönlichkeit und/oder mörderischer Absicht, wie wir es für richtig halten, ihn hineinzugestalten.

Hier sind Schritte, die wir unternehmen können, um die Kommunikation mit Websites zu vereinfachen, unabhängig davon, ob Sie von Grund auf neu erstellen oder alte Projekte aktualisieren:

• Navigieren Sie mit Screenreadern auf Ihrer Website.
• Probieren Sie Sprachabfragen über Telefon-/Haushaltsassistenten aus.
• Verwenden Sie semantische Auszeichnungen.
• Implementieren Sie sprechbares Markup.

Das Entwerfen von Websites für bildschirmlose Situationen verbessert ihre Zugänglichkeit, schärft aber auch ihre Persönlichkeit, ihren Zweck und ihre Nützlichkeit. Wie Preston So für A List Apart schreibt, „ist es eine effektive Methode, um zu analysieren und Stresstests zu unterziehen, wie kanalunabhängig Ihre Inhalte wirklich sind.“

Indem Sie Ihre Websites leicht zugänglich machen, bereiten Sie sie auf das kanalunabhängige Web vor, das schnell Realität wird. Anstelle von Text und Bildern auf einem Bildschirm müssen Websites abstrakt und flexibel sein und bereit sein, mit einer ständig wachsenden Zahl von Geräten zu interagieren.