it-swarm.com.de

Eingabehilfen: Empfohlene Alt-Text-Konvention für SVG und MathML?

Übersicht

HTML5 erlaubt jetzt<svg> und <math> Markup mit einem HTML-Dokument ohne Abhängigkeit von externen Namensräumen (anständige Übersicht hier ). Beide haben ihre eigenen Analoga mit alt-Attributen (siehe unten), die von der heutigen Screenreader-Software effektiv ignoriert werden. Somit sind diese Elemente für blinde Benutzer nicht zugänglich.

Gibt es Pläne, eine Standard-Alt-Text-Konvention für diese neuen Elemente zu implementieren? Ich habe die Dokumente durchsucht und bin trocken geworden!

Weitere Details

In Bezug auf SVG: Der alternative Text einer SVG könnte als Inhalt des Tags root title oder desc angesehen werden.

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

Ich habe einen Screenreader gefunden, der es als solchen liest, aber ist das Standard? Frühere Methoden zum Einfügen von SVG hatten ebenfalls Probleme mit der Barrierefreiheit seit <object> Tags werden von Screenreadern inkonsistent behandelt.

In Bezug auf MathML: Der alternative Text von MathML sollte im Attribut alttext gespeichert werden.

<math alttext="A squared plus B squared equals C squared">
  ...
</math>

Da Screenreader dies nicht zu erkennen scheinen, fügt die Math-Rendering-Bibliothek MathJax Text in ein aria-label Attribut zur Laufzeit.

<span aria-label="[alttext contents]">...</span>

Leider lesen auch NVDA, JAWS und andere diese Etiketten noch nicht zuverlässig. (Mehr zu WAI-ARIA )

Bezüglich beidem: Da die weitgehend nicht unterstützten ARIA-Attribute keinen Erfolg hatten, habe ich versucht, title -Attribute zu verwenden. Diese scheinen bei diesen "fremden" HTML-Elementen ebenfalls ignoriert zu werden.

Zusammenfassung

Mehr als ein schneller Hack, ich suche nach dem empfohlenen Weg, um alternativen Text auf diesen neuen HTML-Elementen zu platzieren. Vielleicht gibt es eine W3C-Spezifikation, die ich übersehen habe? Oder ist es noch zu früh im Spiel?

68

Nach einigem Graben fand ich einige etwas offizielle Empfehlungen. Leider sind die meisten zu diesem Zeitpunkt nicht funktionsfähig. Sowohl die Browser als auch die Screenreader müssen eine Menge implementieren, bevor Math und SVG als zugänglich betrachtet werden können, aber die Dinge beginnen nachzuschlagen.

Haftungsausschluss: Die folgenden Empfehlungen stammen aus den letzten Codierungsmonaten. Wenn etwas völlig falsch ist, lassen Sie es mich bitte wissen. Ich werde versuchen, dies auf dem neuesten Stand zu halten, wenn Browser und AT Software Fortschritte machen.

MathML

Empfehlung

Verwenden Sie role="math" Zusammen mit einem aria-label Für ein umgebendes div -Tag (siehe docs ). Durch das Hinzufügen von tabindex="0" Können sich Bildschirmleser gezielt auf dieses Element konzentrieren. Das aria-label dieses Elements kann über eine spezielle Tastenkombination (z. B. NVDA+Tab) gesprochen werden.

<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

Einschränkungen/Überlegungen

  • Sketchy Screenreader-Unterstützung für aria-label (Und weniger wichtig role="math").
    Update: Relevante NVDA-Tickets bezüglich aria-labelhier und hier .
  • Das Einschließen des Tags div oder span erscheint unnötig, da math in HTML5 ein erstklassiges Element ist.
  • Ich habe nur sehr wenige Hinweise auf das Tag MathML alttext gefunden.
    Update: Dies scheint ein DAISY - spezifisches zu sein Außerdem beschrieben hier .

Referenzen

[~ # ~] svg [~ # ~]

Empfehlung

Verwenden Sie die obersten Tags <title> Und <desc> Zusammen mit role="img" Und aria-label Für das SVG-Root-Tag.

<svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

Einschränkungen/Überlegungen

  • Ab Februar 2011 liest IE 9 Beta alle <title> Und <desc> Tags, was wahrscheinlich unerwünscht ist. NVDA, JAWS und WindowEyes lesen jedoch den aria-label, wenn das Element auch role="img" enthält.
  • Wenn Sie eine SVG-Datei laden (dh nicht in HTML-Inline), wird das Root-Level-Tag <title> Zum Titel der Browserseite, von der gelesen wird der Bildschirmleser.

Referenzen

74

Im Allgemeinen versucht HTML5, Autoren von der Bereitstellung von Inhalten abzuhalten, die für sehende Benutzer verborgen sind, da (a) häufig neue Informationen enthalten sind, die für sehende Benutzer von Nutzen sind, (b) sie häufig schlecht geschrieben sind, weil es nur wenig Feedback zu den (normalerweise) gibt ) Sehender Autor, und (c) es wird nicht so sorgfältig gepflegt und kann daher schnell abgestanden sein.

Anstatt die Informationen in einem Attribut auszublenden, sollten Sie sie normalerweise auf der Seite als Beschriftung in einem <p> - Tag neben dem Abschnitt svg oder math platzieren oder den Text in einen <figcaption> - Tag einfügen. taggen Sie das und den Abschnitt svg/math in ein <figure> - Element.

Wenn Sie wirklich nicht möchten, dass sehende Benutzer die Informationen sehen, ist es meines Erachtens die Standardtechnik, die Beschriftung absolut mit einem großen negativen "linken" Wert zu positionieren, zumindest bis Screenreader HTML5 einholen.

3
Alohci

In Bezug auf SVG, das den obigen Vorschlägen ähnlich, aber nicht identisch ist, scheint es der derzeit beste Ansatz zu sein, eine Arienbeschriftung zu verwenden, indem auf die ID des Elements verwiesen wird, das den 'Alt-Text' enthält (nicht den Alt-Text selbst).

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

Sie können auch die Elemente title und desc verwenden, indem Sie aria-labelledby = "svg1title svg1desc" setzen.

Quelle: http://www.sitepoint.com/tips-accessible-svg/

Es ist ärgerlich, wenn Sie dies tun, müssen Sie (irgendwie) sicherstellen, dass die IDs auf der gesamten Seite eindeutig sind (mit anderen Worten, wenn Sie viele SVGs verwenden, müssen sie alle unterschiedliche IDs für den Titel haben). Dies gilt auch für andere IDs innerhalb der SVG und ist ein allgemeiner schwerwiegender Ärger mit der Inline-SVG.

(Wenn dies ernsthaft problematisch ist, sollten Sie die Einbettung von SVGs mithilfe des img-Tags prüfen. Sie können dies auch ohne externe Datei inline ausführen, wenn Sie eine Daten-URL verwenden und die SVG mit base64 codieren.)

3
sam

Theoretisch sollte ein SVG-Bild besser zugänglich sein als ein Rasterbild mit einem Alt-Tag. Zum einen kann Text als Text in einer Svg gespeichert werden, ganze Textfragmente und nicht nur ein kurzer Satz. Es ist traurig, wenn Screenreader diese zusätzlichen Informationen ignorieren. Es ist jedoch möglich, dass nicht der gesamte Textinhalt zu einem bestimmten Zeitpunkt angezeigt wird, wie dies auch bei HTML der Fall ist. Viele SVG-Bilder sind statische Bilder, aber ein wachsender Trend (basierend auf der tatsächlichen Verwendung im offenen Web) scheint darin zu bestehen, dynamischere SVGs zu verwenden, beispielsweise zum Anzeigen von Grafiken oder Diagrammen, die bearbeitet oder ausgeklappt werden können.

Eine andere Sache zu beachten ist, dass <title> -Elemente werden in allen SVG-fähigen Browsern AFAIK (mindestens der neuesten Generation) als QuickInfos (für sehende Benutzer) angezeigt und können auch in andere SVG-Elemente eingefügt werden (der Titel bezieht sich auf das Element, für das sie sich befinden ein direktes Kind).

2
Erik Dahlström

Ich habe das nicht getestet, aber Sie können versuchen, einem Container-DIV alt = "whatever" hinzuzufügen. Ja, es ist kein gültiges Attribut für DIV, aber ich sehe ältere Screenreader, die sich nicht darum kümmern, wo alt erscheint.

Beispielsweise:

<div aria-label="Whatever" alt="Whatever" role="math">
    <math>...</math>
</div>

Offensichtlich wird davon ausgegangen, dass Screenreader alternative Attribute (falsch) für andere Elemente als IMG lesen. Nicht getestet, aber es ist besser, darauf zu warten, dass Bildschirmleser aufholen, wenn es funktioniert.

0
ZiggyTheHamster