Wenn wir über das Design von Websites sprechen, geht es in der Regel darum, wie uns diese Websites visuell erscheinen – wie Farben und Typografie zusammenwirken, wie Seitenelemente platziert und beabstandet sind und ob Navigationslinks an den richtigen Stellen platziert sind. Allerdings interagiert nicht jeder auf diese Weise mit Websites, daher müssen wir auch nicht-visuelle Aspekte des Designs berücksichtigen.
In der Schweiz sind etwa 1.6 Millionen Menschen gesundheitlich beeinträchtigt, teilweise etwa blind oder taub. Viele sind auf alternative Methoden angewiesen, um eine Tätigkeit auszuüben, die Menschen mit normalem Sehvermögen mit ihren Augen ausführen würden. Viele dieser Menschen sind auf unterstützende Technologien wie Bildschirmleser angewiesen, um Websites und andere digitale Inhalte zu erleben. Als Designer, Entwickler und/oder Website-Besitzer liegt es an Ihnen, Ihre Website für diesen Teil Ihrer Zielgruppe zugänglich zu machen.
Was ist ein Bildschirmlesegerät?
Ein Bildschirmlesegerät ist eine Computersoftware, die digitalen Text in eine hörbare und/oder taktile Form umwandelt. Bildschirmlesegeräte ermöglichen es Benutzern, mit ihren Geräten auf nicht-visuelle Weise zu interagieren, und werden hauptsächlich von blinden oder sehbehinderten Menschen sowie von Menschen mit kognitiven Einschränkungen verwendet, die sie daran hindern, Text und Medien auf dem Bildschirm zu betrachten. Viele Bildschirmlesegeräte verfügen über zusätzliche Funktionen, die den Benutzern bei der Navigation durch Webseiten, Computeranwendungen und Betriebssystemoberflächen helfen.
Bildschirmlesegeräte sind eine wichtige und beliebte Hilfsmitteltechnologie. Sie ermöglichen die unabhängige Nutzung digitaler Geräte durch Personen, die sonst nicht in der Lage wären, oder die mit erheblichen Schwierigkeiten konfrontiert wären.
Obwohl sie am häufigsten von blinden oder sehbehinderten Menschen genutzt werden, helfen Bildschirmleser auch denjenigen, die:
- kognitive Schwierigkeiten oder Lernbehinderungen wie Legasthenie haben.
- Schwierigkeiten beim Lesen von Schrift haben.
- eine Sprache lernen.
- es vorziehen, Inhalte auditiv zu konsumieren, anstatt zu lesen.
Manche verwenden auch Bildschirmlesegeräte neben ihrer eingeschränkten Sehkraft. Zum Beispiel kann man die Bilder und Medien auf einer Webseite visuell konsumieren, während man sich für textbasierte Inhalte auf einen Screenreader verlässt.
Wie funktionieren Bildschirmleser?
Ein Bildschirmlesegerät ist eine Softwareanwendung, die auf einem Gerät installiert wird (oder in einigen Fällen als Browsererweiterung) und mit anderen Anwendungen auf diesem Gerät verwendet wird. Es gibt eine Vielzahl von kostenlosen und kostenpflichtigen Screenreadern für Windows, macOS, Linux, iOS und Android.
Ein Benutzer steuert sein Bildschirmlesegerät über die Tastatur. Ein Bildschirmlesegerät wird mit einer Bibliothek von Tastaturbefehlen geliefert, die das Bildschirmlesegerät anweisen, Dinge zu tun wie das Lesen zu starten/stoppen, zurückzuspringen, um einen Textabschnitt erneut zu lesen, Wörter zu buchstabieren, zu verschiedenen Teilen einer Seite zu springen, den Cursor/Fokus zu bewegen, eine Mediendatei abzuspielen oder einen Link, eine Schaltfläche oder ein anderes interaktives Element anzuklicken.
Bildschirmlesegeräte können Textinformationen in zwei Formen übersetzen: Sprache und Braille. Am häufigsten verwenden Bildschirmlesegeräte die Text-to-Speech-Technologie (TTS), um Textinhalte mit einer synthetischen menschlichen Stimme vorzulesen. Geübte Benutzer von TTS-Bildschirmlesegeräten erhöhen die Lesegeschwindigkeit oft weit über das hinaus, was die durchschnittliche Person visuell lesen kann.
Zusätzlich zu TTS können einige Bildschirmlesegeräte Bildschirmtext in Blindenschrift umwandeln. Für diese Funktion schließen die Benutzer ein externes Gerät an, eine so genannte aktualisierbare Braillezeile, die Braillezeichen auf einem Pad erzeugt, während das Bildschirmlesegerät den Text abtastet.
Einige Benutzer bevorzugen es auch, TTS und eine aktualisierbare Braillezeile zusammen zu verwenden.
Bildschirmlesegeräte gibt es auch für mobile Geräte. Da die meisten Smartphones und Tablets keine physischen Tastaturen haben, verlassen sich Bildschirmleser für diese Geräte auf Touchscreen-Interaktionen – Wischen, Tippen und Tippen-und-Halten – um die Wiedergabe zu steuern und durch den Seiteninhalt zu navigieren.
Wie Sie Ihre Website für Bildschirmleser gestalten
Angesichts der heutigen Popularität und Bedeutung von Bildschirmlesegeräten müssen Website-Besitzer und -Entwickler die Barrierefreiheit von Bildschirmlesegeräten bei der Erstellung und Pflege ihrer Online-Eigenschaften berücksichtigen. Dadurch wird sichergestellt, dass alle Besucher Zugang zu den gleichen Inhalten und ein optimales Erlebnis haben.
Bildschirmleser übersetzen Webseiten, indem sie HTML-Dateien direkt lesen, daher sollte alles, was der Leser benötigt, in dieser Datei enthalten sein. Hier finden Sie einige grundlegende Schritte, die Sie unternehmen können, um Screenreadern die Verarbeitung Ihrer Seiten zu erleichtern und Ihre Website für Benutzer von Screenreadern leicht navigierbar zu machen. Um das meiste aus diesem Abschnitt herauszuholen, empfehlen wir Ihnen, Ihre HTML-Kenntnisse aufzufrischen, falls dies erforderlich ist.
Strukturieren Sie Ihr HTML mit den entsprechenden Tags.
Bildschirmlesegeräte verwenden HTML-Tags, um den Inhalt und die Bereiche der Seite zu verstehen und zu erkennen, welche Elemente für den Benutzer zur Auswahl stehen. Aus diesem Grund ist der effektivste Weg, Ihre Webseiten zugänglich zu machen, Ihren HTML-Code mit semantisch reichhaltigen Tags zu strukturieren.
Wenn wir sagen, dass ein Tag “semantisch reichhaltig” ist, meinen wir, dass der Name des Tags selbst dem Bildschirmleser seinen Zweck vermittelt. Tags wie <p>, <img>, <h2>, <ul>, <ol> und <table> sind alle semantisch reichhaltig, weil aus dem Tag-Namen selbst klar hervorgeht, was sie sind – <p> ist ein Absatz, <img> ist ein Bild, und so eins. Auf der anderen Seite sind <span> und <div> Tags generisch und nicht semantisch reichhaltig – sie könnten für jedes Element verwendet werden. Für diese Tags können Sie ARIA-Landmarken verwenden – wir werden diese bald behandeln.
HTML auf diese Weise zu schreiben, ist aus mehreren Gründen wichtig. Erstens ermöglichen Bildschirmlesegeräte den Benutzern, zwischen Tags des gleichen Typs zu springen. Eine häufige Anwendung dafür sind Überschriften, eine wichtige Navigationsmethode für Screenreader-Benutzer. Wenn ein Screenreader z. B. die Verwendung von <h2> erkennt, ermöglicht er dem Benutzer, zwischen H2s zu springen, ähnlich wie sehende Benutzer eine Seite durch das Lesen der Überschriften scannen könnten.
Zweitens aktivieren einige HTML-Elemente, wie z. B. <table>, bestimmte Screenreader-Befehle. Wenn ein Screenreader das <table>-Tag sieht, weiß er, dass er den Benutzer mit seiner Tastatur horizontal und vertikal durch die Tabelle navigieren lassen soll. Aus diesem Grund sollten Sie es vermeiden, Elemente zu erstellen, die wie eine Tabelle, Liste oder Schaltfläche aussehen, aber ein nicht passendes Tag (wie <div>) verwenden. Verwenden Sie stattdessen, wenn möglich, das passende Tag.
Schließlich ist ein <title>-Tag auch für Bildschirmleser nützlich. Benutzer können ihre Bildschirmlesegeräte so einstellen, dass sie den Inhalt dieses Tags lesen, nachdem die Seite geladen wurde, um weiteren Kontext zu liefern.
Geben Sie die Sprache im html-Tag an.
Einem Bildschirmlesegerät muss mitgeteilt werden, in welcher Sprache eine Webseite geschrieben ist, damit es weiß, wie es die Wörter für den Benutzer mit TTS aussprechen soll.
Bildschirmleser suchen zuerst nach dem lang-Attribut innerhalb des <html>-Tags für seitenweite Sprachinformationen. Wenn eine Seite z. B. in Englisch geschrieben ist, würde der öffnende <html>-Tag lauten:
<html lang="en">
In Fällen, in denen Fremdwörter auf der Seite erscheinen, kann das lang-Attribut innerhalb eines beliebigen anderen Tags, üblicherweise <span> oder <p>, platziert werden, um einen temporären Sprachwechsel zu kennzeichnen:
<html lang="en">
<body>
<p>I am a paragraph in English.</p>
<p>“Hello” in Spanish is <span lang=“es”>hola</span>.</p>
<p lang="fr">Je suis un paragraphe en Français.</p> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://brainbox.swiss/content/litespeed/js/1/075e2a2fb5b82593ef61b93444128ce8.js?ver=ab815"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
Verwenden Sie ARIA-Attribute.
ARIA-Attribute sind Werte, die die Funktion eines Seitenelements oder Bereichs für Bildschirmleser angeben. Sie können innerhalb von <div> und <span> Tags mit dem Attribut role platziert werden. Zu den ARIA-Rollen gehören main, form, navigation und search.
Wenn Sie z.B. angeben möchten, dass es sich bei einer Liste von Links um ein Navigationsmenü handelt, können Sie ein ARIA-Landmark wie folgt platzieren:
<div role=”navigation”>
<ul>
<li>Product</li>
<li>Solutions</li>
<li>About Us</li>
<li>Blog</li>
</ul>
</div>
Hier ist role=”navigation” die ARIA-Landmark.
Beachten Sie auch, dass ARIA-Landmarken nur in <div>- und <span>-Tags verwendet werden sollten, da diese generische Tags und nicht semantisch reichhaltig sind. Tags wie <menu>, <nav>, <form> und <main> sollten keine ARIA-Landmarken verwenden, da ihr Zweck bereits durch ihre Namen festgelegt ist.
Obwohl nicht alle Screenreader ARIA-Landmarken erkennen, ist es eine gute Praxis, sie in allen Seitenbereichen zu verwenden, deren Funktion allein aus den Tag-Namen unklar ist.
Schreiben Sie beschreibende Überschriften und erste Sätze.
Ähnlich wie sehende Benutzer den Seiteninhalt visuell überfliegen, können Benutzer von Bildschirmlesegeräten eine Vorschau der Überschriften und Absätze anzeigen, um zu sehen, ob der Inhalt für sie relevant ist. Daher ist es eine gute Praxis, die Überschriften so beschreibend wie möglich zu gestalten und die Absätze so zu beginnen, dass die Leser ein Verständnis für den kommenden Inhalt bekommen.
Verwenden Sie Alt-Text.
Der Hauptzweck von alternativem Text ist nicht die Suchmaschinenoptimierung, sondern die Bereitstellung von Untertiteln für Medieninhalte für Bildschirmleser. Wenn ein Bildschirmlesegerät auf ein Bild, ein Video oder ein anderes Medium stößt, wird es standardmäßig den Alternativtext lesen, wenn dieser vorhanden ist. Wenn kein Alt-Text vorhanden ist, ignorieren Bildschirmleser das Bild oder lesen den Dateinamen des Bildes.
Um Ihre Seiten zugänglich zu machen, fügen Sie immer einen klaren und beschreibenden Alt-Text zu jedem Nicht-Text-Inhalt hinzu, also zu Bildern, Videos, Symbolen und Einbettungen. Ein geeigneter Alt-Text für dieses Bild ist zum Beispiel…
…wäre:
alt="Kapelbrücke in Luzern am Abend mit Beleuchtung”
Punktuation
Hier ist ein weiterer Tipp, der allen Seitenbesuchern hilft, ob mit oder ohne Screenreader-Unterstützung. Um Sprache zu simulieren, macht Screen-Reader-TTS Pausen bei Punkten, Kommas, neuen Absätzen und anderen Interpunktionszeichen. Für ein optimales Erlebnis sollten Sie sicherstellen, dass Sie die Interpunktion auf die richtige Weise implementieren.
