Oracle JET-App für Barrierefreiheit testen: Visuelle Prüfung
Einführung
Die Web Content Accessibility Guidelines (WCAG) 2.2 enthalten eine Reihe von mehr als sechzig Erfolgskriterien zum Erstellen einer barrierefreien Webanwendung. In diesem Lernpfad konzentrieren wir uns auf eine Untergruppe dieser Kriterien, die sich hauptsächlich auf Folgendes konzentriert:
- Verwenden einer Tastatur für die Interaktion mit der App.
- Verwenden einer Bildschirmsprachausgabe zum Navigieren in der App.
- Verwenden einer Bildschirmlupe zur Verbesserung des Gesichtsfelds.
Dieses Tutorial konzentriert sich darauf, wo das Testen einer App beginnt: die visuelle Inspektion. In diesem Tutorial führen Sie und die beiden folgenden Schritte, Oracle JET App für Nur-Tastatur-Barrierefreiheit testen und Validierung des Bildschirmlesers in einer Oracle JET-App ausführen, die erforderlichen Testschritte durch. Sie müssen diese drei Testtutorials abschließen, bevor Sie den Lernpfad fortsetzen können.
Der erste Schritt bei der Bewertung einer Web-App für Barrierefreiheit besteht darin, eine visuelle Überprüfung der App durchzuführen. Suchen Sie während der Prüfung nach folgenden Elementen:
- Seitenstruktur: Sind Abschnitte der Seite durch Überschriften gekennzeichnet?
- Seitentitel: Gibt der Seitentitel die angezeigte Seite genau wieder?
- Navigationslink überspringen: Enthalten die Seiten der App einen Link zum Überspringen der Navigation, um die Navigation zum Hauptinhalt jeder Seite zu erleichtern?
- Farbe und Position: Gibt es Etiketten, um die Farben oder Positionen von Steuerelementen zu identifizieren?
- Lesbarkeit: Ist die Seite für Menschen mit niedrigem Sehvermögen lesbar?
Ziele
In diesem Tutorial erfahren Sie, wie Sie einen manuellen Barrierefreiheitstest für eine Webanwendung ausführen. Außerdem erfahren Sie, wie das JavaScript Audit-Framework von Oracle bei der Suche nach Barrierefreiheitsproblemen helfen kann.
Voraussetzungen
- Eine Entwicklungsumgebung, die so eingerichtet ist, dass Oracle JET-Apps mit installierter Befehlszeilenschnittstelle (JavaScript Runtime, Node.js und Oracle JET Release 13.0 oder höher) erstellt werden
- Vertrautheit mit den Zielen dieses Lernpfads: Zugängliche Oracle JET-Apps erstellen
- Google Chrome Webbrowser installiert und als Standard-Webbrowser festgelegt
- Zugriff auf das Oracle JET Developer Cookbook
- Laden Sie die Starter-App ACCLearningPath.zip herunter
Aufgabe 1: Starter-App vorbereiten
In diesem Lernpfad verwenden wir eine Oracle JET 13.0 Nav Drawer Starter-App.
-
Extrahieren Sie die heruntergeladene Datei ACCLearningPath.zip in dem Verzeichnis im Dateisystem, in dem die Anwendung gespeichert werden soll, in einen Ordner
ACCLearningPath. -
Öffnen Sie ein Terminalfenster, und prüfen Sie, ob die neueste Version der Oracle JET-Befehlszeilenschnittstelle (CLI) installiert ist (Release 13.0 oder höher ist erforderlich).
$ ojet --versionWenn die neueste Version der Oracle JET-CLI angezeigt wird, ist die Installation korrekt. Falls nicht, installieren Sie es erneut, indem Sie den Befehl
npm installfür Ihre Plattform verwenden.-
Windows:
$ npm install -g @oracle/ojet-cli -
Für Mac- und Linux-Systeme:
$ sudo npm install -g @oracle/ojet-cliNachdem die Installation abgeschlossen ist, zeigt die Oracle JET-CLI eine Zusammenfassung aller Änderungen an.
-
-
Navigieren Sie zum Verzeichnis
ACCLearningPath, und stellen Sie das Oracle JET-App-Tooling wieder her.$ ojet restore -
App ausführen.
$ ojet serveDas Oracle JET-Tooling führt Ihre App in einem lokalen Webbrowser aus. Der Browser öffnet sich zur Einführungsseite der App, wobei die Registerkarte Übersicht geladen ist. Die App ist bereit zur Verwendung.
Lassen Sie das Terminalfenster und den Browser geöffnet, damit Ihre App automatisch mit allen Änderungen aktualisiert wird, die Sie vornehmen.
Aufgabe 2: App prüfen
Das Oracle JET Audit Framework (JAF) ist ein Befehlszeilenutility und eine unterstützende API, mit der die Dateien einer Oracle JET-App basierend auf den in einer Konfigurationsdatei gefundenen Laufzeitoptionen auditiert werden können. Die Diagnosemeldungen, die vom Audit einer App zurückgegeben werden, stammen aus integrierten Regelsets, die für die JET-Releaseversion der App spezifisch sind. Das Audit-Framework ist jedoch erweiterbar, und Benutzer können seine Funktionen erweitern, indem sie benutzerdefinierte Regeln schreiben.
Oracle JAF-Audits können dazu beitragen, Zugriffsberechtigungen und andere Probleme in Ihren Apps zu identifizieren, obwohl sie nicht alle Barrierefreiheitsprobleme finden, die wir in der ACCLearningPath-App beheben werden. Aus diesem Grund sollten Sie neben dem Auditing der App die in diesem Lernpfad Barrierefreiheitsprobleme identifizieren beschriebenen Verfahren und Schritte befolgen, um Probleme mit der Barrierefreiheit zu finden und zu beheben. Zu Beginn des Zugriffs auf die Beispiel-App sollte ein JAF-Audit ausgeführt werden, um potenzielle Probleme in Ihrer App zu identifizieren, bevor Sie mit der Arbeit beginnen. Weitere Informationen zu Oracle JAF finden Sie unter Oracle JET Audit Framework verwenden und erweitern.
Laden Sie Oracle JAF im CLI-Modus herunter, und verwenden Sie ihn, um auf Probleme mit der Barrierefreiheit zu prüfen.
-
Verwenden Sie
npm, um die Oracle JAF-CLI zu installieren.Öffnen Sie ein Terminalfenster, und prüfen Sie auf installierte Versionen von Oracle JAF.
$ ojaf -vWenn die JAF-Version nicht installiert ist oder nicht die aktuelle Version ist, deinstallieren Sie ältere Versionen, und installieren Sie die aktuelle Version.
$ npm uninstall -g @oracle/oraclejet-audit$ npm install -g @oracle/oraclejet-audit -
Navigieren Sie zum Verzeichnis
ACCLearningPathIhrer App, und verwenden Sie das Befehlszeilen-Flag--init, um eine Standard-JAF-Konfiguration zu initialisieren.$ ojaf --initDas Tooling erstellt die JAF-Standardkonfigurationsdatei
oraclejafconfig.jsonim VerzeichnisACCLearningPathund definiert die Standardkonfigurationseinstellungen basierend auf der JET-Anwendungskonfigurationsdateioraclejetconfig.json, die sich ebenfalls im Root-Verzeichnis der App befindet. -
Öffnen Sie
oraclejafconfig.jsonin Ihrem Editor, und stellen Sie sicher, dass der Wert der EigenschaftjetVerfür die Version von JET korrekt ist, für die Sie ein Audit durchführen möchten (z.B. 13.0, 13.1 usw.)."builtinJetRules": true, "jetVer": "13.0",Sie können das App-Audit anpassen, indem Sie JAF-Eigenschaften in der Datei
oraclejafconfig.jsonhinzufügen oder ändern. Eine vollständige Beschreibung der Konfigurationsoptionen finden Sie unter Informationen zu den Eigenschaften der Oracle JAF-Konfigurationsdatei. -
Bevor Sie die App zum ersten Mal auditieren, können Sie die Standardkonfiguration für die Dateien bestätigen, die JAF auditiert, indem Sie das Befehlszeilen-Flag
--dryrunverwenden.$ ojaf --dryrunBei einem Trockenlauf wird die Anwendung nicht geprüft, sondern die zu auditierenden Dateien werden basierend auf den aktuellen JAF-Konfigurationseinstellungen bestätigt.
Hinweis: Sie können eine vollständige Liste der Befehlszeilen-Flags abrufen, indem Sie den Befehl
ojaf --helpeingeben. -
Führen Sie ein Audit Ihrer Anwendung durch, indem Sie den Befehl zum Aufrufen des JAF-Auditutilitys eingeben.
$ ojaf -
Wenn Sie den Audit ausführen, durchsucht Oracle JAF das Verzeichnis nach
oraclejafconfig.jsonund erstellt einen Auditbericht.Der Bericht listet die Probleme auf, die in der App auftreten, sowie deren Speicherorte in den App-Dateien. Darüber hinaus enthält der Bericht eine Zusammenfassung der gefundenen Probleme und ihrer Schweregrade, der geprüften Regeln und der geprüften Dateien.

Beachten Sie in der Problemliste des Auditberichts das Problem
blockerder Dringlichkeitsstufe, das in der Dateidepartments.htmlgefunden wurde:'aria-label' or 'aria-labelledby' missing on <oj-film-strip>.In der Filmstreifenkomponente in der App fehlt eine Eigenschaft
aria-label, die verhindern kann, dass eine Sprachausgabe auf die Identität der Komponente zugreift. Dies ist eines der Barrierefreiheitsprobleme, die wir in späteren Tutorials behandeln werden.
Dies ist das Ende der Diskussion über Oracle JAF in diesem Lernpfad. Wenn Sie mit dem Auditing Ihrer App fertig sind, müssen Sie den Ordner jaftmp@ und die Datei oraclejafconfig.json aus dem Verzeichnis ACCLearningPath löschen.
Aufgabe 3: Seitenstruktur prüfen
Die Seitenstruktur ist der logische Ausgangspunkt für die visuelle Prüfung einer App. HTML-Überschriften bieten einen Überblick über den Seiteninhalt, ohne sich auf Details zu konzentrieren. Bildschirmsprachausgaben bieten Verknüpfungen, mit denen Benutzer schnell zwischen ordnungsgemäß markierten Überschriften wechseln können.
- Info und Beziehungen zu WCAG Success Criterion 1.3.1: "Informationen, Struktur und Beziehungen, die durch die Präsentation vermittelt werden, können programmgesteuert bestimmt werden oder sind im Text verfügbar."
- Überschriften und Labels für Erfolgskriterium 2.4.6: "Überschriften und Labels beschreiben Thema oder Zweck."
- Abschnittsüberschriften für Erfolgskriterium 2.4.10: "Abschnittsüberschriften werden zum Organisieren des Inhalts verwendet."
Verwenden Sie die App ACCLearningPath, um die Seitenstruktur zu überprüfen.
-
Legen Sie in der laufenden App fest, ob die Abschnitte der Seiten durch Überschriften gekennzeichnet sind.
Der Text der Überschriften ist größer oder anders gestaltet als normaler Text auf der Seite. Erstellen Sie echte HTML-Überschriften mit
<h1>bis<h6>-Tags. -
Bestimmen Sie, ob der Text jeder Überschrift den damit verbundenen Inhalt angemessen beschreibt.
Prüfen Sie die Registerkarte {\b Overview} der Seite {\b Introduction}. Der dritte Bereich ganz rechts hat die Überschrift Textabstand. Der Inhalt dieses Panels betrifft die Anpassung des Textabstands. Daher ist diese Überschrift ein Beispiel für eine hinreichend beschreibende Überschrift.
-
Verwenden Sie die Registerkarte "Chrome DevTools-Elemente", um zu bestimmen, ob es sich bei den Überschriften um echte HTML-Überschriften oder um Text handelt, der diesen ähnlich ist.
-
Klicken Sie mit der rechten Maustaste auf die Überschrift Einführungsseite, und wählen Sie im Kontextmenü die Option Prüfen aus, um die Dokumentobjektmodellstruktur (DOM) der Seite anzuzeigen.
Das hervorgehobene Element im DOM-Baum, das im Bereich DevTools Elemente angezeigt wird, verwendet die richtige Methode zum Erstellen einer HTML-Überschrift.
<h4>The Introduction Page</h4> -
Schließen Sie DevTools, klicken Sie mit der rechten Maustaste auf die Überschrift Seite "Ressourcen", und wählen Sie im Kontextmenü die Option Prüfen aus.
Das hervorgehobene Element in diesem DOM-Baum ist Text, der wie eine HTML-Überschrift aussieht.
<span class="h4Style">The Resources Page</span>Eine Sprachausgabe erkennt diesen Code nicht als Überschrift. Screen-Reader-Benutzer navigieren häufig nach Überschriften auf einer Seite, und Text, der ähnlich wie Überschriften gestaltet ist, wird ignoriert. In den folgenden Schritten beheben Sie die falsch codierte Überschrift. Lassen Sie Ihre App laufen und den Browser geöffnet, um zu sehen, wie sich die folgenden Änderungen auf die App auswirken.
-
-
Navigieren Sie zum Ordner
ACCLearningPath/src/js/views, und öffnen Sieoverview.htmlin Ihrem Codeeditor. -
Suchen Sie das Tag
<span class="h4Style">. -
Ersetzen Sie das Tag
<span class="h4Style">durch ein Tag<h4>. -
Ersetzen Sie das Tag
</span>durch ein Tag</h4>. -
Speichern Sie die Datei und zeigen Sie die Änderungen an Ihrer App im Browser an.
Aufgabe 4: Seitentitel prüfen
Eine visuelle Überprüfung der App beinhaltet eine Bewertung der Wirksamkeit des Seitentitels.
- WCAG Success Criterion 2.4.2 Page Titled: "Webseiten haben Titel, die Thema oder Zweck beschreiben."
- Speicherort für Erfolgskriterium 2.4.8: "Informationen zum Speicherort des Benutzers innerhalb einer Gruppe von Webseiten sind verfügbar."
Navigieren Sie durch die laufende Starter-App und sehen Sie sich die einzelnen Seitentitel an.
-
Bestimmen Sie, ob der Seitentitel die Seite, die Registerkarte und den App-Namen eindeutig identifiziert.
-
Legen Sie fest, ob sich der Seitentitel ändert, wenn Sie zwischen Seiten oder Registerkarten auf der Seite "Einführung" navigieren.
Der Seitentitel sollte für jede neue Seite oder Registerkarte geändert werden, die angezeigt wird. Beispiel: Wenn im Hauptmenü oben rechts auf der Seite die Option Einführung ausgewählt ist, muss der Titel "Einführung" lauten. Wenn Ressourcen ausgewählt ist, muss der Titel "Ressourcen" lauten.
Der Titel der Einführungsseite sollte sowohl das Wort "Einführung" als auch den Namen der aktuell ausgewählten Registerkarte enthalten. Wenn Sie eine andere Registerkarte aus der Registerkartenleiste auswählen, sollte der Titel entsprechend der neu ausgewählten Registerkarte geändert werden.
- Einführung - Überblick
- Einführung - Organisation
- Einführung - Mitarbeiter
- Einführung - Abteilungen
Ebenso sollte der Titel der Seite "Ressourcen" das Wort "Ressourcen" enthalten.
Sie werden feststellen, dass sich der Seitentitel nicht ändert, wenn Sie zwischen Seiten oder Registerkarten navigieren. Dieses Problem wird in einem späteren Tutorial behoben.
Aufgabe 5: Link "Navigation überspringen" prüfen
Wenn wiederholt Inhalte wie Navigationslinks und Logos im Seitenheader einer Web-App vorhanden sind, schließen Sie einen Überspringen-Navigationslink ein. Branchenstandards deuten darauf hin, dass der Link zum Überspringen von Navigationsdaten aus der Ansicht ausgeblendet werden sollte, bis durch Tabulatortaste darauf zugegriffen wird.
- WCAG Success Criterion 2.4.1 Bypass Blocks: "Ein Mechanismus ist verfügbar, um Inhaltsblöcke zu umgehen, die auf mehreren Webseiten wiederholt werden."
Testen Sie, ob der Link "nav überspringen" in der App vorhanden ist, die im Browser ausgeführt wird.
-
Drücken Sie in der App
<Ctrl+L>, um den Fokus in die Adressleiste zu verschieben. -
Drücken Sie
<Tab>, um den Überspringen-Navigationslink anzuzeigen und zu fokussieren.Da kein Skip-Nav-Link angezeigt wird, geht der Fokus auf das erste fokussierbare Element auf der Seite: john.hancock@oracle.com im Benutzermenü oben rechts auf der Seite. Fokussierbare Elemente werden im Tutorial Nur Tastatur - Barrierefreiheit detaillierter definiert.
Sie haben während des Tests festgestellt, dass für die Starter-App kein Überspringen-Navigationslink implementiert ist.
Zum Hinzufügen des Links zum Überspringen von Navi gibt es drei Schritte:
- Fügen Sie den Link zur Datei
index.htmlhinzu. - Fügen Sie der Datei
app.csseine Stilklasse hinzu, um den Link "nav überspringen" bis zur Tabulatortaste auszublenden. - Fügen Sie die Zielanker den Dateien
intro.htmlundresources.htmlhinzu.
- Fügen Sie den Link zur Datei
Aktualisieren der Datei index.html
Die Datei index.html definiert die übergeordnete Struktur der Oracle JET-Webanwendung. Der Link "nav überspringen" muss auf dieser Seite platziert werden.
-
Navigieren Sie zum Verzeichnis
ACCLearningPath/src, und öffnen Sieindex.htmlin einem Codeeditor. -
Suchen Sie das Tag
<body>.<body class="oj-web-applayout-body"> <!-- Template for rendering navigation items shared between nav bar and nav list --> -
Fügen Sie einen Link mit dem Ziel
#mainzwischen dem<body>-Tag und dem darauf folgenden Kommentar ein.<body class="oj-web-applayout-body"> <a class="hideSkipNav" href="#main">Skip to main content</a> <!-- Template for rendering navigation items shared between nav bar and nav list -->Die Klasse
hideSkipNavmacht den Link unsichtbar, bis der Benutzer oben auf der Seite beginnt und<Tab>drückt. -
Speichern und schließen Sie
index.html. Die Datei sollte ungefähr wieindex-html.txtaussehen.
Aktualisieren der Datei app.css
Wir haben die Stilklasse hideSkipNav in der Datei index.html referenziert. Jetzt müssen wir es in app.css definieren. Alle benutzerdefinierten Stildefinitionen befinden sich in dieser Datei.
-
Navigieren Sie zum Ordner
ACCLearningPath/src/css, und bearbeiten Sieapp.css. -
Fügen Sie die Stilklasse
.hideSkipNavund die Eigenschaften am Ende der Datei hinzu..hideSkipNav { position: absolute; left: -1000px; } .hideSkipNav:focus { position: unset; left: 0px; } -
Speichern und schließen Sie
app.css. Die Datei sollte ungefähr wie app-css.txt aussehen.
HTML-Dateien der Seiten aktualisieren
Da das Ziel des Überspringen-Navigationslinks oben im Hauptinhalt jeder Seite stehen soll, fügen Sie die Zielankertags sowohl der Einführungs- als auch der Ressourcenseite hinzu.
-
Navigieren Sie zum Ordner
ACCLearningPath/src/js/views, und bearbeiten Sie die Dateiintro.html. -
Suchen Sie
<div>mit der Klasseoj-hybrid-padding.<div class="oj-hybrid-padding"> <div id="mainContainer"> -
Fügen Sie das Anker-Tag und die Überschrift
h2zwischen den beiden<div>-Tags ein.<div class="oj-hybrid-padding"> <a id="main"> <h2>Introduction</h2> </a> <div id="mainContainer">Der hinzugefügte Code stellt nicht nur das Ziel des Überspringav-Links bereit, sondern auch eine Überschrift
h2, um die Seitenstruktur zu verbessern. -
Speichern und schließen Sie
intro.html. Die Datei sollte ungefähr wie intro-html.txt aussehen. -
Öffnen Sie
resources.htmlim Codeeditor, und suchen Sie<div>mit der Klasseoj-hybrid-padding.<div class="oj-hybrid-padding"> <ul> -
Fügen Sie das Anker-Tag und die Überschrift
h2zwischen den Tags<div>und<ul>ein.<div class="oj-hybrid-padding"> <a id="main"> <h2>Resources</h2> </a> <ul> -
Speichern und schließen Sie
resources.html. Die Datei sollte ungefähr wie resources-html.txt aussehen. -
Drücken Sie in der laufenden App
<Ctrl+L>, um den Fokus in die Adressleiste zu verschieben. -
Drücken Sie
<Tab>, um den Überspringen-Navigationslink anzuzeigen und zu fokussieren. -
Klicken Sie auf
<Enter>, um den Link "skip nav" zu aktivieren.Der Fokus wird dann auf den Hauptinhalt der Seite verschoben.
Sobald Sie die Funktionalität des Überspringen-Navigationslinks getestet haben, wechseln Sie zum nächsten Element der Sichtprüfung.
Aufgabe 6: Prüfen, ob Farbe und Position verwendet werden
Schaltflächen sind ein integraler Bestandteil von Richtungen, die einen Benutzer von einer Seite oder Aktion zur nächsten bewegen. Entwickler verbessern das Aussehen und die Funktionalität einer Seite mit farbigen Schaltflächen. "Drücken Sie die grüne Taste, um fortzufahren" ist eine allgemeine Anweisung. Doch ohne die richtige Kennzeichnung können sehbehinderte Benutzer diese und ähnliche Anweisungen nicht befolgen.
- WCAG Success Criterion 1.3.3 Sensory Characteristics besagt: "Anweisungen, die zum Verständnis und zur Bedienung von Inhalten bereitgestellt werden, beruhen nicht nur auf sensorischen Eigenschaften von Komponenten wie Form, Farbe, Größe, visueller Lage, Ausrichtung oder Klang."
- Erfolgskriterium 1.4.1 Verwendung von Farbe: "Farbe wird nicht als einziges visuelles Mittel zur Übermittlung von Informationen, zur Angabe einer Aktion, zur Eingabe einer Antwort oder zur Unterscheidung eines visuellen Elements verwendet."
Der mittlere Bereich der Übersichtsseite enthält eine Symbolleiste mit drei farbigen Schaltflächen sowie ein paar Anweisungen zum Drücken von Schaltflächen basierend auf ihrer Farbe und Position. Ein blinder oder farbenblinder Benutzer kann nicht zwischen den Schaltflächen unterscheiden, da sie keine Labels oder andere Unterscheidungsmerkmale haben. Diese Schaltflächen sind nicht erfolgreich. Erfolgskriterien 1.3.3 und 1.4.1.

Jeder der farbigen Schaltflächen im mittleren Fensterbereich muss ein Textlabel zugeordnet sein. Die folgenden Änderungen fügen den Schaltflächen Farbnamen als Labels hinzu.
-
Navigieren Sie zum Ordner
ACCLearningPath/src/js/views, und bearbeiten Sie die Dateioverview.html. -
Suchen Sie das Set von drei
oj-button-Elementen.<oj-button id="chat" class="demo-button-green button-set-width" chroming="solid" on-oj-action="[[greenActivated]]"> </oj-button> <oj-button id="paint" class="demo-button-red button-set-width" chroming="solid" on-oj-action="[[redActivated]]"> </oj-button> <oj-button id="bookmark" class="demo-button-purple button-set-width" chroming="solid" on-oj-action="[[purpleActivated]]"> </oj-button> -
Ändern Sie die Schaltflächen im Code, um die Farbkennungen zu erstellen.
<oj-button id="chat" class="demo-button-green button-set-width" chroming="solid" on-oj-action="[[greenActivated]]">Green </oj-button> <oj-button id="paint" class="demo-button-red button-set-width" chroming="solid" on-oj-action="[[redActivated]]">Red </oj-button> <oj-button id="bookmark" class="demo-button-purple button-set-width" chroming="solid" on-oj-action="[[purpleActivated]]">Purple </oj-button> -
Speichern Sie
overview.html, und prüfen Sie, ob die Schaltflächen jetzt über die entsprechenden Textlabels verfügen.Die Datei sollte ungefähr wie overview-html.txt aussehen.
Aufgabe 7: Lesbarkeit prüfen
Die Endphase der visuellen Inspektion ist speziell für Benutzer mit geringem Sehvermögen. Bestimmen Sie, ob die Anpassung des Zeilen-, Wort- und Zeichenabstands oder die Änderung der Zoomstufe der Seite die Lesbarkeit erhöht oder verringert.
- Der Text WCAG Success Criterion 1.4.4 Resize gibt an: "Abgesehen von Beschriftungen und Bildern von Text kann Text ohne unterstützende Technologie bis zu 200 Prozent skaliert werden, ohne dass Inhalt oder Funktionalität verloren gehen."
- Erfolgskriterium 1.4.12 Textabstand gibt Folgendes an: "In Inhalten, die mit Markup-Sprachen implementiert werden, die folgende Textstileigenschaften unterstützen, kommt es zu keinem Verlust an Inhalt oder Funktionalität, indem alle folgenden Einstellungen vorgenommen werden und keine andere Stileigenschaft geändert wird:
- Zeilenhöhe (Linienabstand) bis mindestens das 1,5-fache der Schriftgröße.
- Abstand nach Absätzen auf mindestens das 2-fache der Schriftgröße.
- Buchstabenabstand (Tracking) bis zum 0,12-fachen der Schriftgröße.
- Wortabstand auf mindestens das 0,16-fache der Schriftgröße."
Wir verwenden die Übersichtsseite, um diese Kriterien zu veranschaulichen und den Textabstand zu überprüfen und die App zu vergrößern.

-
Prüfen Sie in der aktiven App den äußersten rechten Bereich der Seite mit dem Titel Textabstand. Der Bereich enthält zwei Abschnitte. Vergleichen Sie den Text in beiden Abschnitten, um sicherzustellen, dass der gesamte Text vorhanden ist.
Der obere Teil des Panels hat Text mit normalem Abstand. Der untere Teil enthält denselben Text mit erhöhtem Zeichen-, Wort- und Zeilenabstand.
Wenn keines der Zeichen im unteren Abschnitt verzerrt, ausgeschnitten oder überlappt ist, erfüllt die Seite das Erfolgskriterium 1.4.12.
-
Erhöhen Sie die Zoomstufe des Browsers auf 200%. Klicken Sie in der Symbolleiste auf das Vergrößerungssymbol mit dem Vergrößerungsglas, und klicken Sie dann auf das Zeichen +, um den Zoom zu erhöhen.
Wenn der gesamte Text lesbar ist und der Text in jedem Panel korrekt umgebrochen wird, erfüllt die Seite das Erfolgskriterium 1.4.4 bei einer Vergrößerung von 200%.
- Erfolgskriterium 1.4.10-Reflow: "Inhalt kann ohne Informations- oder Funktionsverlust und ohne Scrollen in zwei Dimensionen dargestellt werden für:
- Vertikaler Bildlauf in einer Breite von 320 CSS-Pixel;
- Horizontaler Bildlaufinhalt in einer Höhe, die 256 CSS-Pixel entspricht. Abgesehen von Teilen des Inhalts, die zweidimensionales Layout für die Verwendung oder Bedeutung erfordern."
Die Seite sollte neu formatiert werden, sodass nur ein Bildlauf in eine Richtung erforderlich ist. Eine Seite wird horizontal oder vertikal gescrollt, jedoch nicht in beide Richtungen. Erfolgskriterium 1.4.10 erleichtert die Verwendung von Seiten.
- Erfolgskriterium 1.4.10-Reflow: "Inhalt kann ohne Informations- oder Funktionsverlust und ohne Scrollen in zwei Dimensionen dargestellt werden für:
-
Vergrößern Sie den Zoom auf 400%.
-
Prüfen Sie die Seite auf die Darstellung von Bildlaufleisten. Wenn sowohl horizontale als auch vertikale Bildlaufleisten angezeigt werden, schlägt die Seite dieses Kriterium fehl.
Die erste Testphase ist abgeschlossen.
Nächsten Schritt
Fahren Sie mit dem nächsten Tutorial in diesem Modul fort.
Dieses Tutorial ist Teil des Moduls Barrierefreiheitsprobleme identifizieren.
- Oracle JET-Anwendung für Barrierefreiheit testen: Visuelle Prüfung
- Oracle JET-Anwendung auf Nur-Tastatur-Zugriff testen
- Screen-Reader-Validierung für eine Oracle JET-Anwendung ausführen
Sie können zur Hauptseite des Lernpfads für Barrierefreiheit zurückkehren, um auf alle Module für Barrierefreiheit zuzugreifen.
Weitere Lernressourcen
Sehen Sie sich weitere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere kostenlose Lerninhalte im Oracle Learning YouTube-Kanal zu. Besuchen Sie außerdem education.oracle.com/learning-explorer, um ein Oracle Learning Explorer zu werden.
Die Produktdokumentation finden Sie im Oracle Help Center.
Test an Oracle JET app for accessibility - visual inspection
F71542-02