webentwicklung-frage-antwort-db.com.de

Für Bildschirmleser: Wie markiere ich eine Gruppe von Textelementen, die als ein Element gelesen werden sollen? Soll ich es überhaupt versuchen?

Wie kann ich die folgende Komponente gemäß den WCAG 2.1-Richtlinien, Best Practices für Barrierefreiheit und mit möglichst hilfreicher Technologiekompatibilität kennzeichnen (ich möchte nicht nur auf JAWS, NVDA oder VoiceOver abzielen)?

Oder interessieren sich Benutzer von Bildschirmleseprogrammen (und anderen unterstützenden Technologien) überhaupt für diese bestimmte Interaktion?


Als sehender Benutzer konsumiere ich visuell Folgendes als eine Information:

(enter image description here

Als Benutzer eines Bildschirmlesegeräts wird beim Navigieren nach "Element" jedes markierte Textstück einzeln gelesen.

Der Text ist stark auf Stil, Semantik und die Übermittlung von verstecktem Text nur für Benutzer von Bildschirmleseprogrammen ausgerichtet, was in der Branche üblich ist.

Das Markup sieht ungefähr so ​​aus (Hinweis: Das Verhalten wird jedoch bei jeder Kombination von Tags bemerkt, also kommentieren Sie die Semantik in diesem speziellen Beispiel nicht):

<data value="0.99">
    <span class="sr-only">Sale:</span>
    <mark>$0.99</mark>
    <span class="sr-only">discounted from</span>
    <s>$1.00</s>
</data>

Die Benutzererfahrung des Bildschirmlesegeräts ist also wie folgt:
Hinweis: Die Währungsanzeige variiert je nach Leser- und Benutzereinstellungen.

[User executes "Read current item" command]

Verkauf:

[User executes "Read next item" command]

Neunundneunzig Cent

[User executes "Read next item" command]

abgezinst von

[User executes "Read next item" command]

Ein Dollar

Dies scheint nicht intuitiv und möglicherweise ärgerlich zu sein, da dem Benutzer Implementierungsdetails zu meinem Markup angezeigt werden, die er nicht unbedingt kennen oder beachten muss.


Wenn ich dagegen den Preis für Semantik oder Stil nicht markiert und nur einfachen Text verwendet hätte, um allen Benutzern die gleichen Informationen zu übermitteln, würde er von Bildschirmlesern als ein Element Gelesen =:

<span>Sale: $0.99 discounted from $1.00</span>

Die Erfahrung mit dem Bildschirmleser ist also wie folgt:
Hinweis: Die Währungsanzeige variiert je nach Leser- und Benutzereinstellungen.

[User executes "Read current item" command]

Verkauf: Neunundneunzig Cent von einem Dollar abgezinst

Dies scheint eine viel bessere Erfahrung zu sein und stimmt besser damit überein, wie ein sehender Benutzer die Informationen visuell konsumieren würde und wie ich möchte, dass alle Benutzer die Informationen konsumieren.

2
gfullam

(Kommentar in Antwort erweitern :)
Für mobile Benutzer können Sie das nicht standardmäßige role="text" Für das übergeordnete Element verwenden. Es ist hackig und funktioniert nur mit WebKit, aber das ist in Ordnung, da meiner Erinnerung nach nur VoiceOver (fälschlicherweise) eine Zeile in Teilen unterbricht, wenn es auf ein Inline-Element stößt. NVDA, JAWS und (ich glaube) TalkBack werden die Zeile sofort korrekt lesen, aber wie @andrewmcpherson kommentiert hat, testen Sie bitte mit einer Vielzahl von mehreren Bildschirmlesegeräten.

Die Verwendung von role="text" Unterbricht (und kann zum Glück nicht) die Granularitätsauswahl. Wenn Benutzer den Text also nach Zeile, Wort oder Zeichen lesen möchten, können sie dies bei Bedarf mithilfe der Verknüpfungen des Bildschirmlesegeräts (des Rotors) tun unter iOS zum Beispiel). Wenn Sie diese Rolle verwenden, werden nur untergeordnete Elemente gruppiert, wenn Sie zwischen Elementen navigieren (Wischen nach links/rechts unter iOS).

Ich würde auch überlegen, ob das Hinzufügen von "Sale:" zuerst überhaupt nützlich ist. Sie sagen bereits "Rabatt von", sodass das Hinzufügen von "Sale" dies dupliziert und beim Durchsuchen vieler Elemente zu Audio-Unordnung führen kann.

1
Victor

Wie markiere ich eine Gruppe von Textelementen, die als ein Element gelesen werden sollen? Soll ich es überhaupt versuchen?

Auf diese Weise ist die Frage etwas falsch, weil:

als Benutzer eines Bildschirmlesegeräts, wenn Sie nach "Element" navigieren,

Bildschirmleser können je nach Benutzerpräferenz Textblöcke in unterschiedlicher Granularität lesen. Dies kann jeweils ein Absatz, eine Zeile, ein Wort oder ein Zeichen sein. Erfahrene Benutzer von Bildschirmleseprogrammen können häufig die Granularität wechseln.

Einige Elemente können dazu führen, dass ein Bildschirmleser angehalten oder angehalten wird. Daran führt kein Weg vorbei, wenn Sie den farbigen Hintergrund für den Verkaufspreis und den ursprünglichen Preis durchstreichen möchten.

Dies fühlt sich nach einer viel besseren Erfahrung an und stimmt besser mit der Art und Weise überein, wie ein sehender Benutzer die Informationen visuell konsumieren würde, und wie ich möchte, dass alle Benutzer die Informationen konsumieren.

Hervorhebung meiner dort. Es ist gut, dass Sie darüber nachdenken, wie Sie Bildschirmlesebenutzern eine gleichwertige Erfahrung bieten können, aber Sie sollten sich davor hüten, jemandem eine bestimmte Erfahrung aufzuzwingen. Schließlich wissen Sie nicht warum sie verwenden einen Bildschirmleser. Vielleicht sind sie blind, vielleicht nicht ..

0